@blocklet/payment-react 1.14.21 → 1.14.22

package/es/locales/en.js

@@ -60,7 +60,7 @@ export default flat({
     continue: "Continue",
     qty: "Qty {count}",
     each: "{unit} each",
-    trial: "Free for {count} days",
+    trial: "Free for {count} day{count > 1 ? 's' : ''}",
     billed: "billed {rule}",
     metered: "based on usage",
     hour: "hour",
@@ -109,10 +109,12 @@ export default flat({
         subscription: "View subscription",
         invoice: "View invoice"
       },
+      paymentRequired: "Payment Required",
       staking: {
         title: "Staking Required",
         tooltip: "Staking is used to ensure that future invoices can be paid normally. Revoking the staking from DID Wallet means canceling the subscription."
       },
+      stakingConfirm: "In this payment, the staked amount is separate from the product cost.",
       donation: {
         between: "Please enter an amount between {min} and {max}.",
         custom: "Custom Amount",
@@ -129,7 +131,9 @@ export default flat({
       sub1: "Subscribe to {name}",
       sub2: "Subscribe to {name} and {count} more",
       then: "Then {subscription} {recurring}",
-      free: "{count} days free",
+      meteredThen: "Then {recurring} based on usage",
+      metered: "{recurring} based on usage",
+      free: "{count} day{count > 1 ? 's' : ''} free",
       least: "continue with at least",
       completed: {
         payment: "Thanks for your purchase",
@@ -138,7 +142,7 @@ export default flat({
         donate: "Thanks for your support",
         tip: "A payment to {payee} has been completed. You can view the details of this payment in your account."
       },
-      confirm: "By confirming your subscription, you allow {payee} to charge your account or slashing your staking for this and future payments in accordance with their terms. You can always cancel your subscription, or revoking your staking from DID Wallet.",
+      confirm: "Confirming allows {payee} to charge or reduce your staking. You can cancel or revoke staking anytime.",
       required: "Required",
       invalid: "Invalid",
       billing: {
@@ -178,13 +182,17 @@ export default flat({
       emptyItems: {
         title: "Nothing to show here",
         description: "Seems this checkoutSession is not configured properly"
-      }
+      },
+      orderSummary: "Order Summary",
+      paymentDetails: "Payment Details",
+      productListTotal: "Includes {total} items"
     },
     customer: {
       payments: "Payment History",
       invoices: "Invoice History",
       details: "Details",
       summary: "Summary",
+      specifics: "Specifics",
       update: "Update Information",
       empty: "Seems you do not have any subscriptions or payments here",
       cancel: {
@@ -259,13 +267,17 @@ export default flat({
         renewSuccess: "You have successfully renewed the subscription",
         renewError: "Failed to renew the subscription",
         empty: "There are no invoices",
-        next: "No invoices yet, next invoice will be generated on {date}"
+        next: "No invoices yet, next invoice will be generated on {date}",
+        invoiceNumber: "Invoice Number",
+        emptyList: "No Invoice"
       },
       payment: {
-        empty: "There are no payments"
+        empty: "There are no payments",
+        emptyList: "No Payment"
       },
       refund: {
-        empty: "There are no refunds"
+        empty: "There are no refunds",
+        emptyList: "No Refund"
       },
       subscriptions: {
         plan: "Plan",
@@ -298,5 +310,8 @@ export default flat({
       [RefundType.refund]: "Refund",
       [RefundType.stakeReturn]: "Stake Return"
     }
+  },
+  empty: {
+    records: "No matching records found"
   }
 });

package/es/locales/index.d.ts

@@ -2,7 +2,6 @@ export declare const translations: {
     zh: any;
     en: any;
 };
-export declare const replace: (template: string, data?: Record<string, any>) => string;
 export declare const createTranslator: ({ fallbackLocale }: {
     fallbackLocale?: string | undefined;
 }, langs?: any) => (key: string, locale?: string, data?: Record<string, any>) => string;

package/es/locales/index.js

@@ -1,10 +1,19 @@
+import { template } from "lodash";
 import en from "./en.js";
 import zh from "./zh.js";
 export const translations = {
   zh,
   en
 };
-export const replace = (template, data = {}) => template.replace(/{(\w*)}/g, (_, key) => data.hasOwnProperty(key) ? data[key] : "");
+const replace = (t2, data = {}) => {
+  try {
+    const compiled = template(t2, { interpolate: /{([\s\S]+?)}/g, escape: /{([\s\S]+?)}/g });
+    return compiled(data);
+  } catch (e) {
+    console.error(`Error evaluating template: ${t2}`, e);
+    return "";
+  }
+};
 export const createTranslator = ({ fallbackLocale = "en" }, langs = translations) => {
   return (key, locale = fallbackLocale, data = {}) => {
     if (!langs[locale] || !langs[locale][key]) {

package/es/locales/zh.js

@@ -109,10 +109,12 @@ export default flat({
         subscription: "\u67E5\u770B\u8BA2\u9605",
         invoice: "\u67E5\u770B\u8D26\u5355"
       },
+      paymentRequired: "\u652F\u4ED8\u6570\u91CF",
       staking: {
         title: "\u8D28\u62BC\u6570\u91CF",
         tooltip: "\u8D28\u62BC\u76F8\u5F53\u4E8E\u4FDD\u8BC1\u91D1\uFF0C\u7528\u4E8E\u786E\u4FDD\u672A\u6765\u7684\u8D26\u5355\u80FD\u591F\u6B63\u5E38\u6263\u6B3E\uFF0C\u5982\u679C\u4F60\u4ECE DID Wallet \u64A4\u9500\u8D28\u62BC\uFF0C\u8BA2\u9605\u4E5F\u4F1A\u88AB\u53D6\u6D88\u3002"
       },
+      stakingConfirm: "\u5728\u6B64\u652F\u4ED8\u4E2D\uFF0C\u8D28\u62BC\u91D1\u989D\u4E0E\u4EA7\u54C1\u8D39\u7528\u5206\u5F00",
       donation: {
         between: "\u91D1\u989D\u5FC5\u987B\u5927\u4E8E {min} \u4E14\u5C0F\u4E8E {max}",
         custom: "\u8F93\u5165\u91D1\u989D",
@@ -129,7 +131,9 @@ export default flat({
       sub1: "\u8BA2\u9605 {name}",
       sub2: "\u8BA2\u9605 {name} \u7B49{count}\u4E2A\u4EA7\u54C1",
       then: "\u7136\u540E {subscription} {recurring}",
-      free: "{count} \u5929",
+      meteredThen: "\u7136\u540E{recurring}\u6309\u7528\u91CF\u8BA1\u8D39",
+      metered: "{recurring}\u6309\u7528\u91CF\u8BA1\u8D39",
+      free: "\u514D\u8D39\u8BD5\u7528 {count} \u5929",
       least: "\u81F3\u5C11",
       completed: {
         payment: "\u611F\u8C22\u60A8\u7684\u8D2D\u4E70",
@@ -138,7 +142,7 @@ export default flat({
         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"
       },
-      confirm: "\u901A\u8FC7\u786E\u8BA4\u60A8\u7684\u8BA2\u9605\uFF0C\u60A8\u5141\u8BB8{payee}\u6309\u7167\u5176\u6761\u6B3E\u5BF9\u60A8\u7684\u8D26\u6237\u8FDB\u884C\u4ED8\u6B3E\u6216\u8005\u7F5A\u6CA1\u60A8\u7684\u8D28\u62BC\u3002\u60A8\u968F\u65F6\u53EF\u4EE5\u53D6\u6D88\u60A8\u7684\u8BA2\u9605\uFF0C\u6216\u8005\u64A4\u9500\u8D28\u62BC\u3002",
+      confirm: "\u786E\u8BA4\u5141\u8BB8{payee}\u5BF9\u60A8\u7684\u8D26\u6237\u8FDB\u884C\u4ED8\u6B3E\u6216\u8005\u7F5A\u6CA1\u60A8\u7684\u8D28\u62BC\u3002\u60A8\u968F\u65F6\u53EF\u4EE5\u53D6\u6D88\u60A8\u7684\u8BA2\u9605\uFF0C\u6216\u8005\u64A4\u9500\u8D28\u62BC\u3002",
       required: "\u5FC5\u586B\u9879",
       invalid: "\u65E0\u6548",
       billing: {
@@ -178,13 +182,17 @@ export default flat({
       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"
-      }
+      },
+      orderSummary: "\u8BA2\u5355\u6982\u89C8",
+      paymentDetails: "\u652F\u4ED8\u4FE1\u606F",
+      productListTotal: "\u5305\u62EC {total} \u9879"
     },
     customer: {
       payments: "\u652F\u4ED8\u5386\u53F2",
       invoices: "\u8D26\u5355\u5386\u53F2",
       details: "\u8D26\u6237\u8BE6\u60C5",
       summary: "\u8BA1\u8D39\u6458\u8981",
+      specifics: "\u5177\u4F53\u4FE1\u606F",
       update: "\u66F4\u65B0\u5BA2\u6237\u4FE1\u606F",
       empty: "\u770B\u8D77\u6765\u60A8\u5728\u8FD9\u91CC\u6CA1\u6709\u4EFB\u4F55\u8BA2\u9605\u6216\u652F\u4ED8",
       cancel: {
@@ -259,13 +267,17 @@ export default flat({
         renewSuccess: "\u8BA2\u9605\u6062\u590D\u6210\u529F",
         renewError: "\u8BA2\u9605\u6062\u590D\u5931\u8D25",
         empty: "\u6CA1\u6709\u4EFB\u4F55\u8D26\u5355",
-        next: "\u8FD8\u6CA1\u6709\u8D26\u5355\uFF0C\u4E0B\u6B21\u8D26\u5355\u5C06\u5728 {date} \u751F\u6210"
+        next: "\u8FD8\u6CA1\u6709\u8D26\u5355\uFF0C\u4E0B\u6B21\u8D26\u5355\u5C06\u5728 {date} \u751F\u6210",
+        invoiceNumber: "\u8D26\u5355\u7F16\u53F7",
+        emptyList: "\u6CA1\u6709\u8D26\u5355"
       },
       payment: {
-        empty: "\u6CA1\u6709\u652F\u4ED8\u8BB0\u5F55"
+        empty: "\u6CA1\u6709\u652F\u4ED8\u8BB0\u5F55",
+        emptyList: "\u6CA1\u6709\u652F\u4ED8\u8BB0\u5F55"
       },
       refund: {
-        empty: "\u6CA1\u6709\u9000\u6B3E\u8BB0\u5F55"
+        empty: "\u6CA1\u6709\u9000\u6B3E\u8BB0\u5F55",
+        emptyList: "\u6CA1\u6709\u9000\u6B3E\u8BB0\u5F55"
       },
       subscriptions: {
         plan: "\u8BA2\u9605",
@@ -298,5 +310,8 @@ export default flat({
       [RefundType.refund]: "\u9000\u6B3E",
       [RefundType.stakeReturn]: "\u9000\u62BC\u91D1"
     }
+  },
+  empty: {
+    records: "\u6CA1\u6709\u627E\u5230\u5339\u914D\u7684\u8BB0\u5F55"
   }
 });

package/es/payment/error.js

@@ -3,7 +3,7 @@ import { Button, Link, Stack, Typography } from "@mui/material";
 function getHeightStyle(mode) {
   switch (mode) {
     case "standalone":
-      return { height: "100vh" };
+      return { height: "100vh", maxHeight: "100%" };
     default:
       return { height: "auto", minHeight: 200 };
   }
@@ -13,7 +13,7 @@ export default function PaymentError({ title, description, button, mode }) {
   return /* @__PURE__ */ jsx(Stack, { sx: heightStyle, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsxs(Stack, { sx: { width: "280px" }, direction: "column", alignItems: "center", justifyContent: "center", children: [
     /* @__PURE__ */ jsx(Typography, { variant: "h5", sx: { mb: 2 }, children: title }),
     /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { mb: 2, textAlign: "center" }, children: description }),
-    /* @__PURE__ */ jsx(Button, { variant: "text", size: "small", component: Link, href: window.blocklet?.appUrl, children: button })
+    /* @__PURE__ */ jsx(Button, { variant: "text", size: "small", sx: { color: "text.link" }, component: Link, href: window.blocklet?.appUrl, children: button })
   ] }) });
 }
 PaymentError.defaultProps = {

package/es/payment/footer.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Typography } from "@mui/material";
 export default function CheckoutFooter({ ...props }) {
-  return /* @__PURE__ */ jsxs(Typography, { color: "text.secondary", fontSize: 12, ...props, children: [
+  return /* @__PURE__ */ jsxs(Typography, { color: "text.lighter", fontSize: 12, ...props, children: [
     "Powered by",
     " ",
     /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontWeight: "bold", fontSize: 12 }, children: "ArcBlock" })

package/es/payment/form/address.d.ts

@@ -1,7 +1,14 @@
 /// <reference types="react" />
+import { SxProps } from '@mui/material';
 type Props = {
     mode: string;
     stripe: boolean;
+    sx?: SxProps;
 };
-export default function AddressForm({ mode, stripe }: Props): import("react").JSX.Element | null;
-export {};
+declare function AddressForm({ mode, stripe, sx }: Props): import("react").JSX.Element | null;
+declare namespace AddressForm {
+    var defaultProps: {
+        sx: {};
+    };
+}
+export default AddressForm;

package/es/payment/form/address.js

@@ -1,49 +1,50 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { Fade, Stack, Typography } from "@mui/material";
+import { Fade, FormLabel, InputAdornment, Stack } from "@mui/material";
 import { Controller, useFormContext } from "react-hook-form";
-import { CountrySelector } from "react-international-phone";
 import FormInput from "../../components/input.js";
-export default function AddressForm({ mode, stripe }) {
+import CountrySelect from "../../components/country-select.js";
+AddressForm.defaultProps = {
+  sx: {}
+};
+export default function AddressForm({ mode, stripe, sx = {} }) {
   const { t } = useLocaleContext();
-  const { control, setValue } = useFormContext();
+  const { control } = useFormContext();
   if (mode === "required") {
-    return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-payment-address cko-payment-form", children: [
-      /* @__PURE__ */ jsx(Typography, { sx: { mb: 1, color: "text.primary", fontWeight: 600 }, children: t(`payment.checkout.billing.${mode}`) }),
+    return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-payment-address cko-payment-form", sx, children: [
+      /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t(`payment.checkout.billing.${mode}`) }),
       /* @__PURE__ */ jsxs(Stack, { direction: "column", className: "cko-payment-form", spacing: 0, children: [
-        /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0, children: [
-          /* @__PURE__ */ jsx(
-            Controller,
-            {
-              name: "billing_address.country",
-              control,
-              render: ({ field }) => /* @__PURE__ */ jsx(
-                CountrySelector,
+        /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 0, children: /* @__PURE__ */ jsx(
+          FormInput,
+          {
+            name: "billing_address.postal_code",
+            rules: { required: t("payment.checkout.required") },
+            errorPosition: "right",
+            variant: "outlined",
+            placeholder: t("payment.checkout.billing.postal_code"),
+            InputProps: {
+              startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(
+                Controller,
                 {
-                  selectedCountry: field.value,
-                  onSelect: ({ iso2 }) => setValue(field.name, iso2),
-                  buttonStyle: {
-                    width: "64px",
-                    height: "40px",
-                    border: "1px solid #ccc",
-                    marginLeft: -1,
-                    marginTop: -1
-                  }
+                  name: "billing_address.country",
+                  control,
+                  render: ({ field }) => /* @__PURE__ */ jsx(
+                    CountrySelect,
+                    {
+                      ...field,
+                      sx: {
+                        "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+                          borderColor: "transparent"
+                        }
+                      }
+                    }
+                  )
                 }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            FormInput,
-            {
-              name: "billing_address.postal_code",
-              rules: { required: t("payment.checkout.required") },
-              errorPosition: "right",
-              variant: "outlined",
-              placeholder: t("payment.checkout.billing.postal_code")
+              ) })
             }
-          )
-        ] }),
+          }
+        ) }),
+        /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.billing.state") }),
         /* @__PURE__ */ jsx(
           FormInput,
           {
@@ -54,6 +55,7 @@ export default function AddressForm({ mode, stripe }) {
             placeholder: t("payment.checkout.billing.state")
           }
         ),
+        /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.billing.line1") }),
         /* @__PURE__ */ jsx(
           FormInput,
           {
@@ -64,6 +66,7 @@ export default function AddressForm({ mode, stripe }) {
             placeholder: t("payment.checkout.billing.line1")
           }
         ),
+        /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.billing.city") }),
         /* @__PURE__ */ jsx(
           FormInput,
           {
@@ -78,42 +81,39 @@ export default function AddressForm({ mode, stripe }) {
     ] }) });
   }
   if (stripe) {
-    return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-payment-address cko-payment-form", children: [
-      /* @__PURE__ */ jsx(Typography, { sx: { mb: 1, color: "text.primary", fontWeight: 600 }, children: t(`payment.checkout.billing.${mode}`) }),
-      /* @__PURE__ */ jsx(Stack, { direction: "column", className: "cko-payment-form", spacing: 0, children: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0, children: [
-        /* @__PURE__ */ jsx(
-          Controller,
-          {
-            name: "billing_address.country",
-            control,
-            render: ({ field }) => /* @__PURE__ */ jsx(
-              CountrySelector,
+    return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-payment-address cko-payment-form", sx, children: [
+      /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t(`payment.checkout.billing.${mode}`) }),
+      /* @__PURE__ */ jsx(Stack, { direction: "column", className: "cko-payment-form", spacing: 0, children: /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 0, children: /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          name: "billing_address.postal_code",
+          rules: { required: t("payment.checkout.required") },
+          errorPosition: "right",
+          variant: "outlined",
+          placeholder: t("payment.checkout.billing.postal_code"),
+          wrapperStyle: { height: "40px" },
+          InputProps: {
+            startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(
+              Controller,
               {
-                selectedCountry: field.value,
-                onSelect: ({ iso2 }) => setValue(field.name, iso2),
-                buttonStyle: {
-                  width: "64px",
-                  height: "40px",
-                  border: "1px solid #ccc",
-                  marginLeft: -1,
-                  marginTop: -1
-                }
+                name: "billing_address.country",
+                control,
+                render: ({ field }) => /* @__PURE__ */ jsx(
+                  CountrySelect,
+                  {
+                    ...field,
+                    sx: {
+                      "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+                        borderColor: "transparent"
+                      }
+                    }
+                  }
+                )
               }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          FormInput,
-          {
-            name: "billing_address.postal_code",
-            rules: { required: t("payment.checkout.required") },
-            errorPosition: "right",
-            variant: "outlined",
-            placeholder: t("payment.checkout.billing.postal_code"),
-            wrapperStyle: { height: "40px" }
+            ) })
           }
-        )
-      ] }) })
+        }
+      ) }) })
     ] }) });
   }
   return null;

package/es/payment/form/currency.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Avatar, Card, Stack, Typography } from "@mui/material";
+import { Avatar, Card, Radio, Stack, Typography } from "@mui/material";
 import { styled } from "@mui/system";
 export default function CurrencySelector({ value, currencies, onChange }) {
   return /* @__PURE__ */ jsx(
@@ -8,8 +8,9 @@ export default function CurrencySelector({ value, currencies, onChange }) {
       count: currencies.length,
       style: {
         display: currencies.length > 1 ? "grid" : "block",
-        gridTemplateColumns: "50% 50%",
-        width: "100%"
+        width: "100%",
+        gap: 12,
+        gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))"
       },
       children: currencies.map((x, i) => {
         const selected = i === value;
@@ -19,12 +20,30 @@ export default function CurrencySelector({ value, currencies, onChange }) {
             variant: "outlined",
             onClick: () => onChange(i),
             className: selected ? "cko-payment-card" : "cko-payment-card-unselect",
-            children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", children: [
-              /* @__PURE__ */ jsx(Avatar, { src: x.logo, alt: x.name, sx: { width: 30, height: 30, marginRight: "10px" } }),
+            children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", sx: { position: "relative" }, children: [
+              /* @__PURE__ */ jsx(Avatar, { src: x.logo, alt: x.name, sx: { width: 40, height: 40, marginRight: "12px" } }),
               /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx(Typography, { variant: "h5", component: "div", sx: { fontSize: "18px" }, children: x.symbol }),
-                /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 14 }, color: "text.secondary", gutterBottom: true, children: x.method.name })
-              ] })
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    variant: "h5",
+                    component: "div",
+                    sx: { fontSize: "16px", color: "text.primary", fontWeight: "500" },
+                    children: x.symbol
+                  }
+                ),
+                /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 14 }, color: "text.lighter", gutterBottom: true, children: x.method.name })
+              ] }),
+              /* @__PURE__ */ jsx(
+                Radio,
+                {
+                  checked: selected,
+                  sx: {
+                    position: "absolute",
+                    right: 0
+                  }
+                }
+              )
             ] })
           },
           x.id
@@ -36,32 +55,27 @@ export default function CurrencySelector({ value, currencies, onChange }) {
 const Root = styled("section")`
   .cko-payment-card {
     position: relative;
-    border: 1px solid ${(props) => props.theme.palette.primary.main};
+    border: 1px solid var(--stroke-border-interactive, #0086ff);
     padding: 4px 8px;
-    margin: 8px 0 0;
     cursor: pointer;
+    background: var(--backgrounds-bg-field, #f9fafb);
   }
 
-  .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::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: 1px solid #ddd;
     padding: 4px 8px;
-    margin: 8px 0 0;
     cursor: pointer;
-  }
-
-  .cko-payment-card:nth-child(odd),
-  .cko-payment-card-unselect:nth-child(odd) {
-    margin-right: ${(props) => props.count > 1 ? 8 : 0}px;
+    background: var(--backgrounds-bg-field, #f9fafb);
   }
 
   .cko-payment-card::after {

package/es/payment/form/index.d.ts

@@ -2,7 +2,7 @@
 import 'react-international-phone/style.css';
 import { CheckoutCallbacks, CheckoutContext } from '../../types';
 type PageData = CheckoutContext & CheckoutCallbacks;
-declare function PaymentForm({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, onPaid, onError, mode, action, }: PageData): import("react").JSX.Element;
+declare function PaymentForm({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, onPaid, onError, action, }: PageData): import("react").JSX.Element;
 declare namespace PaymentForm {
     var defaultProps: {};
 }