payment-kit 1.13.17 → 1.13.19

package/src/components/checkout/form/index.tsx

@@ -1,21 +1,28 @@
+import 'react-international-phone/style.css';
+
 import SessionManager from '@arcblock/did-connect/lib/SessionManager';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import LocaleSelector from '@arcblock/ux/lib/Locale/selector';
 import Toast from '@arcblock/ux/lib/Toast';
 import type { TCheckoutSessionExpanded, TCustomer, TPaymentIntent, TPaymentMethodExpanded } from '@did-pay/types';
-import { InfoOutlined } from '@mui/icons-material';
 import { LoadingButton } from '@mui/lab';
 import { Avatar, Fade, InputAdornment, MenuItem, Select, Stack, Tooltip, Typography } from '@mui/material';
 import { useSetState } from 'ahooks';
+import { PhoneNumberUtil } from 'google-libphonenumber';
 import pWaitFor from 'p-wait-for';
 import { useEffect } from 'react';
-import { Controller, FormProvider, useForm, useFormContext } from 'react-hook-form';
+import { Controller, useFormContext, useWatch } from 'react-hook-form';
+import isEmail from 'validator/es/lib/isEmail';
 
 import { useSessionContext } from '../../../contexts/session';
 import api from '../../../libs/api';
 import { formatError, getStatementDescriptor } from '../../../libs/util';
 import FormInput from '../../input';
 import AddressForm from './address';
+import PhoneInput from './phone';
+import StripeCheckout from './stripe';
+
+const phoneUtil = PhoneNumberUtil.getInstance();
 
 const waitForCheckoutComplete = (sessionId: string) => {
   return pWaitFor(
@@ -39,17 +46,24 @@ type PageData = {
   customer?: TCustomer;
 };
 
-PaymentFormInner.defaultProps = {
+PaymentForm.defaultProps = {
   paymentIntent: null,
   customer: null,
 };
 
 // FIXME: https://stripe.com/docs/elements/address-element
-// FIXME: https://github.com/goveo/react-international-phone | https://catamphetamine.gitlab.io/react-phone-number-input/
-// TODO: https://github.com/rocktimsaikia/react-country-dropdown
 // TODO: https://country-regions.github.io/react-country-region-selector/
-// FIXME: add form validation
-export function PaymentFormInner({ checkoutSession, paymentMethods, paymentIntent, onPaid, onError }: PageData) {
+// https://www.npmjs.com/package/postal-codes-js
+// https://www.npmjs.com/package/val-zip
+// https://npm.runkit.com/zips
+export default function PaymentForm({
+  checkoutSession,
+  paymentMethods,
+  paymentIntent,
+  customer,
+  onPaid,
+  onError,
+}: PageData) {
   const { t } = useLocaleContext();
   const { session, connectApi } = useSessionContext();
   const { control, getValues, setValue, handleSubmit } = useFormContext();
@@ -58,11 +72,17 @@ export function PaymentFormInner({ checkoutSession, paymentMethods, paymentInten
     paying: boolean;
     paid: boolean;
     paymentIntent?: TPaymentIntent;
+    stripeContext?: any;
+    customer?: TCustomer;
+    stripePaying: boolean;
   }>({
     submitting: false,
     paying: false,
     paid: false,
     paymentIntent,
+    stripeContext: null,
+    customer,
+    stripePaying: false,
   });
 
   useEffect(() => {
@@ -80,12 +100,25 @@ export function PaymentFormInner({ checkoutSession, paymentMethods, paymentInten
     }
   }, [session.user, getValues, setValue]);
 
-  const currencies = paymentMethods.find((x) => x.id === getValues().payment_method)?.payment_currencies || [];
+  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 payee = getStatementDescriptor(checkoutSession.line_items);
   const buttonText = session.user
     ? t(`checkout.${checkoutSession.mode}`)
     : t('checkout.connect', { action: t(`checkout.${checkoutSession.mode}`) });
 
+  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 handleConnected = async () => {
     try {
       await waitForCheckoutComplete(checkoutSession.id);
@@ -98,31 +131,82 @@ export function PaymentFormInner({ checkoutSession, paymentMethods, paymentInten
     }
   };
 
+  const onUserLoggedIn = async () => {
+    const { data: profile } = await api.get('/api/customers/me');
+    if (profile) {
+      const values = getValues();
+      if (!values.customer_name) {
+        setValue('customer_name', profile.name);
+      }
+      if (!values.customer_email) {
+        setValue('customer_email', profile.email);
+      }
+      if (!values.customer_phone) {
+        setValue('customer_phone', profile.phone);
+      }
+      if (profile.address?.country) {
+        setValue('billing_address.country', profile.address.country);
+      }
+      if (profile.address?.state) {
+        setValue('billing_address.state', profile.address.state);
+      }
+      if (profile.address?.line1) {
+        setValue('billing_address.line1', profile.address.line1);
+      }
+      if (profile.address?.line2) {
+        setValue('billing_address.line2', profile.address.line2);
+      }
+      if (profile.address?.city) {
+        setValue('billing_address.city', profile.address.city);
+      }
+      if (profile.address?.postal_code) {
+        setValue('billing_address.postal_code', profile.address.postal_code);
+      }
+    }
+  };
+
   const onSubmit = async (data: any) => {
     setState({ submitting: true });
     try {
       const result = await api.put(`/api/checkout-sessions/${checkoutSession.id}/submit`, data);
-      setState({ paymentIntent: result.data.paymentIntent, submitting: false, paying: true });
-      if (result.data.delegation.sufficient) {
-        await handleConnected();
-      } else {
-        connectApi.open({
-          action: checkoutSession.mode,
-          timeout: 5 * 60 * 1000,
-          extraParams: { checkoutSessionId: checkoutSession.id },
-          onSuccess: async () => {
-            connectApi.close();
-            await handleConnected();
-          },
-          onClose: () => {
-            connectApi.close();
-            setState({ submitting: false, paying: false });
-          },
-          onError: (err: any) => {
-            setState({ submitting: false, paying: false });
-            onError(err);
-          },
-        });
+
+      setState({
+        paymentIntent: result.data.paymentIntent,
+        stripeContext: result.data.stripeContext,
+        customer: result.data.customer,
+        submitting: false,
+      });
+
+      if (['arcblock', 'ethereum'].includes(method.type)) {
+        setState({ paying: true });
+        if (result.data.delegation.sufficient) {
+          await handleConnected();
+        } else {
+          connectApi.open({
+            action: checkoutSession.mode,
+            timeout: 5 * 60 * 1000,
+            extraParams: { checkoutSessionId: checkoutSession.id },
+            onSuccess: async () => {
+              connectApi.close();
+              await handleConnected();
+            },
+            onClose: () => {
+              connectApi.close();
+              setState({ submitting: false, paying: false });
+            },
+            onError: (err: any) => {
+              setState({ submitting: false, paying: false });
+              onError(err);
+            },
+          });
+        }
+      }
+      if (['stripe'].includes(method.type)) {
+        if (result.data.stripeContext?.status === 'succeeded') {
+          setState({ paying: true });
+        } else {
+          setState({ stripePaying: true });
+        }
       }
     } catch (err) {
       Toast.error(formatError(err));
@@ -136,12 +220,21 @@ export function PaymentFormInner({ checkoutSession, paymentMethods, paymentInten
       await handleSubmit(onSubmit)();
     } else {
       session.login({
-        onSuccess: () => {},
+        onSuccess: onUserLoggedIn,
         extraParams: {},
       });
     }
   };
 
+  const onStripeConfirm = async () => {
+    setState({ stripePaying: false, paying: true });
+    await handleConnected();
+  };
+
+  const onStripeCancel = () => {
+    setState({ stripePaying: false });
+  };
+
   return (
     <>
       <Fade in>
@@ -150,13 +243,23 @@ export function PaymentFormInner({ checkoutSession, paymentMethods, paymentInten
             <Typography sx={{ color: 'text.primary', fontWeight: 600 }}>{t('checkout.contact')}</Typography>
             <Stack direction="row" alignItems="center" justifyContent="space-between">
               <LocaleSelector showText={false} />
-              <SessionManager session={session} />
+              {session.user ? (
+                <SessionManager session={session} />
+              ) : (
+                <Tooltip title={t('checkout.login')} arrow>
+                  <SessionManager session={session} />
+                </Tooltip>
+              )}
             </Stack>
           </Stack>
           <Stack direction="column" className="cko-payment-form" spacing={0}>
             <FormInput
               name="customer_name"
               variant="outlined"
+              errorPosition="right"
+              rules={{
+                required: t('checkout.required'),
+              }}
               InputProps={{
                 startAdornment: <InputAdornment position="start">{t('checkout.customer.name')}</InputAdornment>,
               }}
@@ -164,23 +267,31 @@ export function PaymentFormInner({ checkoutSession, paymentMethods, paymentInten
             <FormInput
               name="customer_email"
               variant="outlined"
+              errorPosition="right"
+              rules={{
+                required: t('checkout.required'),
+                validate: (x) => (isEmail(x) ? true : t('checkout.customer.emailInvalid')),
+              }}
               InputProps={{
                 startAdornment: <InputAdornment position="start">{t('checkout.customer.email')}</InputAdornment>,
               }}
             />
             {checkoutSession.phone_number_collection?.enabled && (
-              <FormInput
+              <PhoneInput
                 name="customer_phone"
                 variant="outlined"
-                InputProps={{
-                  startAdornment: <InputAdornment position="start">{t('checkout.customer.phone')}</InputAdornment>,
-                  endAdornment: (
-                    <InputAdornment position="end">
-                      <Tooltip title={t('checkout.customer.phoneTip')} arrow>
-                        <InfoOutlined fontSize="small" sx={{ cursor: 'pointer' }} />
-                      </Tooltip>
-                    </InputAdornment>
-                  ),
+                errorPosition="right"
+                placeholder="Phone number"
+                rules={{
+                  required: t('checkout.required'),
+                  validate: (x: string) => {
+                    try {
+                      const parsed = phoneUtil.parseAndKeepRawInput(x);
+                      return phoneUtil.isValidNumber(parsed) ? true : t('checkout.invalid');
+                    } catch {
+                      return t('checkout.invalid');
+                    }
+                  },
                 }}
               />
             )}
@@ -189,16 +300,16 @@ export function PaymentFormInner({ checkoutSession, paymentMethods, paymentInten
       </Fade>
       <AddressForm mode={checkoutSession.billing_address_collection as string} />
       <Fade in>
-        <Stack className="cko-payment-methods">
+        <Stack direction="column" className="cko-payment-methods">
           <Typography sx={{ mb: 2, color: 'text.primary', fontWeight: 600 }}>{t('checkout.method')}</Typography>
           <Stack direction="row" spacing={1}>
             <Controller
               name="payment_method"
               control={control}
               render={({ field }) => (
-                <Select {...field} sx={{ flex: 1 }} size="small">
+                <Select {...field} onChange={handleMethodChange} sx={{ flex: 1 }} size="small">
                   {paymentMethods.map((x) => {
-                    const selected = x.id === getValues().payment_method;
+                    const selected = x.id === paymentMethod;
                     return (
                       <MenuItem key={x.id} value={x.id}>
                         <Stack direction="row" spacing={1}>
@@ -216,8 +327,8 @@ export function PaymentFormInner({ checkoutSession, paymentMethods, paymentInten
               control={control}
               render={({ field }) => (
                 <Select {...field} sx={{ flex: 1 }} size="small">
-                  {currencies.map((x) => {
-                    const selected = x.id === getValues().payment_currency;
+                  {paymentCurrencies.map((x) => {
+                    const selected = x.id === paymentCurrency;
                     return (
                       <MenuItem key={x.id} value={x.id}>
                         <Stack direction="row" spacing={1}>
@@ -231,6 +342,17 @@ export function PaymentFormInner({ checkoutSession, paymentMethods, paymentInten
               )}
             />
           </Stack>
+          {state.stripePaying && state.stripeContext && (
+            <StripeCheckout
+              clientSecret={state.stripeContext.client_secret}
+              intentType={state.stripeContext.intent_type}
+              publicKey={method.settings.stripe?.publishable_key as string}
+              customer={state.customer as TCustomer}
+              mode={checkoutSession.mode}
+              onConfirm={onStripeConfirm}
+              onCancel={onStripeCancel}
+            />
+          )}
         </Stack>
       </Fade>
       <Fade in>
@@ -242,6 +364,7 @@ export function PaymentFormInner({ checkoutSession, paymentMethods, paymentInten
             onClick={onAction}
             fullWidth
             loadingPosition="end"
+            disabled={state.submitting || state.paying || state.stripePaying}
             loading={state.submitting || state.paying}>
             {state.submitting || state.paying ? t('checkout.processing') : buttonText}
           </LoadingButton>
@@ -256,40 +379,3 @@ export function PaymentFormInner({ checkoutSession, paymentMethods, paymentInten
     </>
   );
 }
-
-export default function PaymentForm(props: PageData) {
-  const { session } = useSessionContext();
-  const { customer, checkoutSession, paymentMethods } = props;
-
-  const methods = useForm({
-    defaultValues: {
-      customer_name: customer?.name || session.user?.fullName || '',
-      customer_email: customer?.email || session.user?.email || '',
-      customer_phone: customer?.phone || session.user?.phone || '',
-      payment_method: paymentMethods[0]?.id || '', // FIXME: use default payment method
-      payment_currency: checkoutSession.currency_id || '',
-      billing_address: Object.assign(
-        {
-          country: '',
-          state: '',
-          city: '',
-          line1: '',
-          line2: '',
-          postal_code: '',
-        },
-        customer?.address || {}
-      ),
-    },
-  });
-
-  return (
-    <FormProvider {...methods}>
-      <PaymentFormInner {...props} />
-    </FormProvider>
-  );
-}
-
-PaymentForm.defaultProps = {
-  paymentIntent: null,
-  customer: null,
-};

package/src/components/checkout/form/phone.tsx

@@ -0,0 +1,96 @@
+import { InputAdornment, MenuItem, Select, Typography } from '@mui/material';
+import { useEffect } from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { CountryIso2, FlagEmoji, defaultCountries, parseCountry, usePhoneInput } from 'react-international-phone';
+
+import FormInput from '../../input';
+
+export default function PhoneInput({ ...props }) {
+  const { control, getValues, setValue } = useFormContext();
+  const { phone, handlePhoneValueChange, inputRef, country, setCountry } = usePhoneInput({
+    defaultCountry: 'us',
+    value: getValues().customer_phone || '',
+    countries: defaultCountries,
+    onChange: (data) => {
+      setValue('customer_phone', data.phone);
+    },
+  });
+
+  const userCountry = useWatch({ control, name: 'billing_address.country' });
+
+  useEffect(() => {
+    if (userCountry !== country) {
+      setCountry(userCountry);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [userCountry]);
+
+  const onCountryChange = (e: any) => {
+    setCountry(e.target.value as CountryIso2);
+    setValue('billing_address.country', e.target.value);
+  };
+
+  return (
+    // @ts-ignore
+    <FormInput
+      value={phone}
+      onChange={handlePhoneValueChange}
+      type="tel"
+      inputRef={inputRef}
+      InputProps={{
+        startAdornment: (
+          <InputAdornment position="start" style={{ marginRight: '2px', marginLeft: '-8px' }}>
+            <Select
+              MenuProps={{
+                style: {
+                  height: '300px',
+                  width: '360px',
+                  top: '10px',
+                  left: '-34px',
+                },
+                transformOrigin: {
+                  vertical: 'top',
+                  horizontal: 'left',
+                },
+              }}
+              sx={{
+                width: 'max-content',
+                // Remove default outline (display only on focus)
+                fieldset: {
+                  display: 'none',
+                },
+                '&.Mui-focused:has(div[aria-expanded="false"])': {
+                  fieldset: {
+                    display: 'block',
+                  },
+                },
+                // Update default spacing
+                '.MuiSelect-select': {
+                  padding: '8px',
+                  paddingRight: '24px !important',
+                },
+                svg: {
+                  right: 0,
+                },
+              }}
+              value={country}
+              onChange={onCountryChange}
+              renderValue={(code) => <FlagEmoji iso2={code} style={{ display: 'flex' }} />}>
+              {defaultCountries.map((c) => {
+                const parsed = parseCountry(c);
+                return (
+                  <MenuItem key={parsed.iso2} value={parsed.iso2}>
+                    <FlagEmoji iso2={parsed.iso2} style={{ marginRight: '8px' }} />
+                    <Typography marginRight="8px">{parsed.name}</Typography>
+                    <Typography color="gray">+{parsed.dialCode}</Typography>
+                  </MenuItem>
+                );
+              })}
+            </Select>
+          </InputAdornment>
+        ),
+      }}
+      {...props}
+    />
+  );
+}

package/src/components/checkout/form/stripe.tsx

@@ -0,0 +1,195 @@
+import Center from '@arcblock/ux/lib/Center';
+import Dialog from '@arcblock/ux/lib/Dialog';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { TCustomer } from '@did-pay/types';
+import { LoadingButton } from '@mui/lab';
+import { CircularProgress, Typography } from '@mui/material';
+import { styled } from '@mui/system';
+import { Elements, PaymentElement, useElements, useStripe } from '@stripe/react-stripe-js';
+import { loadStripe } from '@stripe/stripe-js';
+import { useSetState } from 'ahooks';
+import { useEffect } from 'react';
+
+type StripeCheckoutFormProps = {
+  clientSecret: string;
+  intentType: string;
+  customer: TCustomer;
+  mode: string;
+  onConfirm: Function;
+};
+
+// @doc https://stripe.com/docs/js/elements_object/create_payment_element
+function StripeCheckoutForm({ clientSecret, intentType, customer, mode, onConfirm }: StripeCheckoutFormProps) {
+  const stripe = useStripe();
+  const elements = useElements();
+  const { t } = useLocaleContext();
+
+  const [state, setState] = useSetState({
+    message: '',
+    confirming: false,
+    loaded: false,
+  });
+
+  useEffect(() => {
+    if (!stripe) {
+      return;
+    }
+
+    if (!clientSecret) {
+      return;
+    }
+
+    const method = intentType === 'payment_intent' ? 'retrievePaymentIntent' : 'retrieveSetupIntent';
+    stripe[method](clientSecret).then(({ paymentIntent, setupIntent }: any) => {
+      const intent = paymentIntent || setupIntent;
+      switch (intent?.status) {
+        case 'succeeded':
+          setState({ message: t('paymentCredit.preparePayMessage.succeeded') });
+          break;
+        case 'processing':
+          setState({ message: t('paymentCredit.preparePayMessage.processing') });
+          break;
+        case 'requires_payment_method': // 忽略该状态
+        default:
+          break;
+      }
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [stripe, clientSecret]);
+
+  const handleSubmit = async (e: any) => {
+    e.preventDefault();
+
+    if (!stripe || !elements) {
+      return;
+    }
+
+    try {
+      setState({ confirming: true });
+      const method = intentType === 'payment_intent' ? 'confirmPayment' : 'confirmSetup';
+      const { error } = await stripe[method]({
+        elements,
+        redirect: 'if_required',
+        confirmParams: {
+          payment_method_data: {
+            billing_details: {
+              name: customer.name,
+              phone: customer.phone,
+              email: customer.email,
+              address: customer.address,
+            },
+          },
+        },
+      });
+
+      setState({ confirming: false });
+      if (error) {
+        if (error.type === 'validation_error') {
+          return;
+        }
+
+        setState({ message: error.message as string });
+        return;
+      }
+
+      onConfirm();
+    } catch (err) {
+      console.error(err);
+      setState({ confirming: false, message: err.message as string });
+    }
+  };
+
+  return (
+    <Content onSubmit={handleSubmit}>
+      <PaymentElement
+        options={{ layout: 'auto', fields: { billingDetails: 'never' }, readOnly: state.confirming }}
+        onReady={() => setState({ loaded: true })}
+      />
+      {(!stripe || !elements || !state.loaded) && (
+        <Center relative="parent">
+          <CircularProgress />
+        </Center>
+      )}
+      {stripe && elements && state.loaded && (
+        <LoadingButton
+          fullWidth
+          sx={{ mt: 2, mb: 1, borderRadius: 0, fontSize: '1.1rem' }}
+          type="submit"
+          disabled={state.confirming || !state.loaded}
+          loading={state.confirming}
+          loadingPosition="end"
+          variant="contained"
+          color="primary"
+          size="large">
+          {t('checkout.continue', { action: mode })}
+        </LoadingButton>
+      )}
+      {state.message && <Typography sx={{ mt: 1, color: 'error.main' }}>{state.message}</Typography>}
+    </Content>
+  );
+}
+
+const Content = styled('form')`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  min-height: 320px;
+`;
+
+type StripeCheckoutProps = {
+  clientSecret: string;
+  intentType: string;
+  publicKey: string;
+  mode: string;
+  customer: TCustomer;
+  onConfirm: Function;
+  onCancel: Function;
+};
+
+export default function StripeCheckout({
+  clientSecret,
+  intentType,
+  publicKey,
+  mode,
+  customer,
+  onConfirm,
+  onCancel,
+}: StripeCheckoutProps) {
+  const stripePromise = loadStripe(publicKey);
+  const { t } = useLocaleContext();
+  const [state, setState] = useSetState({
+    open: true,
+    closable: true,
+  });
+
+  const handleClose = (_: any, reason: string) => {
+    if (reason === 'backdropClick') {
+      return;
+    }
+
+    setState({ open: false });
+    onCancel();
+  };
+
+  return (
+    <Dialog
+      title={t('checkout.cardPay', { action: t(`checkout.${mode}`) })}
+      showCloseButton={state.closable}
+      open={state.open}
+      onClose={handleClose}
+      disableEscapeKeyDown>
+      <Elements options={{ clientSecret }} stripe={stripePromise}>
+        <StripeCheckoutForm
+          clientSecret={clientSecret}
+          intentType={intentType}
+          mode={mode}
+          customer={customer}
+          onConfirm={onConfirm}
+        />
+      </Elements>
+    </Dialog>
+  );
+}