@blocklet/payment-react 1.19.22 → 1.20.0

package/docs/overview.md

@@ -0,0 +1,87 @@
+# Overview
+
+`@blocklet/payment-react` is a React component library designed for building payment flows, subscriptions, and donation systems within blocklets. It integrates seamlessly with [Payment Kit](https://www.arcblock.io/docs/arcblock-payment-kit) to provide a comprehensive set of pre-built UI components, context providers, and utility functions that accelerate the development of payment-related features.
+
+Whether you need a simple checkout form, a complete pricing table, or a view of a customer's invoice history, `@blocklet/payment-react` offers the tools to build it efficiently.
+
+## Key Features
+
+<x-cards data-columns="3">
+  <x-card data-title="Pre-built UI Components" data-icon="lucide:layout-template">
+    Includes a rich set of components like checkout forms, pricing tables, and donation widgets to cover common use cases.
+  </x-card>
+  <x-card data-title="Customizable Themes" data-icon="lucide:palette">
+    Gain full control over the look and feel using Material-UI themes, ensuring consistency with your application's design.
+  </x-card>
+  <x-card data-title="i18n Support" data-icon="lucide:languages">
+    Built-in localization capabilities to support a global user base.
+  </x-card>
+  <x-card data-title="Lazy Loading" data-icon="lucide:package-minus">
+    Optimize your application's bundle size by dynamically importing components only when they are needed.
+  </x-card>
+  <x-card data-title="Payment Operations" data-icon="lucide:credit-card">
+    Functionality to manage subscriptions, process refunds, view invoices, and handle metered billing.
+  </x-card>
+</x-cards>
+
+## How It Works
+
+The library is built around a provider pattern. You wrap your application, or a relevant part of your component tree, with a `PaymentProvider`. This provider handles authentication, API communication, and state management. Components rendered within this provider can then access the payment context to perform actions and display data.
+
+This architecture decouples your UI components from the direct handling of API requests, making your code cleaner and easier to maintain.
+
+```d2
+direction: down
+
+"Your React Application": {
+  "PaymentProvider": {
+    shape: package
+    "CheckoutForm"
+    "CheckoutDonate"
+    "CustomerInvoiceList"
+  }
+}
+
+"Blocklet Environment": {
+  "Payment Service": {
+    shape: cloud
+  }
+}
+
+"Your React Application.PaymentProvider" -> "Blocklet Environment.Payment Service": "Communicates via API"
+```
+
+Here is a basic example of how to integrate the `CheckoutForm`:
+
+```tsx
+import { PaymentProvider, CheckoutForm } from '@blocklet/payment-react';
+
+// A custom hook from your application that provides the session context.
+// See the PaymentProvider documentation for setup details.
+import { useSessionContext } from './session-context';
+
+function App() {
+  const { session, connectApi } = useSessionContext();
+
+  return (
+    <PaymentProvider session={session} connect={connectApi}>
+      <CheckoutForm 
+        id="plink_xxx" // Payment Link ID
+        mode="inline"  // Embed directly in your UI
+        showCheckoutSummary={true}
+        onChange={(state) => console.log('Checkout State:', state)}
+      />
+    </PaymentProvider>
+  );
+}
+```
+
+In this example, `useSessionContext` is a custom hook within your application responsible for managing user session state. It should provide the `session` object and the `connect` function required by the `PaymentProvider`. For a detailed guide on setting up this context, please refer to the [PaymentProvider](./providers-payment-provider.md) documentation.
+
+## Next Steps
+
+To begin integrating payments into your application, proceed to the next section for a step-by-step guide.
+
+<x-card data-title="Getting Started" data-href="/getting-started" data-icon="lucide:arrow-right">
+  Install the library and build your first functional payment form.
+</x-card>

package/docs/providers-donate-provider.md

@@ -0,0 +1,175 @@
+# DonateProvider
+
+The `DonateProvider` is a context provider that manages the state and settings for donation-related components, such as `CheckoutDonate`. It handles fetching donation configurations, updating settings, and providing this data to its children components. To function correctly, `DonateProvider` must be placed within a [`PaymentProvider`](./providers-payment-provider.md).
+
+```d2
+direction: down
+
+"PaymentProvider": {
+  shape: package
+
+  "DonateProvider": {
+    shape: package
+
+    "CheckoutDonate": {
+      shape: document
+      label: "CheckoutDonate Component"
+    }
+  }
+}
+
+"PaymentProvider" -> "DonateProvider" -> "CheckoutDonate": "Provides Context"
+```
+
+This structure ensures that donation components have access to both the general payment context and the specific donation settings.
+
+## Props
+
+The `DonateProvider` accepts the following props to configure its behavior:
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `mountLocation` | `string` | Yes | A unique identifier for this specific donation instance. It's used to fetch and store settings, ensuring that different donation points in your application have their own configurations. |
+| `description` | `string` | Yes | A description to help identify this donation instance in logs or admin interfaces. |
+| `defaultSettings` | `DonateConfigSettings` | No | An object with default settings for the donation component. These settings are used when no configuration has been saved for the given `mountLocation`. |
+| `children` | `any` | Yes | The child components that will be rendered within the provider. Typically, this will include one or more `CheckoutDonate` components. |
+| `active` | `boolean` | No | A flag to control whether the donation functionality is active. Defaults to `true`. |
+| `enableDonate` | `boolean` | No | If set to `true`, it allows administrators to enable a disabled donation instance directly from the UI. Defaults to `false`. |
+
+### DonateConfigSettings
+
+The `defaultSettings` prop accepts an object with the following structure:
+
+| Key | Type | Description |
+|---|---|---|
+| `amount` | `object` | Configuration for donation amounts. Contains `presets` (array of strings), `preset` (string), `custom` (boolean), `minimum` (string), and `maximum` (string). |
+| `btnText` | `string` | Custom text for the main donation button (e.g., "Like", "Support"). |
+| `historyType` | `'table' \| 'avatar'` | Defines the display style for the donation history. |
+
+## Usage Example
+
+Here is a complete example of how to set up `DonateProvider` to wrap a `CheckoutDonate` component. This setup ensures that the donation button has access to the necessary context from both providers.
+
+```tsx
+import {
+  PaymentProvider,
+  DonateProvider,
+  CheckoutDonate,
+} from '@blocklet/payment-react';
+// This is a custom hook to get session context from your application.
+// See the PaymentProvider documentation for more on session setup.
+import { useSessionContext } from '../hooks/use-session-context';
+
+function DonationSection() {
+  const { session, connectApi } = useSessionContext();
+
+  // Render a loading state or null until the session is available
+  if (!session) {
+    return <div>Loading session...</div>;
+  }
+
+  return (
+    <PaymentProvider session={session} connect={connectApi}>
+      <DonateProvider
+        mountLocation="unique-blog-post-123"
+        description="Donation button for the blog post about React Hooks"
+        defaultSettings={{
+          btnText: 'Support the Author',
+          amount: {
+            presets: ['1', '5', '10'],
+            custom: true,
+            minimum: '1',
+          },
+        }}>
+        <CheckoutDonate
+          settings={{
+            target: 'post-123',
+            title: 'Support Author',
+            description: 'If you find this article helpful, feel free to buy me a coffee',
+            reference: 'https://your-site.com/posts/123',
+            beneficiaries: [
+              {
+                address: 'user-did-address',
+                share: '100',
+              },
+            ],
+          }}
+        />
+      </DonateProvider>
+    </PaymentProvider>
+  );
+}
+```
+
+## Using the Context
+
+You can access the donation context's state and functions using the `useDonateContext` hook. This is useful for building custom UI or logic that interacts with the donation settings.
+
+### Context Values
+
+The `useDonateContext` hook returns an object with the following properties:
+
+| Key | Type | Description |
+|---|---|---|
+| `settings` | `TSetting` | An object containing the current settings for the donation instance, including its active status and configuration. |
+| `refresh` | `(forceRefresh?: boolean) => void` | A function to manually trigger a refresh of the donation settings from the server. Pass `true` to bypass the cache. |
+| `updateSettings` | `(newSettings: DonateConfigSettings) => Promise<void>` | An async function to update and persist new settings for the donation instance. |
+| `api` | `Axios` | An Axios instance configured for making requests to the payment API. |
+
+### Example
+
+```tsx
+import { useDonateContext } from '@blocklet/payment-react';
+import { Button, Typography } from '@mui/material';
+
+function CustomDonateUI() {
+  const { settings, refresh, updateSettings } = useDonateContext();
+
+  const handleUpdateBtnText = async () => {
+    try {
+      await updateSettings({ btnText: 'New Button Text!' });
+      // The settings will be automatically refreshed after update.
+    } catch (error) {
+      console.error('Failed to update settings:', error);
+    }
+  };
+
+  return (
+    <div>
+      <Typography>Current Button Text: {settings.settings?.btnText}</Typography>
+      <Button onClick={handleUpdateBtnText}>Change Text</Button>
+      <Button onClick={() => refresh(true)}>Force Refresh</Button>
+    </div>
+  );
+}
+```
+
+## Utility Functions
+
+The library also exports utility functions to manage the donation settings cache outside of the React component lifecycle.
+
+### clearDonateCache
+
+Removes the cached settings for a specific `mountLocation` from `localStorage`.
+
+```tsx
+import { clearDonateCache } from '@blocklet/payment-react';
+
+// Call this when you know the settings are stale, for example after a user logs out.
+clearDonateCache('unique-blog-post-123');
+```
+
+### clearDonateSettings
+
+Sends a `DELETE` request to the server to completely remove the settings for a `mountLocation` and also clears the local cache.
+
+```tsx
+import { clearDonateSettings } from '@blocklet/payment-react';
+
+// Use this to reset a donation instance to its default state.
+async function resetDonationSettings() {
+  await clearDonateSettings('unique-blog-post-123');
+}
+```
+
+After setting up the provider, the next step is to implement the donation UI using the [`CheckoutDonate`](./components-checkout-checkout-donate.md) component to render the donation widget and display donation history.

package/docs/providers-payment-provider.md

@@ -0,0 +1,245 @@
+# PaymentProvider
+
+The `PaymentProvider` is the cornerstone of the `@blocklet/payment-react` library. It's a context provider that must wrap your application or the specific sections that utilize payment components. It initializes the payment context, fetches necessary settings from the Payment Kit, and makes payment functions and data available to all its child components.
+
+Any component from this library, such as `CheckoutForm` or `CustomerInvoiceList`, must be nested within a `PaymentProvider` to function correctly.
+
+```d2
+direction: down
+
+"Your React App": {
+  "PaymentProvider": {
+    shape: package
+
+    "Payment Components": {
+      grid-columns: 3
+
+      "CheckoutForm": {shape: document}
+      "CustomerInvoiceList": {shape: document}
+      "Custom Component (usePaymentContext)": {shape: document}
+    }
+
+  }
+}
+
+"PaymentProvider" -> "Payment Components": "Provides context"
+
+```
+
+## Prerequisite: Setting Up the Session Context
+
+The `PaymentProvider` requires `session` and `connect` props, which are typically managed by `@arcblock/did-connect-react`. To streamline their use across your application, it's best practice to create a dedicated session context.
+
+Create a file, for example, at `src/contexts/session.tsx`, with the following content. This will create a `SessionProvider` to wrap your app and a `useSessionContext` hook to access session data easily.
+
+```tsx
+// src/contexts/session.tsx
+import { createAuthServiceSessionContext } from '@arcblock/did-connect-react/lib/Session';
+import { useContext } from 'react';
+
+const { SessionProvider, SessionContext, SessionConsumer, withSession } = createAuthServiceSessionContext();
+
+function useSessionContext() {
+  const info = useContext(SessionContext);
+  return info;
+}
+
+export { SessionProvider, SessionContext, SessionConsumer, useSessionContext, withSession };
+```
+
+Then, wrap your application's root component with the `SessionProvider` you just created:
+
+```tsx
+// src/App.tsx
+import { SessionProvider } from './contexts/session';
+
+function App() {
+  return (
+    <SessionProvider>
+      {/* Your application components */}
+    </SessionProvider>
+  );
+}
+```
+
+## Props
+
+The `PaymentProvider` accepts the following props to configure the payment environment.
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `session` | `SessionContext['session']` | Yes | The user session object obtained from `useSessionContext()`. It contains essential user data like their DID. |
+| `connect` | `SessionContext['connectApi']` | Yes | The connect API instance from `useSessionContext()`, used for handling DID Connect interactions. |
+| `children`| `React.ReactNode` | Yes | The React components or part of your application tree that needs access to the payment context. |
+| `baseUrl` | `string` | No | The base URL of the Payment Kit blocklet. This is only necessary if your application and the Payment Kit are running on different origins. The provider uses this URL to fetch configuration for cross-origin API requests. |
+| `authToken` | `string` | No | An optional authentication token. If provided, it will be used for API requests, overriding the default token from the session. |
+
+## Basic Integration
+
+To get started, wrap your main application component or the relevant layout with `PaymentProvider`. The required `session` and `connectApi` props are obtained from the `useSessionContext` hook you created earlier.
+
+```tsx
+import { PaymentProvider, CheckoutForm } from '@blocklet/payment-react';
+import { useSessionContext } from './contexts/session'; // Adjust path as needed
+
+function App() {
+  const { session, connectApi } = useSessionContext();
+
+  if (!session.user) {
+    // Render a login button or a loading state
+    return <button onClick={() => connectApi.open()}>Login</button>;
+  }
+
+  return (
+    <PaymentProvider session={session} connect={connectApi}>
+      {/* All child components now have access to the payment context */}
+      <h1>My Store</h1>
+      <CheckoutForm 
+        id="plink_xxx" // A valid Payment Link ID
+        mode="inline"
+      />
+    </PaymentProvider>
+  );
+}
+```
+
+## Advanced Usage
+
+### Cross-Origin Communication with `baseUrl`
+
+If your payment blocklet is hosted on a different domain than your main application (e.g., `payments.example.com` vs `app.example.com`), you must provide the `baseUrl` prop. The `PaymentProvider` will use this URL to correctly resolve API endpoints and fetch necessary blocklet information for seamless cross-origin communication.
+
+```tsx
+import { PaymentProvider, CustomerInvoiceList } from '@blocklet/payment-react';
+import { useSessionContext } from './contexts/session';
+
+function MyAccountPage() {
+  const { session, connectApi } = useSessionContext();
+  const paymentKitBaseUrl = 'https://your-payment-blocklet-domain.com';
+
+  if (!session.user) {
+    return <button onClick={() => connectApi.open()}>Login</button>;
+  }
+
+  return (
+    <PaymentProvider 
+      session={session} 
+      connect={connectApi} 
+      baseUrl={paymentKitBaseUrl}
+    >
+      <h2>My Invoice History</h2>
+      <CustomerInvoiceList />
+    </PaymentProvider>
+  );
+}
+```
+
+### Using a Custom `authToken`
+
+In scenarios where you need to use a specific API token instead of relying on the user's session—for example, in a backend-for-frontend pattern or when using a service account token—you can pass the `authToken` prop. This token will be used for all subsequent API requests made by the components within the provider.
+
+```tsx
+import { PaymentProvider, ResumeSubscription } from '@blocklet/payment-react';
+import { useSessionContext } from './contexts/session';
+
+function SubscriptionManager({ temporaryAuthToken }) {
+  const { session, connectApi } = useSessionContext();
+
+  if (!session.user) {
+    return <button onClick={() => connectApi.open()}>Login</button>;
+  }
+
+  return (
+    <PaymentProvider 
+      session={session} 
+      connect={connectApi} 
+      authToken={temporaryAuthToken}
+    >
+      <ResumeSubscription subscriptionId="sub_xxx" />
+    </PaymentProvider>
+  );
+}
+```
+
+## Accessing Context Data with `usePaymentContext`
+
+Child components can access the data and functions provided by `PaymentProvider` using the `usePaymentContext` hook. This hook provides access to settings, the current operational mode, a pre-configured API client, and more.
+
+### Context Values
+
+Here are the key values returned by the `usePaymentContext` hook:
+
+| Key | Type | Description |
+|---|---|---|
+| `settings` | `object` | An object containing available `paymentMethods` and the `baseCurrency`. |
+| `livemode` | `boolean` | Returns `true` for live mode and `false` for test mode. This state is persisted in local storage. |
+| `setLivemode` | `(livemode: boolean) => void` | A function to toggle between live and test mode. |
+| `api` | `AxiosInstance` | A pre-configured Axios instance for making authenticated requests to the Payment Kit API. |
+| `refresh` | `(forceRefresh?: boolean) => void` | A function to manually trigger a refresh of the settings data. |
+| `getCurrency` | `(id: string) => TPaymentCurrency` | A helper function to find a currency object by its ID from the settings. |
+| `getMethod` | `(id: string) => TPaymentMethodExpanded` | A helper function to find a payment method object by its ID from the settings. |
+| `session` | `object` | The currently active user session object that was passed to the provider. |
+
+### Example: Custom Payment Info Component
+
+This example shows a component that uses the `usePaymentContext` hook to display the current mode and a list of available payment methods.
+
+```tsx
+import { usePaymentContext } from '@blocklet/payment-react';
+import { useSessionContext } from './contexts/session';
+import { Chip, List, ListItem, ListItemText, Typography, Button } from '@mui/material';
+
+function PaymentInfo() {
+  const { settings, livemode, refresh, setLivemode } = usePaymentContext();
+
+  return (
+    <div>
+      <Typography variant="h6" component="h2" gutterBottom>
+        Payment Status 
+        {livemode ? 
+          <Chip label="Live Mode" color="success" size="small" sx={{ ml: 1 }} /> : 
+          <Chip label="Test Mode" color="warning" size="small" sx={{ ml: 1 }} />
+        }
+      </Typography>
+      
+      <Typography>Available Payment Methods:</Typography>
+      <List dense>
+        {settings.paymentMethods.map(method => (
+          <ListItem key={method.id}>
+            <ListItemText primary={method.name} />
+          </ListItem>
+        ))}
+      </List>
+      
+      <Button variant="outlined" onClick={() => setLivemode(!livemode)} sx={{ mr: 1 }}>
+        Toggle Mode
+      </Button>
+      <Button variant="outlined" onClick={() => refresh(true)}>
+        Refresh Settings
+      </Button>
+    </div>
+  );
+}
+
+// This component must be rendered inside a <PaymentProvider>
+function AppWithPaymentInfo() {
+  const { session, connectApi } = useSessionContext();
+
+  if (!session.user) {
+    return <button onClick={() => connectApi.open()}>Login</button>;
+  }
+
+  return (
+    <PaymentProvider session={session} connect={connectApi}>
+      <PaymentInfo />
+    </PaymentProvider>
+  );
+}
+```
+
+## Next Steps
+
+With `PaymentProvider` set up, you are ready to integrate other components. A good next step is to implement a donation flow or build a checkout page.
+
+- **[DonateProvider](./providers-donate-provider.md)**: Learn how to configure the context for donation-related components.
+- **[CheckoutForm](./components-checkout-checkout-form.md)**: Dive into the primary component for handling payments and checkout sessions.

package/docs/providers.md

@@ -0,0 +1,101 @@
+# Providers
+
+Providers are the foundation of the `@blocklet/payment-react` library. They use React's Context API to manage state and share essential data—like user sessions, payment settings, and API clients—across all payment-related components. Wrapping your application in the appropriate provider is a necessary first step before using any of the library's components.
+
+This library offers two primary providers that serve distinct purposes:
+
+```d2
+direction: down
+
+"Your App" {
+  "PaymentProvider": {
+    style.fill: "#DDF0FF"
+    "CheckoutForm"
+    "CustomerInvoiceList"
+
+    "DonateProvider": {
+      style.fill: "#E3F9E5"
+      "CheckoutDonate"
+    }
+  }
+}
+
+"Your App" -> "PaymentProvider": "Wraps the application"
+"PaymentProvider" -> "CheckoutForm": "Provides context"
+"PaymentProvider" -> "CustomerInvoiceList": "Provides context"
+"PaymentProvider" -> "DonateProvider": "Can be nested inside"
+"DonateProvider" -> "CheckoutDonate": "Provides context for donations"
+```
+
+## PaymentProvider
+
+The `PaymentProvider` is the main provider that you will use in almost every integration. It is responsible for handling user authentication, fetching payment method settings, managing test/live modes, and providing a pre-configured API client to all nested components. Any component that deals with payments, subscriptions, or invoices must be a descendant of `PaymentProvider`.
+
+It centralizes access to critical data, ensuring a consistent and secure payment environment.
+
+[Learn more about PaymentProvider ›](./providers-payment-provider.md)
+
+## DonateProvider
+
+The `DonateProvider` is designed specifically for donation features. It manages the configuration and state for the `CheckoutDonate` component, such as preset amounts, button text, and donation history display.
+
+It is important to note that the `DonateProvider` must be used *within* a `PaymentProvider`, as it relies on the core payment context to process donations.
+
+[Learn more about DonateProvider ›](./providers-donate-provider.md)
+
+### Basic Setup Example
+
+Here is a typical setup showing how to nest the providers. The `useSessionContext` hook is a placeholder for your application's own session management logic, which supplies the `session` and `connectApi` props required by `PaymentProvider`.
+
+```tsx
+import {
+  PaymentProvider,
+  DonateProvider,
+  CheckoutForm,
+  CheckoutDonate,
+} from '@blocklet/payment-react';
+// This hook should be implemented in your application to provide session context.
+// See the PaymentProvider documentation for an example implementation.
+import { useSessionContext } from '../path/to/your/session-context';
+
+function App() {
+  const { session, connectApi } = useSessionContext();
+
+  // Render only when the session is available.
+  if (!session) {
+    return <div>Loading Session...</div>;
+  }
+
+  return (
+    <PaymentProvider session={session} connect={connectApi}>
+      {/* General payment components can be placed directly under PaymentProvider */}
+      <CheckoutForm id="plink_xxx" />
+
+      {/* For donation features, wrap the relevant part with DonateProvider */}
+      <DonateProvider
+        mountLocation="your-unique-instance-id"
+        description="Donations for my awesome project"
+      >
+        <CheckoutDonate 
+          settings={{
+            target: 'project-donate',
+            title: 'Support This Project',
+            description: 'Your contribution is appreciated!',
+            reference: 'https://your-site.com/project',
+            beneficiaries: [{
+              address: 'user-did-address',
+              share: '100'
+            }]
+          }}
+        />
+      </DonateProvider>
+    </PaymentProvider>
+  );
+}
+```
+
+---
+
+With an understanding of the providers, you are ready to explore their specific configurations. We recommend starting with the `PaymentProvider` as it is fundamental to the library's operation.
+
+**Next:** [PaymentProvider](./providers-payment-provider.md)

package/es/payment/form/index.js

@@ -25,6 +25,7 @@ import {
   formatError,
   formatQuantityInventory,
   getPrefix,
+  getQueryParams,
   getStatementDescriptor,
   getTokenBalanceLink,
   isCrossOrigin
@@ -138,6 +139,7 @@ export default function PaymentForm({
     creditInsufficientInfo: null
   });
   const currencies = flattenPaymentMethods(paymentMethods);
+  const searchParams = getQueryParams(window.location.href);
   const onCheckoutComplete = useMemoizedFn(async ({ response }) => {
     if (response.id === checkoutSession.id && state.paid === false) {
       await handleConnected();
@@ -595,6 +597,18 @@ export default function PaymentForm({
       confirm: t("common.confirm")
     }
   );
+  const getRedirectUrl = () => {
+    if (searchParams.redirect) {
+      return decodeURIComponent(searchParams.redirect);
+    }
+    if (checkoutSession.success_url) {
+      return checkoutSession.success_url;
+    }
+    if (paymentLink?.after_completion?.redirect?.url) {
+      return paymentLink.after_completion.redirect.url;
+    }
+    return void 0;
+  };
   if (onlyShowBtn) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Box, { className: "cko-payment-submit-btn", children: /* @__PURE__ */ jsxs(
@@ -708,7 +722,7 @@ export default function PaymentForm({
                 mode: checkoutSession.mode,
                 onConfirm: onStripeConfirm,
                 onCancel: onStripeCancel,
-                returnUrl: checkoutSession?.success_url
+                returnUrl: getRedirectUrl()
               }
             )
           ]

package/lib/payment/form/index.js

@@ -161,6 +161,7 @@ function PaymentForm({
     creditInsufficientInfo: null
   });
   const currencies = (0, _util2.flattenPaymentMethods)(paymentMethods);
+  const searchParams = (0, _util2.getQueryParams)(window.location.href);
   const onCheckoutComplete = (0, _ahooks.useMemoizedFn)(async ({
     response
   }) => {
@@ -673,6 +674,18 @@ function PaymentForm({
     }),
     confirm: t("common.confirm")
   });
+  const getRedirectUrl = () => {
+    if (searchParams.redirect) {
+      return decodeURIComponent(searchParams.redirect);
+    }
+    if (checkoutSession.success_url) {
+      return checkoutSession.success_url;
+    }
+    if (paymentLink?.after_completion?.redirect?.url) {
+      return paymentLink.after_completion.redirect.url;
+    }
+    return void 0;
+  };
   if (onlyShowBtn) {
     return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
@@ -780,7 +793,7 @@ function PaymentForm({
               mode: checkoutSession.mode,
               onConfirm: onStripeConfirm,
               onCancel: onStripeCancel,
-              returnUrl: checkoutSession?.success_url
+              returnUrl: getRedirectUrl()
             })]
           })
         }), showForm && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {