@blocklet/payment-react 1.13.121 → 1.13.122

package/es/payment/form/index.js

@@ -4,11 +4,11 @@ import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { useTheme } from "@arcblock/ux/lib/Theme";
 import Toast from "@arcblock/ux/lib/Toast";
 import { LoadingButton } from "@mui/lab";
-import { Avatar, Fade, InputAdornment, MenuItem, Select, Stack, Typography } from "@mui/material";
+import { Avatar, Card, Fade, InputAdornment, Stack, Typography } from "@mui/material";
 import { useCreation, useSetState, useSize } from "ahooks";
 import { PhoneNumberUtil } from "google-libphonenumber";
 import pWaitFor from "p-wait-for";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 import { dispatch } from "use-bus";
 import isEmail from "validator/es/lib/isEmail";
@@ -36,6 +36,19 @@ 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 = {};
 export default function PaymentForm({
   checkoutSession,
@@ -59,6 +72,8 @@ export default function PaymentForm({
     customer,
     stripePaying: false
   });
+  const currencies = flatPaymentMethods(paymentMethods);
+  const [paymentCurrencyIndex, setPaymentCurrencyIndex] = useState(0);
   useEffect(() => {
     if (session?.user) {
       const values = getValues();
@@ -73,9 +88,11 @@ export default function PaymentForm({
       }
     }
   }, [session?.user, getValues, setValue]);
+  useEffect(() => {
+    setValue("payment_method", currencies[paymentCurrencyIndex].method.id);
+    setValue("payment_currency", currencies[paymentCurrencyIndex].id);
+  }, [paymentCurrencyIndex, currencies, setValue]);
   const paymentMethod = useWatch({ control, name: "payment_method" });
-  const paymentCurrency = useWatch({ control, name: "payment_currency" });
-  const paymentCurrencies = paymentMethods.find((x) => x.id === paymentMethod)?.payment_currencies || [];
   const domSize = useSize(document.body);
   const isColumnLayout = useCreation(() => {
     if (domSize) {
@@ -88,12 +105,8 @@ export default function PaymentForm({
   const payee = getStatementDescriptor(checkoutSession.line_items);
   const buttonText = session?.user ? t(`payment.checkout.${checkoutSession.mode}`) : t("payment.checkout.connect", { action: t(`payment.checkout.${checkoutSession.mode}`) });
   const method = paymentMethods.find((x) => x.id === paymentMethod);
-  const handleMethodChange = (e) => {
-    setValue("payment_method", e.target.value);
-    const currencies = paymentMethods.find((x) => x.id === e.target.value)?.payment_currencies || [];
-    if (currencies.some((x) => x.id === paymentCurrency) === false) {
-      setValue("payment_currency", currencies[0]?.id);
-    }
+  const handleCurrencyChange = (index) => {
+    setPaymentCurrencyIndex(index);
   };
   const handleConnected = async () => {
     try {
@@ -267,36 +280,42 @@ export default function PaymentForm({
     /* @__PURE__ */ jsx(AddressForm, { mode: checkoutSession.billing_address_collection, stripe: method?.type === "stripe" }),
     /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-start", className: "cko-payment-methods", children: [
       /* @__PURE__ */ jsx(Typography, { sx: { mb: 2, color: "text.primary", fontWeight: 600 }, children: t("payment.checkout.method") }),
-      /* @__PURE__ */ jsxs(Stack, { direction: "row", sx: { width: 1 }, spacing: 1, children: [
-        /* @__PURE__ */ jsx(
-          Controller,
-          {
-            name: "payment_method",
-            control,
-            render: ({ field }) => /* @__PURE__ */ jsx(Select, { ...field, onChange: handleMethodChange, sx: { flex: 1 }, size: "small", children: paymentMethods.map((x) => {
-              const selected = x.id === paymentMethod;
-              return /* @__PURE__ */ jsx(MenuItem, { value: x.id, children: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
-                /* @__PURE__ */ jsx(Avatar, { src: x.logo, alt: x.name, sx: { width: 20, height: 20 } }),
-                /* @__PURE__ */ jsx(Typography, { color: selected ? "text.primary" : "text.secondary", children: x.name })
-              ] }) }, x.id);
-            }) })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Controller,
-          {
-            name: "payment_currency",
-            control,
-            render: ({ field }) => /* @__PURE__ */ jsx(Select, { ...field, sx: { flex: 1 }, size: "small", children: paymentCurrencies.map((x) => {
-              const selected = x.id === paymentCurrency;
-              return /* @__PURE__ */ jsx(MenuItem, { value: x.id, children: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
-                /* @__PURE__ */ jsx(Avatar, { src: x.logo, alt: x.name, sx: { width: 20, height: 20 } }),
-                /* @__PURE__ */ jsx(Typography, { color: selected ? "text.primary" : "text.secondary", children: x.symbol })
-              ] }) }, x.id);
-            }) })
-          }
-        )
-      ] }),
+      /* @__PURE__ */ jsx(Stack, { direction: "row", sx: { width: "100%" }, children: /* @__PURE__ */ jsx(
+        Controller,
+        {
+          name: "payment_currency",
+          control,
+          render: () => /* @__PURE__ */ 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__ */ jsx(
+                  Card,
+                  {
+                    variant: "outlined",
+                    onClick: () => handleCurrencyChange(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" } }),
+                      /* @__PURE__ */ jsxs("div", { children: [
+                        /* @__PURE__ */ jsx(Typography, { variant: "h5", component: "div", children: x.symbol }),
+                        /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 14 }, color: "text.secondary", gutterBottom: true, children: x.method.name })
+                      ] })
+                    ] })
+                  },
+                  x.id
+                );
+              })
+            }
+          )
+        }
+      ) }),
       state.stripePaying && state.stripeContext && /* @__PURE__ */ jsx(
         StripeCheckout,
         {
@@ -319,7 +338,6 @@ export default function PaymentForm({
           size: "large",
           onClick: onAction,
           fullWidth: true,
-          loadingPosition: "end",
           disabled: state.submitting || state.paying || state.stripePaying,
           loading: state.submitting || state.paying,
           children: state.submitting || state.paying ? t("payment.checkout.processing") : buttonText

package/es/payment/index.js

@@ -286,6 +286,52 @@ export const Root = styled(Box)`
   .cko-payment-methods {
   }
 
+  .cko-payment-card {
+    position: relative;
+    border: 2px solid #3773f2;
+    padding: 5px 10px;
+    margin: 5px 0;
+    cursor: pointer;
+  }
+
+  .cko-payment-card::before {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 0;
+    border: 12px solid #3773f2;
+    border-bottom-color: transparent;
+    border-left-color: transparent;
+  }
+
+  .cko-payment-card-unselect {
+    border: 2px solid #bbb;
+    padding: 5px 10px;
+    margin: 5px 0;
+    cursor: pointer;
+  }
+
+  .cko-payment-card:nth-child(odd) {
+    margin-right: 5px;
+  }
+
+  .cko-payment-card-unselect:nth-child(odd) {
+    margin-right: 5px;
+  }
+
+  .cko-payment-card::after {
+    content: '';
+    width: 6px;
+    height: 10px;
+    position: absolute;
+    right: 3px;
+    top: 0px;
+    border: 2px solid #fff;
+    border-top-color: transparent;
+    border-left-color: transparent;
+    transform: rotate(35deg);
+  }
+
   .cko-payment-submit {
     .MuiButtonBase-root {
       border-radius: 0;

package/lib/payment/form/index.js

@@ -45,6 +45,19 @@ 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,
@@ -78,6 +91,8 @@ function PaymentForm({
     customer,
     stripePaying: false
   });
+  const currencies = flatPaymentMethods(paymentMethods);
+  const [paymentCurrencyIndex, setPaymentCurrencyIndex] = (0, _react.useState)(0);
   (0, _react.useEffect)(() => {
     if (session?.user) {
       const values = getValues();
@@ -92,15 +107,14 @@ function PaymentForm({
       }
     }
   }, [session?.user, getValues, setValue]);
+  (0, _react.useEffect)(() => {
+    setValue("payment_method", currencies[paymentCurrencyIndex].method.id);
+    setValue("payment_currency", currencies[paymentCurrencyIndex].id);
+  }, [paymentCurrencyIndex, currencies, setValue]);
   const paymentMethod = (0, _reactHookForm.useWatch)({
     control,
     name: "payment_method"
   });
-  const paymentCurrency = (0, _reactHookForm.useWatch)({
-    control,
-    name: "payment_currency"
-  });
-  const paymentCurrencies = paymentMethods.find(x => x.id === paymentMethod)?.payment_currencies || [];
   const domSize = (0, _ahooks.useSize)(document.body);
   const isColumnLayout = (0, _ahooks.useCreation)(() => {
     if (domSize) {
@@ -115,12 +129,8 @@ function PaymentForm({
     action: t(`payment.checkout.${checkoutSession.mode}`)
   });
   const method = paymentMethods.find(x => x.id === paymentMethod);
-  const handleMethodChange = e => {
-    setValue("payment_method", e.target.value);
-    const currencies = paymentMethods.find(x => x.id === e.target.value)?.payment_currencies || [];
-    if (currencies.some(x => x.id === paymentCurrency) === false) {
-      setValue("payment_currency", currencies[0]?.id);
-    }
+  const handleCurrencyChange = index => {
+    setPaymentCurrencyIndex(index);
   };
   const handleConnected = async () => {
     try {
@@ -348,80 +358,56 @@ function PaymentForm({
             fontWeight: 600
           },
           children: t("payment.checkout.method")
-        }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
           direction: "row",
           sx: {
-            width: 1
+            width: "100%"
           },
-          spacing: 1,
-          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-            name: "payment_method",
-            control,
-            render: ({
-              field
-            }) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Select, {
-              ...field,
-              onChange: handleMethodChange,
-              sx: {
-                flex: 1
-              },
-              size: "small",
-              children: paymentMethods.map(x => {
-                const selected = x.id === paymentMethod;
-                return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.MenuItem, {
-                  value: x.id,
-                  children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-                    direction: "row",
-                    spacing: 1,
-                    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
-                      src: x.logo,
-                      alt: x.name,
-                      sx: {
-                        width: 20,
-                        height: 20
-                      }
-                    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                      color: selected ? "text.primary" : "text.secondary",
-                      children: x.name
-                    })]
-                  })
-                }, x.id);
-              })
-            })
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
             name: "payment_currency",
             control,
-            render: ({
-              field
-            }) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Select, {
-              ...field,
-              sx: {
-                flex: 1
+            render: () => /* @__PURE__ */(0, _jsxRuntime.jsx)("section", {
+              style: {
+                display: currencies.length > 1 ? "grid" : "block",
+                gridTemplateColumns: "50% 50%",
+                width: "100%"
               },
-              size: "small",
-              children: paymentCurrencies.map(x => {
-                const selected = x.id === paymentCurrency;
-                return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.MenuItem, {
-                  value: x.id,
+              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",
-                    spacing: 1,
+                    alignItems: "center",
                     children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
                       src: x.logo,
                       alt: x.name,
                       sx: {
-                        width: 20,
-                        height: 20
+                        width: 30,
+                        height: 30,
+                        marginRight: "10px"
                       }
-                    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                      color: selected ? "text.primary" : "text.secondary",
-                      children: x.symbol
+                    }), /* @__PURE__ */(0, _jsxRuntime.jsxs)("div", {
+                      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                        variant: "h5",
+                        component: "div",
+                        children: x.symbol
+                      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                        sx: {
+                          fontSize: 14
+                        },
+                        color: "text.secondary",
+                        gutterBottom: true,
+                        children: x.method.name
+                      })]
                     })]
                   })
                 }, x.id);
               })
             })
-          })]
+          })
         }), state.stripePaying && state.stripeContext && /* @__PURE__ */(0, _jsxRuntime.jsx)(_stripe.default, {
           clientSecret: state.stripeContext.client_secret,
           intentType: state.stripeContext.intent_type,
@@ -442,7 +428,6 @@ function PaymentForm({
           size: "large",
           onClick: onAction,
           fullWidth: true,
-          loadingPosition: "end",
           disabled: state.submitting || state.paying || state.stripePaying,
           loading: state.submitting || state.paying,
           children: state.submitting || state.paying ? t("payment.checkout.processing") : buttonText

package/lib/payment/index.js

@@ -344,6 +344,52 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
   .cko-payment-methods {
   }
 
+  .cko-payment-card {
+    position: relative;
+    border: 2px solid #3773f2;
+    padding: 5px 10px;
+    margin: 5px 0;
+    cursor: pointer;
+  }
+
+  .cko-payment-card::before {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 0;
+    border: 12px solid #3773f2;
+    border-bottom-color: transparent;
+    border-left-color: transparent;
+  }
+
+  .cko-payment-card-unselect {
+    border: 2px solid #bbb;
+    padding: 5px 10px;
+    margin: 5px 0;
+    cursor: pointer;
+  }
+
+  .cko-payment-card:nth-child(odd) {
+    margin-right: 5px;
+  }
+
+  .cko-payment-card-unselect:nth-child(odd) {
+    margin-right: 5px;
+  }
+
+  .cko-payment-card::after {
+    content: '';
+    width: 6px;
+    height: 10px;
+    position: absolute;
+    right: 3px;
+    top: 0px;
+    border: 2px solid #fff;
+    border-top-color: transparent;
+    border-left-color: transparent;
+    transform: rotate(35deg);
+  }
+
   .cko-payment-submit {
     .MuiButtonBase-root {
       border-radius: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.121",
+  "version": "1.13.122",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -89,7 +89,7 @@
     "@babel/core": "^7.19.3",
     "@babel/preset-env": "^7.19.3",
     "@babel/preset-react": "^7.18.6",
-    "@blocklet/payment-types": "1.13.121",
+    "@blocklet/payment-types": "1.13.122",
     "@storybook/addon-essentials": "^7.6.10",
     "@storybook/addon-interactions": "^7.6.10",
     "@storybook/addon-links": "^7.6.10",
@@ -118,5 +118,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.19.0"
   },
-  "gitHead": "c02f337493cf7dac11324447534cf8684b763064"
+  "gitHead": "015a834e0971d7d0d9947953daeb96a240248c2f"
 }

package/src/payment/form/index.tsx

@@ -3,13 +3,13 @@ import 'react-international-phone/style.css';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { useTheme } from '@arcblock/ux/lib/Theme';
 import Toast from '@arcblock/ux/lib/Toast';
-import type { TCustomer, TPaymentIntent, TPaymentMethodExpanded } from '@blocklet/payment-types';
+import type { PaymentCurrency, TCustomer, TPaymentIntent, TPaymentMethodExpanded } from '@blocklet/payment-types';
 import { LoadingButton } from '@mui/lab';
-import { Avatar, Fade, InputAdornment, MenuItem, Select, Stack, Typography } from '@mui/material';
+import { Avatar, Card, Fade, InputAdornment, Stack, Typography } from '@mui/material';
 import { useCreation, useSetState, useSize } from 'ahooks';
 import { PhoneNumberUtil } from 'google-libphonenumber';
 import pWaitFor from 'p-wait-for';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 import { dispatch } from 'use-bus';
 import isEmail from 'validator/es/lib/isEmail';
@@ -56,6 +56,22 @@ const waitForCheckoutComplete = async (sessionId: string) => {
 
 type PageData = CheckoutContext & CheckoutCallbacks;
 
+const flatPaymentMethods = (methods: TPaymentMethodExpanded[] = []) => {
+  const out: PaymentCurrency[] = [];
+
+  methods.forEach((method: any) => {
+    const currencies = method.paymentCurrencies || method.payment_currencies || [];
+    currencies.forEach((currency: any) => {
+      out.push({
+        ...currency,
+        method,
+      });
+    });
+  });
+
+  return out;
+};
+
 PaymentForm.defaultProps = {};
 
 // FIXME: https://stripe.com/docs/elements/address-element
@@ -98,6 +114,9 @@ export default function PaymentForm({
     stripePaying: false,
   });
 
+  const currencies = flatPaymentMethods(paymentMethods);
+  const [paymentCurrencyIndex, setPaymentCurrencyIndex] = useState(0);
+
   useEffect(() => {
     if (session?.user) {
       const values = getValues();
@@ -113,9 +132,12 @@ export default function PaymentForm({
     }
   }, [session?.user, getValues, setValue]);
 
+  useEffect(() => {
+    setValue('payment_method', (currencies[paymentCurrencyIndex] as any).method.id);
+    setValue('payment_currency', currencies[paymentCurrencyIndex].id);
+  }, [paymentCurrencyIndex, currencies, setValue]);
+
   const paymentMethod = useWatch({ control, name: 'payment_method' });
-  const paymentCurrency = useWatch({ control, name: 'payment_currency' });
-  const paymentCurrencies = paymentMethods.find((x) => x.id === paymentMethod)?.payment_currencies || [];
 
   const domSize = useSize(document.body);
 
@@ -135,12 +157,8 @@ export default function PaymentForm({
 
   const method = paymentMethods.find((x) => x.id === paymentMethod) as TPaymentMethodExpanded;
 
-  const handleMethodChange = (e: any) => {
-    setValue('payment_method', e.target.value);
-    const currencies = paymentMethods.find((x) => x.id === e.target.value)?.payment_currencies || [];
-    if (currencies.some((x) => x.id === paymentCurrency) === false) {
-      setValue('payment_currency', currencies[0]?.id);
-    }
+  const handleCurrencyChange = (index: number) => {
+    setPaymentCurrencyIndex(index);
   };
 
   const handleConnected = async () => {
@@ -322,43 +340,40 @@ export default function PaymentForm({
       <Fade in>
         <Stack direction="column" alignItems="flex-start" className="cko-payment-methods">
           <Typography sx={{ mb: 2, color: 'text.primary', fontWeight: 600 }}>{t('payment.checkout.method')}</Typography>
-          <Stack direction="row" sx={{ width: 1 }} spacing={1}>
-            <Controller
-              name="payment_method"
-              control={control}
-              render={({ field }) => (
-                <Select {...field} onChange={handleMethodChange} sx={{ flex: 1 }} size="small">
-                  {paymentMethods.map((x) => {
-                    const selected = x.id === paymentMethod;
-                    return (
-                      <MenuItem key={x.id} value={x.id}>
-                        <Stack direction="row" spacing={1}>
-                          <Avatar src={x.logo} alt={x.name} sx={{ width: 20, height: 20 }} />
-                          <Typography color={selected ? 'text.primary' : 'text.secondary'}>{x.name}</Typography>
-                        </Stack>
-                      </MenuItem>
-                    );
-                  })}
-                </Select>
-              )}
-            />
+          <Stack direction="row" sx={{ width: '100%' }}>
             <Controller
               name="payment_currency"
               control={control}
-              render={({ field }) => (
-                <Select {...field} sx={{ flex: 1 }} size="small">
-                  {paymentCurrencies.map((x) => {
-                    const selected = x.id === paymentCurrency;
+              render={() => (
+                <section
+                  style={{
+                    display: currencies.length > 1 ? 'grid' : 'block',
+                    gridTemplateColumns: '50% 50%',
+                    width: '100%',
+                  }}>
+                  {currencies.map((x, i) => {
+                    const selected = i === paymentCurrencyIndex;
                     return (
-                      <MenuItem key={x.id} value={x.id}>
-                        <Stack direction="row" spacing={1}>
-                          <Avatar src={x.logo} alt={x.name} sx={{ width: 20, height: 20 }} />
-                          <Typography color={selected ? 'text.primary' : 'text.secondary'}>{x.symbol}</Typography>
+                      <Card
+                        key={x.id}
+                        variant="outlined"
+                        onClick={() => handleCurrencyChange(i)}
+                        className={selected ? 'cko-payment-card' : 'cko-payment-card-unselect'}>
+                        <Stack direction="row" alignItems="center">
+                          <Avatar src={x.logo} alt={x.name} sx={{ width: 30, height: 30, marginRight: '10px' }} />
+                          <div>
+                            <Typography variant="h5" component="div">
+                              {x.symbol}
+                            </Typography>
+                            <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
+                              {(x as any).method.name}
+                            </Typography>
+                          </div>
                         </Stack>
-                      </MenuItem>
+                      </Card>
                     );
                   })}
-                </Select>
+                </section>
               )}
             />
           </Stack>
@@ -383,7 +398,6 @@ export default function PaymentForm({
             size="large"
             onClick={onAction}
             fullWidth
-            loadingPosition="end"
             disabled={state.submitting || state.paying || state.stripePaying}
             loading={state.submitting || state.paying}>
             {state.submitting || state.paying ? t('payment.checkout.processing') : buttonText}

package/src/payment/index.tsx

@@ -331,6 +331,52 @@ export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | '
   .cko-payment-methods {
   }
 
+  .cko-payment-card {
+    position: relative;
+    border: 2px solid #3773f2;
+    padding: 5px 10px;
+    margin: 5px 0;
+    cursor: pointer;
+  }
+
+  .cko-payment-card::before {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 0;
+    border: 12px solid #3773f2;
+    border-bottom-color: transparent;
+    border-left-color: transparent;
+  }
+
+  .cko-payment-card-unselect {
+    border: 2px solid #bbb;
+    padding: 5px 10px;
+    margin: 5px 0;
+    cursor: pointer;
+  }
+
+  .cko-payment-card:nth-child(odd) {
+    margin-right: 5px;
+  }
+
+  .cko-payment-card-unselect:nth-child(odd) {
+    margin-right: 5px;
+  }
+
+  .cko-payment-card::after {
+    content: '';
+    width: 6px;
+    height: 10px;
+    position: absolute;
+    right: 3px;
+    top: 0px;
+    border: 2px solid #fff;
+    border-top-color: transparent;
+    border-left-color: transparent;
+    transform: rotate(35deg);
+  }
+
   .cko-payment-submit {
     .MuiButtonBase-root {
       border-radius: 0;