@blocklet/payment-react 1.25.10 → 1.26.1

package/lib/components/phone-field.d.ts

@@ -0,0 +1,14 @@
+export interface PhoneFieldProps {
+    value: string;
+    country: string;
+    onChange: (phone: string) => void;
+    onCountryChange: (country: string) => void;
+    label: string;
+    error?: string;
+    onBlur?: () => void;
+}
+/**
+ * Phone input with country flag + dial code selector.
+ * Standalone version of V1 PhoneInput — no react-hook-form dependency.
+ */
+export default function PhoneField({ value, country: externalCountry, onChange, onCountryChange, label, error, onBlur, }: PhoneFieldProps): import("react").JSX.Element;

package/lib/components/phone-field.js

@@ -0,0 +1,130 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = PhoneField;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _material = require("@mui/material");
+var _reactInternationalPhone = require("react-international-phone");
+var _ahooks = require("ahooks");
+var _countrySelect = _interopRequireDefault(require("./country-select"));
+var _util = require("../libs/util");
+var _phoneValidator = require("../libs/phone-validator");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function PhoneField({
+  value,
+  country: externalCountry,
+  onChange,
+  onCountryChange,
+  label,
+  error = void 0,
+  onBlur = void 0
+}) {
+  const isUpdatingRef = (0, _react.useRef)(false);
+  const safeUpdate = (0, _react.useCallback)(callback => {
+    if (isUpdatingRef.current) return;
+    try {
+      isUpdatingRef.current = true;
+      callback();
+    } finally {
+      requestAnimationFrame(() => {
+        isUpdatingRef.current = false;
+      });
+    }
+  }, []);
+  const {
+    phone,
+    handlePhoneValueChange,
+    inputRef,
+    country,
+    setCountry
+  } = (0, _reactInternationalPhone.usePhoneInput)({
+    defaultCountry: (0, _util.isValidCountry)(externalCountry) ? externalCountry : "us",
+    value: value || "",
+    countries: _reactInternationalPhone.defaultCountries,
+    onChange: data => {
+      safeUpdate(() => {
+        onChange(data.phone);
+        onCountryChange(data.country);
+      });
+    }
+  });
+  (0, _ahooks.useMount)(() => {
+    (0, _phoneValidator.getPhoneUtil)().catch(err => {
+      console.error("Failed to preload phone validator:", err);
+    });
+  });
+  (0, _react.useEffect)(() => {
+    if (!externalCountry || externalCountry === country) return;
+    safeUpdate(() => {
+      setCountry(externalCountry);
+    });
+  }, [externalCountry, country, setCountry, safeUpdate]);
+  const handleCountryChange = (0, _react.useCallback)(v => {
+    safeUpdate(() => {
+      setCountry(v);
+      onCountryChange(v);
+    });
+  }, [setCountry, safeUpdate, onCountryChange]);
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      mb: 1.5
+    },
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+      sx: {
+        fontSize: 13,
+        fontWeight: 600,
+        color: "text.primary",
+        mb: 0.5
+      },
+      children: label
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.InputBase, {
+      fullWidth: true,
+      value: phone,
+      onChange: handlePhoneValueChange,
+      onBlur,
+      type: "tel",
+      inputRef,
+      startAdornment: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.InputAdornment, {
+        position: "start",
+        sx: {
+          mr: 0.25,
+          ml: -0.5
+        },
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_countrySelect.default, {
+          value: country,
+          onChange: handleCountryChange,
+          sx: {
+            ".MuiOutlinedInput-notchedOutline": {
+              borderColor: "transparent !important"
+            },
+            "& .MuiSelect-select": {
+              py: 0,
+              pr: "20px !important"
+            }
+          },
+          showDialCode: true
+        })
+      }),
+      sx: {
+        bgcolor: theme => theme.palette.mode === "dark" ? "rgba(255,255,255,0.06)" : "grey.50",
+        borderRadius: "8px",
+        px: 1.5,
+        py: 0.75,
+        fontSize: 14,
+        "& .MuiInputBase-input": {
+          p: 0
+        }
+      }
+    }), error && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+      sx: {
+        fontSize: 12,
+        color: "error.main",
+        mt: 0.25
+      },
+      children: error
+    })]
+  });
+}

package/lib/index.d.ts

@@ -46,6 +46,7 @@ import PromotionCode from './components/promotion-code';
 import SourceDataViewer from './components/source-data-viewer';
 import SlippageConfig from './components/slippage-config';
 import DynamicPricingUnavailable from './components/dynamic-pricing-unavailable';
+import { CheckoutV2 } from './checkout-v2';
 export { PaymentThemeProvider } from './theme';
 export * from './libs/util';
 export * from './libs/connect';
@@ -60,7 +61,8 @@ export * from './hooks/scroll';
 export * from './hooks/keyboard';
 export * from './libs/validator';
 export { translations, createTranslator } from './locales';
-export { createLazyComponent, api, dayjs, FormInput, FormLabel, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, TruncatedText, Link, OverdueInvoicePayment, StripePaymentAction, PaymentBeneficiaries, LoadingButton, DonateDetails, ResumeSubscription, CreditGrantsList, CreditTransactionsList, DateRangePicker, CreditStatusChip, AutoTopupModal, AutoTopup, Collapse, PromotionCode, SourceDataViewer, SlippageConfig, DynamicPricingUnavailable, PromotionSection, TotalSection, };
+export { createLazyComponent, api, dayjs, FormInput, FormLabel, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, TruncatedText, Link, OverdueInvoicePayment, StripePaymentAction, PaymentBeneficiaries, LoadingButton, DonateDetails, ResumeSubscription, CreditGrantsList, CreditTransactionsList, DateRangePicker, CreditStatusChip, AutoTopupModal, AutoTopup, Collapse, PromotionCode, SourceDataViewer, SlippageConfig, DynamicPricingUnavailable, PromotionSection, TotalSection, CheckoutV2, };
 export type { CountrySelectProps } from './components/country-select';
 export type { StripePaymentActionProps } from './components/stripe-payment-action';
 export type { SlippageConfigValue, SlippageConfigProps } from './components/slippage-config';
+export type { CheckoutV2Props } from './checkout-v2';

package/lib/index.js

@@ -54,6 +54,7 @@ var _exportNames = {
   SourceDataViewer: true,
   SlippageConfig: true,
   DynamicPricingUnavailable: true,
+  CheckoutV2: true,
   PaymentThemeProvider: true,
   translations: true,
   createTranslator: true
@@ -100,6 +101,12 @@ Object.defineProperty(exports, "CheckoutTable", {
     return _table.default;
   }
 });
+Object.defineProperty(exports, "CheckoutV2", {
+  enumerable: true,
+  get: function () {
+    return _checkoutV.CheckoutV2;
+  }
+});
 Object.defineProperty(exports, "Collapse", {
   enumerable: true,
   get: function () {
@@ -424,6 +431,7 @@ var _promotionCode = _interopRequireDefault(require("./components/promotion-code
 var _sourceDataViewer = _interopRequireDefault(require("./components/source-data-viewer"));
 var _slippageConfig = _interopRequireDefault(require("./components/slippage-config"));
 var _dynamicPricingUnavailable = _interopRequireDefault(require("./components/dynamic-pricing-unavailable"));
+var _checkoutV = require("./checkout-v2");
 var _theme = require("./theme");
 var _util = require("./libs/util");
 Object.keys(_util).forEach(function (key) {

package/lib/locales/en.js

@@ -26,6 +26,7 @@ module.exports = (0, _flat.default)({
     setup: "Setup",
     amount: "Amount",
     total: "Total",
+    totalDue: "Total Due",
     subtotal: "Subtotal",
     status: "Status",
     livemode: "Test mode",
@@ -92,6 +93,7 @@ module.exports = (0, _flat.default)({
     viewConsumptionDetail: "Consumption Detail",
     customer: "Customer",
     currency: "Currency",
+    network: "Network",
     custom: "Custom",
     description: "Description",
     statementDescriptor: "Statement descriptor",
@@ -283,11 +285,14 @@ module.exports = (0, _flat.default)({
       free: "{count} {interval}{count > 1 ? 's' : ''} free",
       least: "continue with at least",
       completed: {
-        payment: "Thanks for your purchase",
-        subscription: "Thanks for subscribing",
-        setup: "Thanks for subscribing",
-        donate: "Thanks for your tip",
-        tip: "A payment to {payee} has been completed. You can view the details of this payment in your account."
+        payment: "Purchase successful",
+        subscription: "Subscription successful",
+        setup: "Subscription successful",
+        donate: "Donation successful",
+        tip: "A payment to {payee} has been completed. You can view the details of this payment in your account.",
+        summary: {
+          paid: "You've paid {amount}"
+        }
       },
       vendor: {
         accountRequired: "This action requires a unified account. Please switch accounts and try again.",
@@ -367,7 +372,8 @@ module.exports = (0, _flat.default)({
         schedule: {
           periodic: "Grant {amount} every {interval}.",
           withRefresh: "Grant {amount} every {interval}; unused credits expire with the next grant."
-        }
+        },
+        topupDescription: "Purchase {creditName} at {unitPrice} per credit."
       },
       expired: {
         title: "Expired Link",
@@ -381,9 +387,42 @@ module.exports = (0, _flat.default)({
         title: "Nothing to show here",
         description: "It seems this checkout session is not configured properly"
       },
+      error: {
+        title: "Something went wrong"
+      },
       orderSummary: "Order Summary",
+      orderSummarySubtitle: "Items included in this purchase",
       paymentDetails: "Payment Details",
       productListTotal: "Includes {total} items",
+      headerTitle: {
+        subscribe: "Subscribe to {name}",
+        purchase: "Purchase {name}"
+      },
+      planFeatures: "Plan Features",
+      typeBadge: {
+        subscription: "SUBSCRIPTION",
+        topup: "TOP-UP",
+        oneTime: "ONE-TIME"
+      },
+      subtitle: {
+        subscriptionInterval: "{interval} subscription",
+        creditsTopup: "Credits top-up",
+        addonFor: "Add-on for {product}",
+        oneTime: "One-time purchase"
+      },
+      creditTopup: {
+        title: "Get {name}",
+        question: "How many {symbol} do you want?",
+        credits: "Credits",
+        increment: "Increments of {step} {symbol}",
+        validFor: "Credits are valid for {duration} {unit} after purchase.",
+        willReceive: "You'll receive",
+        packInfo: "Includes {packs} credit packs ({perPack} per pack)",
+        autoMatch: "We'll automatically match the closest credit pack.",
+        autoMatchTooltip: "{symbol} are sold in packs of {step}",
+        pendingWarning: "You have a usage overage of {pendingAmount}. You need at least {minCredits} to restore access.",
+        pendingEnough: "You have a usage overage of {pendingAmount}. After covering the overage, your available balance will be {availableAmount}."
+      },
       promotion: {
         add_code: "Add promotion code",
         enter_code: "Enter promotion code",

package/lib/locales/zh.js

@@ -26,6 +26,7 @@ module.exports = (0, _flat.default)({
     accessDenied: "\u60A8\u65E0\u6743\u8BBF\u95EE\u5176\u4ED6\u5BA2\u6237\u7684\u6570\u636E",
     amount: "\u91D1\u989D",
     total: "\u603B\u8BA1",
+    totalDue: "\u5E94\u4ED8\u603B\u989D",
     subtotal: "\u5C0F\u8BA1",
     status: "\u72B6\u6001",
     livemode: "\u6D4B\u8BD5\u6A21\u5F0F",
@@ -92,6 +93,7 @@ module.exports = (0, _flat.default)({
     viewConsumptionDetail: "\u6D88\u8D39\u8BE6\u60C5",
     customer: "\u5BA2\u6237",
     currency: "\u5E01\u79CD",
+    network: "\u7F51\u7EDC",
     custom: "\u81EA\u5B9A\u4E49",
     description: "\u63CF\u8FF0",
     statementDescriptor: "\u58F0\u660E\u63CF\u8FF0",
@@ -283,11 +285,14 @@ module.exports = (0, _flat.default)({
       free: "\u514D\u8D39\u8BD5\u7528 {count} {interval}",
       least: "\u81F3\u5C11",
       completed: {
-        payment: "\u611F\u8C22\u60A8\u7684\u8D2D\u4E70",
-        subscription: "\u611F\u8C22\u60A8\u7684\u8BA2\u9605",
-        setup: "\u611F\u8C22\u60A8\u7684\u8BA2\u9605",
-        donate: "\u611F\u8C22\u60A8\u7684\u652F\u6301",
-        tip: "\u5411 {payee} \u7684\u4ED8\u6B3E\u5DF2\u5B8C\u6210\u3002\u60A8\u53EF\u4EE5\u5728\u60A8\u7684\u8D26\u6237\u4E2D\u67E5\u770B\u6B64\u4ED8\u6B3E\u7684\u8BE6\u7EC6\u4FE1\u606F\u3002"
+        payment: "\u8D2D\u4E70\u6210\u529F",
+        subscription: "\u8BA2\u9605\u6210\u529F",
+        setup: "\u8BA2\u9605\u6210\u529F",
+        donate: "\u6350\u8D60\u6210\u529F",
+        tip: "\u5411 {payee} \u7684\u4ED8\u6B3E\u5DF2\u5B8C\u6210\u3002\u60A8\u53EF\u4EE5\u5728\u60A8\u7684\u8D26\u6237\u4E2D\u67E5\u770B\u6B64\u4ED8\u6B3E\u7684\u8BE6\u7EC6\u4FE1\u606F\u3002",
+        summary: {
+          paid: "\u672C\u6B21\u652F\u4ED8 {amount}"
+        }
       },
       vendor: {
         accountRequired: "\u60A8\u5F53\u524D\u4F7F\u7528\u7684\u662F\u975E\u7EDF\u4E00\u8D26\u6237\u767B\u5F55\uFF0C\u6B64\u670D\u52A1\u9700\u8981\u60A8\u4F7F\u7528\u7EDF\u4E00\u8D26\u6237\u3002\u8BF7\u5207\u6362\u5230\u7EDF\u4E00\u8D26\u6237\u767B\u5F55\u540E\u91CD\u8BD5\u3002",
@@ -404,15 +409,49 @@ module.exports = (0, _flat.default)({
         schedule: {
           periodic: "\u6BCF{interval}\u53D1\u653E {amount}\u3002",
           withRefresh: "\u6BCF{interval}\u53D1\u653E {amount}\uFF0C\u672A\u4F7F\u7528\u989D\u5EA6\u5C06\u5728\u4E0B\u6B21\u53D1\u653E\u65F6\u8FC7\u671F\u3002"
-        }
+        },
+        topupDescription: "\u8D2D\u4E70 {creditName}\uFF0C\u5355\u4EF7 {unitPrice}/\u989D\u5EA6\u3002"
       },
       emptyItems: {
         title: "\u6CA1\u6709\u4EFB\u4F55\u8D2D\u4E70\u9879\u76EE",
         description: "\u53EF\u80FD\u8FD9\u4E2A\u4ED8\u6B3E\u94FE\u63A5\u6CA1\u6709\u6B63\u786E\u914D\u7F6E"
       },
+      error: {
+        title: "\u51FA\u4E86\u70B9\u95EE\u9898"
+      },
       orderSummary: "\u8BA2\u5355\u6982\u89C8",
+      orderSummarySubtitle: "\u672C\u6B21\u4EA4\u6613\u5305\u542B\u4EE5\u4E0B\u9879\u76EE",
       paymentDetails: "\u652F\u4ED8\u4FE1\u606F",
       productListTotal: "\u5305\u62EC {total} \u9879",
+      headerTitle: {
+        subscribe: "\u8BA2\u9605 {name}",
+        purchase: "\u8D2D\u4E70 {name}"
+      },
+      planFeatures: "\u529F\u80FD\u7279\u6027",
+      typeBadge: {
+        subscription: "\u8BA2\u9605",
+        topup: "\u5145\u503C",
+        oneTime: "\u4E00\u6B21\u6027\u8D2D\u4E70"
+      },
+      subtitle: {
+        subscriptionInterval: "{interval}\u8BA2\u9605",
+        creditsTopup: "\u4F59\u989D\u5145\u503C",
+        addonFor: "{product} \u7684\u9644\u52A0\u9879",
+        oneTime: "\u4E00\u6B21\u6027\u8D2D\u4E70"
+      },
+      creditTopup: {
+        title: "\u8D2D\u4E70 {name}",
+        question: "\u4F60\u9700\u8981\u591A\u5C11 {symbol}\uFF1F",
+        credits: "\u989D\u5EA6",
+        increment: "\u6BCF\u6B21\u589E\u51CF {step} {symbol}",
+        validFor: "\u989D\u5EA6\u5728\u8D2D\u4E70\u540E {duration} {unit}\u5185\u6709\u6548\u3002",
+        willReceive: "\u4F60\u5C06\u83B7\u5F97",
+        packInfo: "\u5305\u542B {packs} \u4E2A\u989D\u5EA6\u5305\uFF08\u6BCF\u5305 {perPack}\uFF09",
+        autoMatch: "\u6211\u4EEC\u5C06\u81EA\u52A8\u5339\u914D\u6700\u63A5\u8FD1\u7684\u989D\u5EA6\u5305\u3002",
+        autoMatchTooltip: "{symbol} \u6309\u6BCF\u5305 {step} \u4E2A\u51FA\u552E",
+        pendingWarning: "\u60A8\u6709 {pendingAmount} \u7684\u4F7F\u7528\u8D85\u989D\uFF0C\u81F3\u5C11\u9700\u8981\u8D2D\u4E70 {minCredits} \u624D\u80FD\u6062\u590D\u8BBF\u95EE\u3002",
+        pendingEnough: "\u60A8\u6709 {pendingAmount} \u7684\u4F7F\u7528\u8D85\u989D\uFF0C\u6263\u9664\u540E\u60A8\u7684\u53EF\u7528\u4F59\u989D\u5C06\u4E3A {availableAmount}\u3002"
+      },
       connectModal: {
         title: "{action}",
         scan: "\u4F7F\u7528\u4EE5\u4E0B\u65B9\u5F0F\u5B8C\u6210\u672C\u6B21\u652F\u4ED8",

package/lib/payment/form/index.js

@@ -161,6 +161,8 @@ function PaymentForm({
   } = (0, _reactHookForm.useFormContext)();
   const errorRef = (0, _react.useRef)(null);
   const processingRef = (0, _react.useRef)(false);
+  const idempotencyKeyRef = (0, _react.useRef)("");
+  const sessionFingerprintRef = (0, _react.useRef)("");
   const quantityInventoryStatus = (0, _react.useMemo)(() => {
     let status = true;
     for (const item of checkoutSession.line_items) {
@@ -858,10 +860,17 @@ function PaymentForm({
     try {
       let result;
       const previewRate = checkoutSession.line_items?.find(item => item?.exchange_rate)?.exchange_rate || void 0;
+      const items = checkoutSession.line_items || [];
+      const itemsSig = items.map(i => `${i.upsell_price_id || i.price_id}:${i.quantity}`).join("|");
+      const fingerprint = `${checkoutSession.id}-${paymentCurrency?.id}-${itemsSig}`;
+      if (fingerprint !== sessionFingerprintRef.current || !idempotencyKeyRef.current) {
+        sessionFingerprintRef.current = fingerprint;
+        idempotencyKeyRef.current = generateIdempotencyKey(checkoutSession.id, paymentCurrency?.id || "");
+      }
       const payload = {
         ...data,
         // Final Freeze: Include these for new quote creation at submit
-        idempotency_key: generateIdempotencyKey(checkoutSession.id, paymentCurrency?.id || ""),
+        idempotency_key: idempotencyKeyRef.current,
         preview_rate: previewRate || void 0,
         price_confirmed: state.priceChangeConfirm?.formData ? true : void 0
       };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.25.10",
+  "version": "1.26.1",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -59,6 +59,7 @@
     "@arcblock/react-hooks": "^3.5.1",
     "@arcblock/ux": "^3.5.1",
     "@arcblock/ws": "^1.28.5",
+    "@blocklet/payment-react-headless": "1.26.1",
     "@blocklet/theme": "^3.5.1",
     "@blocklet/ui-react": "^3.5.1",
     "@mui/icons-material": "^7.1.2",
@@ -96,7 +97,7 @@
     "@babel/core": "^7.27.4",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
-    "@blocklet/payment-types": "1.25.10",
+    "@blocklet/payment-types": "1.26.1",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -127,5 +128,5 @@
     "vite-plugin-babel": "^1.3.1",
     "vite-plugin-node-polyfills": "^0.23.0"
   },
-  "gitHead": "36417122ec9a0cfd1e289b4ca21d33f1b5d87a9a"
+  "gitHead": "1ba42f376f040b1214d992420cda37053fc14288"
 }

package/src/checkout-v2/checkout-v2.tsx

@@ -0,0 +1,155 @@
+import { useEffect, useState } from 'react';
+import { useRequest } from 'ahooks';
+import { joinURL } from 'ufo';
+import { Box } from '@mui/material';
+import { CheckoutProvider, useSessionContext, useSubmitFeature } from '@blocklet/payment-react-headless';
+
+import api from '../libs/api';
+import { getPrefix, mergeExtraParams } from '../libs/util';
+import { PaymentThemeProvider } from '../theme';
+import { useMobile } from '../hooks/mobile';
+import type { CheckoutV2Props } from './types';
+import CheckoutLayout from './layouts/checkout-layout';
+import ScenarioRouter from './panels/left/scenario-router';
+import PaymentPanel from './panels/right/payment-panel';
+import CheckoutDialogs from './components/dialogs/checkout-dialogs';
+import LoadingView from './views/loading-view';
+import ErrorView from './views/error-view';
+import SuccessView from './views/success-view';
+
+// Deduplicated plink_ → cs_ resolution
+const plinkPromises: Record<string, Promise<{ checkoutSession: { id: string } }>> = {};
+function startFromPaymentLink(
+  id: string,
+  params?: Record<string, string>
+): Promise<{ checkoutSession: { id: string } }> {
+  if (!plinkPromises[id]) {
+    plinkPromises[id] = api
+      .post(`/api/checkout-sessions/start/${id}?${mergeExtraParams(params)}`)
+      .then((res: any) => res?.data)
+      .finally(() => {
+        setTimeout(() => {
+          delete plinkPromises[id];
+        }, 3000);
+      });
+  }
+  return plinkPromises[id];
+}
+
+// Inner router: must be rendered inside CheckoutProvider
+function CheckoutRouter({
+  onPaid = undefined,
+  onError = undefined,
+  mode = 'inline',
+}: {
+  onPaid?: (result: any) => void;
+  onError?: (err: Error) => void;
+  mode?: string;
+}) {
+  const { isLoading, error, errorCode, session } = useSessionContext();
+  const submit = useSubmitFeature();
+  const { isMobile } = useMobile();
+
+  useEffect(() => {
+    if (error && onError) {
+      onError(new Error(error));
+    }
+  }, [error, onError]);
+
+  useEffect(() => {
+    if (submit.status === 'completed' && submit.result && onPaid) {
+      onPaid(submit.result);
+    }
+  }, [submit.status, submit.result, onPaid]);
+
+  if (isLoading) {
+    return <LoadingView mode={mode} />;
+  }
+
+  if (error) {
+    return <ErrorView error={error} errorCode={errorCode} mode={mode} />;
+  }
+
+  const isCompleted = submit.status === 'completed';
+  const mobileCompleted = isCompleted && isMobile;
+
+  return (
+    <>
+      <CheckoutLayout
+        left={
+          mobileCompleted ? null : (
+            <Box
+              sx={{
+                flex: 1,
+                display: 'flex',
+                flexDirection: 'column',
+                ...(isCompleted
+                  ? { opacity: 0.45, pointerEvents: 'none', filter: 'grayscale(0.3)', transition: 'all 0.5s ease' }
+                  : {}),
+              }}>
+              <ScenarioRouter />
+            </Box>
+          )
+        }
+        right={isCompleted ? <SuccessView submit={submit} session={session} /> : <PaymentPanel />}
+        mode={mode}
+      />
+      {!isCompleted && <CheckoutDialogs />}
+    </>
+  );
+}
+
+export default function CheckoutV2({
+  id,
+  onPaid,
+  onError,
+  theme = 'default',
+  mode = 'inline',
+  extraParams = {},
+}: CheckoutV2Props) {
+  if (!id.startsWith('plink_') && !id.startsWith('cs_')) {
+    throw new Error('Either a checkoutSession or a paymentLink id is required.');
+  }
+
+  const isPaymentLink = id.startsWith('plink_');
+  const [resolvedSessionId, setResolvedSessionId] = useState<string | null>(isPaymentLink ? null : id);
+
+  // Resolve plink_ to cs_
+  useRequest(
+    async () => {
+      if (!isPaymentLink) return null;
+      const data = await startFromPaymentLink(id, extraParams);
+      const csId = data?.checkoutSession?.id;
+      if (csId) {
+        setResolvedSessionId(csId);
+        if (mode === 'standalone') {
+          window.history.replaceState(
+            null,
+            '',
+            joinURL(getPrefix(), `/checkout/pay/${csId}?${mergeExtraParams(extraParams)}`)
+          );
+        }
+      }
+      return data;
+    },
+    { ready: isPaymentLink }
+  );
+
+  if (!resolvedSessionId) {
+    return <LoadingView mode={mode} />;
+  }
+
+  const content = (
+    <CheckoutProvider sessionId={resolvedSessionId}>
+      <CheckoutRouter onPaid={onPaid} onError={onError} mode={mode} />
+    </CheckoutProvider>
+  );
+
+  if (theme === 'inherit') {
+    return content;
+  }
+  if (theme && typeof theme === 'object') {
+    return <PaymentThemeProvider theme={theme}>{content}</PaymentThemeProvider>;
+  }
+  return <PaymentThemeProvider>{content}</PaymentThemeProvider>;
+}