@blocklet/payment-react 1.13.160 → 1.13.162

package/es/payment/summary.js

@@ -38,18 +38,32 @@ async function fetchCrossSell(id) {
     return null;
   }
 }
+PaymentSummary.defaultProps = {
+  onUpsell: noop,
+  onDownsell: noop,
+  onApplyCrossSell: noop,
+  onCancelCrossSell: noop,
+  checkoutSessionId: "",
+  crossSellBehavior: ""
+};
 export default function PaymentSummary({
-  checkoutSession,
+  items,
   currency,
+  trialInDays,
   onUpsell,
   onDownsell,
   onApplyCrossSell,
-  onCancelCrossSell
+  onCancelCrossSell,
+  checkoutSessionId,
+  crossSellBehavior,
+  ...rest
 }) {
   const { t, locale } = useLocaleContext();
   const [state, setState] = useSetState({ loading: false, shake: false });
-  const { data, runAsync } = useRequest(() => fetchCrossSell(checkoutSession.id));
-  const headlines = formatCheckoutHeadlines(checkoutSession, currency, locale);
+  const { data, runAsync } = useRequest(
+    () => checkoutSessionId ? fetchCrossSell(checkoutSessionId) : Promise.resolve(null)
+  );
+  const headlines = formatCheckoutHeadlines(items, currency, trialInDays, locale);
   useBus(
     "error.REQUIRE_CROSS_SELL",
     () => {
@@ -90,17 +104,18 @@ export default function PaymentSummary({
       setState({ loading: false });
     }
   };
-  return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-product", direction: "column", children: [
+  return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-product", direction: "column", ...rest, children: [
     /* @__PURE__ */ jsxs(Stack, { className: "cko-product-summary", direction: "column", alignItems: "flex-start", sx: { mb: 4 }, children: [
       /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 500, fontSize: "1.15rem", color: "text.secondary" }, children: headlines.action }),
       /* @__PURE__ */ jsx(PaymentAmount, { amount: headlines.amount }),
       headlines.then && /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.9rem", color: "text.secondary" }, children: headlines.then })
     ] }),
-    /* @__PURE__ */ jsx(Stack, { spacing: 2, children: checkoutSession.line_items.map((x) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Stack, { spacing: 2, children: items.map((x) => /* @__PURE__ */ jsx(
       ProductItem,
       {
         item: x,
-        session: checkoutSession,
+        items,
+        trialInDays,
         currency,
         onUpsell: handleUpsell,
         onDownsell: handleDownsell,
@@ -119,7 +134,7 @@ export default function PaymentSummary({
       },
       x.price_id
     )) }),
-    data && checkoutSession.line_items.some((x) => x.price_id === data.id) === false && /* @__PURE__ */ jsx(Grow, { in: true, children: /* @__PURE__ */ jsxs(
+    data && items.some((x) => x.price_id === data.id) === false && /* @__PURE__ */ jsx(Grow, { in: true, children: /* @__PURE__ */ jsxs(
       Stack,
       {
         direction: "column",
@@ -140,21 +155,22 @@ export default function PaymentSummary({
             ProductItem,
             {
               item: { quantity: 1, price: data, price_id: data.id, cross_sell: true },
-              session: checkoutSession,
+              items,
+              trialInDays,
               currency,
               onUpsell: noop,
               onDownsell: noop
             }
           ),
           /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { width: 1 }, children: [
-            /* @__PURE__ */ jsx(Typography, { children: checkoutSession.cross_sell_behavior === "required" && /* @__PURE__ */ jsx(Status, { label: t("payment.checkout.required"), color: "info", variant: "outlined", sx: { mr: 1 } }) }),
+            /* @__PURE__ */ jsx(Typography, { children: crossSellBehavior === "required" && /* @__PURE__ */ jsx(Status, { label: t("payment.checkout.required"), color: "info", variant: "outlined", sx: { mr: 1 } }) }),
             /* @__PURE__ */ jsx(
               LoadingButton,
               {
                 size: "small",
                 loadingPosition: "end",
-                color: checkoutSession.cross_sell_behavior === "required" ? "info" : "info",
-                variant: checkoutSession.cross_sell_behavior === "required" ? "text" : "text",
+                color: crossSellBehavior === "required" ? "info" : "info",
+                variant: crossSellBehavior === "required" ? "text" : "text",
                 loading: state.loading,
                 onClick: handleApplyCrossSell,
                 children: t("payment.checkout.cross_sell.add")

package/es/util.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { PriceCurrency, PriceRecurring, TCheckoutSessionExpanded, TLineItemExpanded, TPaymentCurrency, TPaymentMethodExpanded, TPrice, TSubscriptionExpanded, TSubscriptionItemExpanded } from '@blocklet/payment-types';
+import type { PriceCurrency, PriceRecurring, TLineItemExpanded, TPaymentCurrency, TPaymentMethodExpanded, TPrice, TSubscriptionExpanded, TSubscriptionItemExpanded } from '@blocklet/payment-types';
 export declare const PAYMENT_KIT_DID = "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk";
 export declare const getPrefix: () => any;
 export declare function formatToDate(date: Date | string | number, locale?: string): any;
@@ -34,8 +34,8 @@ export declare function getCheckoutAmount(items: TLineItemExpanded[], currency:
     tax: string;
 };
 export declare function getRecurringPeriod(recurring: PriceRecurring): number;
-export declare function formatUpsellSaving(session: TCheckoutSessionExpanded, currency: TPaymentCurrency): string;
-export declare function formatCheckoutHeadlines(session: TCheckoutSessionExpanded, currency: TPaymentCurrency, locale?: string): {
+export declare function formatUpsellSaving(items: TLineItemExpanded[], currency: TPaymentCurrency): string;
+export declare function formatCheckoutHeadlines(items: TLineItemExpanded[], currency: TPaymentCurrency, trialInDays: number, locale?: string): {
     action: string;
     amount: string;
     then?: string;
@@ -57,3 +57,6 @@ export declare const getSubscriptionAction: (subscription: TSubscriptionExpanded
     canRenew: boolean;
 } | null;
 export declare const mergeExtraParams: (extra?: Record<string, any>) => string;
+export declare const flattenPaymentMethods: (methods?: TPaymentMethodExpanded[]) => import("sequelize").InferAttributes<import("@blocklet/payment-types").PaymentCurrency, {
+    omit: never;
+}>[];

package/es/util.js

@@ -275,8 +275,7 @@ export function getRecurringPeriod(recurring) {
       throw new Error(`Unsupported recurring interval: ${interval}`);
   }
 }
-export function formatUpsellSaving(session, currency) {
-  const items = session.line_items;
+export function formatUpsellSaving(items, currency) {
   if (items[0]?.upsell_price_id) {
     return "0";
   }
@@ -304,9 +303,8 @@ export function formatUpsellSaving(session, currency) {
   const after = new BN(to.total);
   return Number(before.sub(after).mul(new BN(100)).div(before).toString()).toFixed(0);
 }
-export function formatCheckoutHeadlines(session, currency, locale = "en") {
-  const items = session.line_items;
-  const trial = session.subscription_data?.trial_period_days || 0;
+export function formatCheckoutHeadlines(items, currency, trialInDays, locale = "en") {
+  const trial = trialInDays || 0;
   const brand = getStatementDescriptor(items);
   const { total } = getCheckoutAmount(items, currency, !!trial);
   const amount = `${fromUnitToToken(total, currency.decimal)} ${currency.symbol}`;
@@ -440,15 +438,15 @@ export const getSubscriptionTimeSummary = (subscription) => {
 };
 export const getSubscriptionAction = (subscription) => {
   if (subscription.status === "active" || subscription.status === "trialing") {
-    if (subscription.cancel_at) {
-      return null;
-    }
     if (subscription.cancel_at_period_end) {
       if (subscription.cancelation_details?.reason === "payment_failed") {
         return null;
       }
       return { action: "recover", variant: "contained", color: "primary", canRenew: false };
     }
+    if (subscription.cancel_at && subscription.cancel_at !== subscription.current_period_end) {
+      return null;
+    }
     return { action: "cancel", variant: "outlined", color: "inherit", canRenew: false };
   }
   if (subscription.status === "past_due") {
@@ -467,3 +465,16 @@ export const mergeExtraParams = (extra = {}) => {
   });
   return params.toString();
 };
+export const flattenPaymentMethods = (methods = []) => {
+  const out = [];
+  methods.forEach((method) => {
+    const currencies = method.paymentCurrencies || method.payment_currencies || [];
+    currencies.forEach((currency) => {
+      out.push({
+        ...currency,
+        method
+      });
+    });
+  });
+  return out;
+};

package/lib/components/input.d.ts

@@ -7,17 +7,19 @@ type InputProps = TextFieldProps & {
     placeholder?: string;
     errorPosition?: 'right' | 'bottom';
     rules?: RegisterOptions;
+    wrapperStyle?: React.CSSProperties;
 };
 export declare function FormInputError({ error }: {
     error: string;
 }): import("react").JSX.Element;
-declare function FormInput({ name, label, placeholder, rules, errorPosition, ...rest }: InputProps): import("react").JSX.Element;
+declare function FormInput({ name, label, placeholder, rules, errorPosition, wrapperStyle, ...rest }: InputProps): import("react").JSX.Element;
 declare namespace FormInput {
     var defaultProps: {
         label: string;
         placeholder: string;
         errorPosition: string;
         rules: {};
+        wrapperStyle: {};
     };
 }
 export default FormInput;

package/lib/components/input.js

@@ -14,7 +14,8 @@ FormInput.defaultProps = {
   label: "",
   placeholder: "",
   errorPosition: "bottom",
-  rules: {}
+  rules: {},
+  wrapperStyle: {}
 };
 function FormInputError({
   error
@@ -34,6 +35,7 @@ function FormInput({
   placeholder,
   rules,
   errorPosition,
+  wrapperStyle,
   ...rest
 }) {
   const {
@@ -50,7 +52,7 @@ function FormInput({
     }) => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
       sx: {
         width: "100%",
-        height: "40px"
+        ...wrapperStyle
       },
       children: [!!label && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
         children: label

package/lib/history/invoice/list.js

@@ -162,5 +162,5 @@ CustomerInvoiceList.defaultProps = {
   subscription_id: "",
   status: "open,paid,uncollectible",
   pageSize: 10,
-  target: "self"
+  target: "_self"
 };

package/lib/history/payment/list.js

@@ -103,7 +103,7 @@ function CustomerPaymentList({
           flex: 2,
           children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
             textAlign: "right",
-            children: [(0, _util.fromUnitToToken)(item.amount, item.paymentCurrency.decimal), "\xA0", item.paymentCurrency.symbol]
+            children: [(0, _util.fromUnitToToken)(item.amount_received, item.paymentCurrency.decimal), "\xA0", item.paymentCurrency.symbol]
           })
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
           flex: 3,

package/lib/index.d.ts

@@ -13,10 +13,14 @@ import CustomerInvoiceList from './history/invoice/list';
 import MiniInvoiceList from './history/mini-invoice/list';
 import CustomerPaymentList from './history/payment/list';
 import Amount from './payment/amount';
+import AddressForm from './payment/form/address';
+import CurrencySelector from './payment/form/currency';
 import PhoneInput from './payment/form/phone';
+import StripeForm from './payment/form/stripe';
 import Payment from './payment/index';
 import ProductSkeleton from './payment/product-skeleton';
+import PaymentSummary from './payment/summary';
 export * from './util';
 export * from './contexts/payment';
 export { translations, createTranslator } from './locales';
-export { api, dayjs, FormInput, PhoneInput, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, Payment, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, MiniInvoiceList, TxLink, };
+export { api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, MiniInvoiceList, TxLink, };

package/lib/index.js

@@ -19,12 +19,22 @@ var _exportNames = {
   MiniInvoiceList: true,
   CustomerPaymentList: true,
   Amount: true,
+  AddressForm: true,
+  CurrencySelector: true,
   PhoneInput: true,
+  StripeForm: true,
   Payment: true,
   ProductSkeleton: true,
+  PaymentSummary: true,
   translations: true,
   createTranslator: true
 };
+Object.defineProperty(exports, "AddressForm", {
+  enumerable: true,
+  get: function () {
+    return _address.default;
+  }
+});
 Object.defineProperty(exports, "Amount", {
   enumerable: true,
   get: function () {
@@ -49,6 +59,12 @@ Object.defineProperty(exports, "ConfirmDialog", {
     return _confirm.default;
   }
 });
+Object.defineProperty(exports, "CurrencySelector", {
+  enumerable: true,
+  get: function () {
+    return _currency.default;
+  }
+});
 Object.defineProperty(exports, "CustomerInvoiceList", {
   enumerable: true,
   get: function () {
@@ -85,6 +101,12 @@ Object.defineProperty(exports, "Payment", {
     return _index.default;
   }
 });
+Object.defineProperty(exports, "PaymentSummary", {
+  enumerable: true,
+  get: function () {
+    return _summary.default;
+  }
+});
 Object.defineProperty(exports, "PhoneInput", {
   enumerable: true,
   get: function () {
@@ -109,6 +131,12 @@ Object.defineProperty(exports, "Status", {
     return _status.default;
   }
 });
+Object.defineProperty(exports, "StripeForm", {
+  enumerable: true,
+  get: function () {
+    return _stripe.default;
+  }
+});
 Object.defineProperty(exports, "Switch", {
   enumerable: true,
   get: function () {
@@ -160,9 +188,13 @@ var _list = _interopRequireDefault(require("./history/invoice/list"));
 var _list2 = _interopRequireDefault(require("./history/mini-invoice/list"));
 var _list3 = _interopRequireDefault(require("./history/payment/list"));
 var _amount = _interopRequireDefault(require("./payment/amount"));
+var _address = _interopRequireDefault(require("./payment/form/address"));
+var _currency = _interopRequireDefault(require("./payment/form/currency"));
 var _phone = _interopRequireDefault(require("./payment/form/phone"));
+var _stripe = _interopRequireDefault(require("./payment/form/stripe"));
 var _index = _interopRequireDefault(require("./payment/index"));
 var _productSkeleton = _interopRequireDefault(require("./payment/product-skeleton"));
+var _summary = _interopRequireDefault(require("./payment/summary"));
 var _util = require("./util");
 Object.keys(_util).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/locales/en.js

@@ -47,6 +47,7 @@ module.exports = (0, _flat.default)({
     did: "DID",
     txHash: "Transaction",
     customer: "Customer",
+    currency: "Currency",
     custom: "Custom",
     description: "Description",
     statementDescriptor: "Statement descriptor",
@@ -190,7 +191,7 @@ module.exports = (0, _flat.default)({
         title: "Renew your subscription",
         description: "Your subscription will no longer be canceled, it will renew on {date}"
       },
-      upgrade: {
+      changePlan: {
         button: "Update",
         current: "Current",
         pay: "Payment Required",
@@ -203,7 +204,16 @@ module.exports = (0, _flat.default)({
         total: "Total (metered items excluded)",
         appliedCredit: "Credit applied",
         newCredit: "Credit issued",
-        remaining: "Amount due today"
+        remaining: "Amount due today",
+        tableNotFound: "Plan updates are not available"
+      },
+      changePayment: {
+        limit: "Your changes to payment method will not affect existing open or past-due invoices, all future payments will use the new payment method unless you change it again.",
+        review: "Review subscription items",
+        select: "Select payment method",
+        submit: "Confirm change",
+        confirm: "By confirming this change, you allow {payee} to charge {symbol} from your account for future payments in accordance with their terms. You can always change your payment method.",
+        completed: "Your payment method has been successfully updated, all future payments will use the new payment method unless you change it again."
       },
       invoice: {
         summary: "Summary",
@@ -233,7 +243,8 @@ module.exports = (0, _flat.default)({
         nextInvoice: "Next Invoice",
         title: "Manage subscriptions",
         current: "Current subscription",
-        empty: "There are no subscriptions here"
+        empty: "There are no subscriptions here",
+        changePayment: "Change payment method"
       }
     }
   }

package/lib/locales/zh.js

@@ -47,6 +47,7 @@ module.exports = (0, _flat.default)({
     did: "DID",
     txHash: "\u4EA4\u6613\u54C8\u5E0C",
     customer: "\u5BA2\u6237",
+    currency: "\u5E01\u79CD",
     custom: "\u81EA\u5B9A\u4E49",
     description: "\u63CF\u8FF0",
     statementDescriptor: "\u58F0\u660E\u63CF\u8FF0",
@@ -190,7 +191,7 @@ module.exports = (0, _flat.default)({
         title: "\u7EED\u8BA2\u60A8\u7684\u8BA2\u9605",
         description: "\u60A8\u7684\u8BA2\u9605\u5C06\u4E0D\u518D\u88AB\u53D6\u6D88\uFF0C\u5C06\u5728{date}\u7EED\u8BA2"
       },
-      upgrade: {
+      changePlan: {
         button: "\u66F4\u65B0",
         current: "\u5F53\u524D\u8BA2\u9605",
         pay: "\u9700\u8981\u652F\u4ED8",
@@ -203,7 +204,16 @@ module.exports = (0, _flat.default)({
         total: "\u5957\u9910\u5B9A\u4EF7\uFF08\u4E0D\u542B\u6309\u91CF\u90E8\u5206\uFF09",
         appliedCredit: "\u4FE1\u7528\u6263\u9664",
         newCredit: "\u4FE1\u7528\u589E\u52A0",
-        remaining: "\u8FD8\u9700\u652F\u4ED8"
+        remaining: "\u8FD8\u9700\u652F\u4ED8",
+        tableNotFound: "\u5957\u9910\u53D8\u66F4\u4E0D\u53EF\u7528"
+      },
+      changePayment: {
+        limit: "\u4F60\u5BF9\u652F\u4ED8\u65B9\u5F0F\u7684\u53D8\u66F4\u4E0D\u4F1A\u5F71\u54CD\u5DF2\u7ECF\u751F\u6210\u6216\u8005\u6B20\u8D39\u7684\u8D26\u5355\uFF0C\u53EA\u4F1A\u5F71\u54CD\u672A\u6765\u7684\u8D26\u5355\u3002\u4F60\u53EF\u4EE5\u5728\u4E0B\u4E00\u5F20\u8D26\u5355\u751F\u6210\u4E4B\u524D\u53D8\u66F4\u652F\u4ED8\u65B9\u5F0F\u3002",
+        review: "\u67E5\u770B\u8BA2\u9605\u8BE6\u60C5",
+        select: "\u9009\u62E9\u652F\u4ED8\u65B9\u5F0F",
+        submit: "\u786E\u8BA4\u53D8\u66F4",
+        confirm: "\u786E\u8BA4\u53D8\u66F4\u65B9\u5F0F\u610F\u5473\u7740\u4F60\u5141\u8BB8{payee}\u4F7F\u7528\u65B0\u7684\u652F\u4ED8\u65B9\u5F0F\u652F\u4ED8\u4F60\u7684\u672A\u6765\u8D26\u5355\u3002\u4F60\u53EF\u4EE5\u968F\u65F6\u518D\u6B21\u53D8\u66F4\u652F\u4ED8\u65B9\u5F0F\u3002",
+        completed: "\u4F60\u7684\u652F\u4ED8\u65B9\u5F0F \u5DF2\u7ECF\u66F4\u65B0\u6210\u529F\u3002\u4F60\u53EF\u4EE5\u5728\u4F60\u7684\u8D26\u6237\u4E2D\u67E5\u770B\u6B64\u652F\u4ED8\u65B9\u5F0F\u7684\u8BE6\u7EC6\u4FE1\u606F\u3002"
       },
       invoice: {
         summary: "\u6458\u8981",
@@ -233,7 +243,8 @@ module.exports = (0, _flat.default)({
         nextInvoice: "\u4E0B\u4E00\u5F20\u53D1\u7968",
         title: "\u8BA2\u9605\u7BA1\u7406",
         current: "\u5F53\u524D\u8BA2\u9605",
-        empty: "\u6CA1\u6709\u4EFB\u4F55\u8BA2\u9605"
+        empty: "\u6CA1\u6709\u4EFB\u4F55\u8BA2\u9605",
+        changePayment: "\u5207\u6362\u652F\u4ED8\u65B9\u5F0F"
       }
     }
   }

package/lib/payment/form/address.js

@@ -141,7 +141,10 @@ function AddressForm({
               },
               errorPosition: "right",
               variant: "outlined",
-              placeholder: t("payment.checkout.billing.postal_code")
+              placeholder: t("payment.checkout.billing.postal_code"),
+              wrapperStyle: {
+                height: "40px"
+              }
             })]
           })
         })]

package/lib/payment/form/currency.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { TPaymentCurrency } from '@blocklet/payment-types';
+type Props = {
+    value: number;
+    currencies: TPaymentCurrency[];
+    onChange: Function;
+};
+export default function CurrencySelector({ value, currencies, onChange }: Props): import("react").JSX.Element;
+export {};

package/lib/payment/form/currency.js

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = CurrencySelector;
+var _jsxRuntime = require("react/jsx-runtime");
+var _material = require("@mui/material");
+var _system = require("@mui/system");
+function CurrencySelector({
+  value,
+  currencies,
+  onChange
+}) {
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(Root, {
+    style: {
+      display: currencies.length > 1 ? "grid" : "block",
+      gridTemplateColumns: "50% 50%",
+      width: "100%"
+    },
+    children: currencies.map((x, i) => {
+      const selected = i === value;
+      return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Card, {
+        variant: "outlined",
+        onClick: () => onChange(i),
+        className: selected ? "cko-payment-card" : "cko-payment-card-unselect",
+        children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          direction: "row",
+          alignItems: "center",
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
+            src: x.logo,
+            alt: x.name,
+            sx: {
+              width: 30,
+              height: 30,
+              marginRight: "10px"
+            }
+          }), /* @__PURE__ */(0, _jsxRuntime.jsxs)("div", {
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              variant: "h5",
+              component: "div",
+              sx: {
+                fontSize: "18px"
+              },
+              children: x.symbol
+            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              sx: {
+                fontSize: 14
+              },
+              color: "text.secondary",
+              gutterBottom: true,
+              children: x.method.name
+            })]
+          })]
+        })
+      }, x.id);
+    })
+  });
+}
+const Root = (0, _system.styled)("section")`
+  .cko-payment-card {
+    position: relative;
+    border: 2px solid ${props => props.theme.palette.primary.main};
+    padding: 5px 10px;
+    margin: 5px 0;
+    cursor: pointer;
+  }
+
+  .cko-payment-card::before {
+    content: '';
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    border: 12px solid ${props => props.theme.palette.primary.main};
+    border-top-color: transparent;
+    border-left-color: transparent;
+  }
+
+  .cko-payment-card-unselect {
+    border: 2px solid #ddd;
+    padding: 5px 10px;
+    margin: 5px 0;
+    cursor: pointer;
+  }
+
+  .cko-payment-card:nth-child(odd) {
+    margin-right: 8px;
+  }
+
+  .cko-payment-card-unselect:nth-child(odd) {
+    margin-right: 8px;
+  }
+
+  .cko-payment-card::after {
+    content: '';
+    width: 6px;
+    height: 10px;
+    position: absolute;
+    right: 3px;
+    bottom: 3px;
+    border: 2px solid #fff;
+    border-top-color: transparent;
+    border-left-color: transparent;
+    transform: rotate(35deg);
+  }
+`;

package/lib/payment/form/index.js

@@ -26,6 +26,7 @@ var _payment = require("../../contexts/payment");
 var _util = require("../../util");
 var _addon = _interopRequireDefault(require("./addon"));
 var _address = _interopRequireDefault(require("./address"));
+var _currency = _interopRequireDefault(require("./currency"));
 var _phone = _interopRequireDefault(require("./phone"));
 var _stripe = _interopRequireDefault(require("./stripe"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -47,19 +48,6 @@ const waitForCheckoutComplete = async sessionId => {
   });
   return result;
 };
-const flatPaymentMethods = (methods = []) => {
-  const out = [];
-  methods.forEach(method => {
-    const currencies = method.paymentCurrencies || method.payment_currencies || [];
-    currencies.forEach(currency => {
-      out.push({
-        ...currency,
-        method
-      });
-    });
-  });
-  return out;
-};
 PaymentForm.defaultProps = {};
 function PaymentForm({
   checkoutSession,
@@ -94,7 +82,7 @@ function PaymentForm({
     customerLimited: false,
     stripePaying: false
   });
-  const currencies = flatPaymentMethods(paymentMethods);
+  const currencies = (0, _util.flattenPaymentMethods)(paymentMethods);
   const [paymentCurrencyIndex, setPaymentCurrencyIndex] = (0, _react.useState)(0);
   (0, _react.useEffect)(() => {
     if (session?.user) {
@@ -132,9 +120,6 @@ function PaymentForm({
     action: t(`payment.checkout.${checkoutSession.mode}`)
   });
   const method = paymentMethods.find(x => x.id === paymentMethod);
-  const handleCurrencyChange = index => {
-    setPaymentCurrencyIndex(index);
-  };
   const handleConnected = async () => {
     try {
       const result = await waitForCheckoutComplete(checkoutSession.id);
@@ -224,6 +209,7 @@ function PaymentForm({
               });
             },
             onError: err => {
+              console.error(err);
               setState({
                 submitting: false,
                 paying: false
@@ -245,6 +231,7 @@ function PaymentForm({
         }
       }
     } catch (err) {
+      console.error(err);
       let shouldToast = true;
       if (err.response?.data?.code) {
         (0, _useBus.dispatch)(`error.${err.response?.data?.code}`);
@@ -380,49 +367,10 @@ function PaymentForm({
           children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
             name: "payment_currency",
             control,
-            render: () => /* @__PURE__ */(0, _jsxRuntime.jsx)("section", {
-              style: {
-                display: currencies.length > 1 ? "grid" : "block",
-                gridTemplateColumns: "50% 50%",
-                width: "100%"
-              },
-              children: currencies.map((x, i) => {
-                const selected = i === paymentCurrencyIndex;
-                return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Card, {
-                  variant: "outlined",
-                  onClick: () => handleCurrencyChange(i),
-                  className: selected ? "cko-payment-card" : "cko-payment-card-unselect",
-                  children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-                    direction: "row",
-                    alignItems: "center",
-                    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
-                      src: x.logo,
-                      alt: x.name,
-                      sx: {
-                        width: 30,
-                        height: 30,
-                        marginRight: "10px"
-                      }
-                    }), /* @__PURE__ */(0, _jsxRuntime.jsxs)("div", {
-                      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                        variant: "h5",
-                        component: "div",
-                        sx: {
-                          fontSize: "18px"
-                        },
-                        children: x.symbol
-                      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                        sx: {
-                          fontSize: 14
-                        },
-                        color: "text.secondary",
-                        gutterBottom: true,
-                        children: x.method.name
-                      })]
-                    })]
-                  })
-                }, x.id);
-              })
+            render: () => /* @__PURE__ */(0, _jsxRuntime.jsx)(_currency.default, {
+              value: paymentCurrencyIndex,
+              currencies,
+              onChange: setPaymentCurrencyIndex
             })
           })
         }), state.stripePaying && state.stripeContext && /* @__PURE__ */(0, _jsxRuntime.jsx)(_stripe.default, {