@blocklet/payment-react 1.13.113

package/src/payment/form/index.tsx

@@ -0,0 +1,401 @@
+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 { LoadingButton } from '@mui/lab';
+import { Avatar, Fade, InputAdornment, MenuItem, Select, 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 { Controller, useFormContext, useWatch } from 'react-hook-form';
+import { dispatch } from 'use-bus';
+import isEmail from 'validator/es/lib/isEmail';
+
+import api from '../../api';
+import FormInput from '../../components/input';
+import { usePaymentContext } from '../../contexts/payment';
+import { CheckoutCallbacks, CheckoutContext } from '../../types';
+import { formatError, getStatementDescriptor } from '../../util';
+import UserButtons from './addon';
+import AddressForm from './address';
+import PhoneInput from './phone';
+import StripeCheckout from './stripe';
+
+const phoneUtil = PhoneNumberUtil.getInstance();
+
+const waitForCheckoutComplete = async (sessionId: string) => {
+  let result: CheckoutContext;
+
+  await pWaitFor(
+    async () => {
+      const { data } = await api.get(`/api/checkout-sessions/retrieve/${sessionId}`);
+      if (
+        data.paymentIntent &&
+        data.paymentIntent.status === 'requires_action' &&
+        data.paymentIntent.last_payment_error
+      ) {
+        throw new Error(data.paymentIntent.last_payment_error.message);
+      }
+
+      result = data;
+
+      return (
+        data.checkoutSession?.status === 'complete' &&
+        ['paid', 'no_payment_required'].includes(data.checkoutSession?.payment_status)
+      );
+    },
+    { interval: 2000, timeout: 3 * 60 * 1000 }
+  );
+
+  // @ts-ignore
+  return result;
+};
+
+type PageData = CheckoutContext & CheckoutCallbacks;
+
+PaymentForm.defaultProps = {};
+
+// FIXME: https://stripe.com/docs/elements/address-element
+// TODO: https://country-regions.github.io/react-country-region-selector/
+// 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,
+  mode,
+}: PageData) {
+  const theme = useTheme();
+  const { t } = useLocaleContext();
+  const { session, connect } = usePaymentContext();
+  const { control, getValues, setValue, handleSubmit } = useFormContext();
+  const [state, setState] = useSetState<{
+    submitting: boolean;
+    paying: boolean;
+    paid: boolean;
+    paymentIntent?: TPaymentIntent;
+    stripeContext?: {
+      client_secret: string;
+      intent_type: string;
+      status: string;
+    };
+    customer?: TCustomer;
+    stripePaying: boolean;
+  }>({
+    submitting: false,
+    paying: false,
+    paid: false,
+    paymentIntent,
+    stripeContext: undefined,
+    customer,
+    stripePaying: false,
+  });
+
+  useEffect(() => {
+    if (session.user) {
+      const values = getValues();
+      if (!values.customer_name) {
+        setValue('customer_name', session.user.fullName);
+      }
+      if (!values.customer_email) {
+        setValue('customer_email', session.user.email);
+      }
+      if (!values.customer_phone) {
+        setValue('customer_phone', session.user.phone);
+      }
+    }
+  }, [session.user, getValues, 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) {
+      if (domSize?.width <= theme.breakpoints.values.md) {
+        return true;
+      }
+    }
+    return false;
+  }, [domSize, theme]);
+
+  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) 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 {
+      const result = await waitForCheckoutComplete(checkoutSession.id);
+      setState({ paid: true, paying: false });
+      onPaid(result);
+    } catch (err) {
+      Toast.error(formatError(err));
+    } finally {
+      setState({ paying: false });
+    }
+  };
+
+  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,
+        stripeContext: result.data.stripeContext,
+        customer: result.data.customer,
+        submitting: false,
+      });
+
+      if (['arcblock', 'ethereum'].includes(method.type)) {
+        setState({ paying: true });
+        if (result.data.balance?.sufficient || result.data.delegation?.sufficient) {
+          await handleConnected();
+        } else {
+          connect.open({
+            action: checkoutSession.mode,
+            timeout: 5 * 60 * 1000,
+            extraParams: { checkoutSessionId: checkoutSession.id },
+            onSuccess: async () => {
+              connect.close();
+              await handleConnected();
+            },
+            onClose: () => {
+              connect.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: any) {
+      if (err.response?.data?.code) {
+        dispatch(`error.${err.response?.data?.code}`);
+      }
+      Toast.error(formatError(err));
+    } finally {
+      setState({ submitting: false });
+    }
+  };
+
+  const onAction = () => {
+    if (session.user) {
+      handleSubmit(onSubmit)();
+    } else {
+      session.login({
+        onSuccess: onUserLoggedIn,
+        extraParams: {},
+      });
+    }
+  };
+
+  const onStripeConfirm = async () => {
+    setState({ stripePaying: false, paying: true });
+    await handleConnected();
+  };
+
+  const onStripeCancel = () => {
+    setState({ stripePaying: false });
+  };
+
+  return (
+    <>
+      <Fade in>
+        <Stack className="cko-payment-contact">
+          <Stack direction="row" sx={{ mb: 1 }} alignItems="center" justifyContent="space-between">
+            <Typography sx={{ color: 'text.primary', fontWeight: 600 }}>{t('payment.checkout.contact')}</Typography>
+            {isColumnLayout || mode !== 'standalone' ? null : <UserButtons />}
+          </Stack>
+          <Stack direction="column" className="cko-payment-form" spacing={0}>
+            <FormInput
+              name="customer_name"
+              variant="outlined"
+              errorPosition="right"
+              rules={{
+                required: t('payment.checkout.required'),
+              }}
+              InputProps={{
+                startAdornment: <InputAdornment position="start">{t('payment.checkout.customer.name')}</InputAdornment>,
+              }}
+            />
+            <FormInput
+              name="customer_email"
+              variant="outlined"
+              errorPosition="right"
+              rules={{
+                required: t('payment.checkout.required'),
+                validate: (x) => (isEmail(x) ? true : t('payment.checkout.invalid')),
+              }}
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">{t('payment.checkout.customer.email')}</InputAdornment>
+                ),
+              }}
+            />
+            {checkoutSession.phone_number_collection?.enabled && (
+              <PhoneInput
+                name="customer_phone"
+                variant="outlined"
+                errorPosition="right"
+                placeholder="Phone number"
+                rules={{
+                  required: t('payment.checkout.required'),
+                  validate: (x: string) => {
+                    try {
+                      const parsed = phoneUtil.parseAndKeepRawInput(x);
+                      return phoneUtil.isValidNumber(parsed) ? true : t('payment.checkout.invalid');
+                    } catch {
+                      return t('payment.checkout.invalid');
+                    }
+                  },
+                }}
+              />
+            )}
+          </Stack>
+        </Stack>
+      </Fade>
+      <AddressForm mode={checkoutSession.billing_address_collection as string} stripe={method?.type === 'stripe'} />
+      <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>
+              )}
+            />
+            <Controller
+              name="payment_currency"
+              control={control}
+              render={({ field }) => (
+                <Select {...field} sx={{ flex: 1 }} size="small">
+                  {paymentCurrencies.map((x) => {
+                    const selected = x.id === paymentCurrency;
+                    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>
+                        </Stack>
+                      </MenuItem>
+                    );
+                  })}
+                </Select>
+              )}
+            />
+          </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>
+        <Stack className="cko-payment-submit">
+          <LoadingButton
+            variant="contained"
+            color="primary"
+            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}
+          </LoadingButton>
+          {['subscription', 'setup'].includes(checkoutSession.mode) && (
+            <Typography
+              sx={{ mt: 1, color: 'text.secondary', fontSize: '0.9rem', lineHeight: '1.1rem', textAlign: 'center' }}>
+              {t('payment.checkout.confirm', { payee })}
+            </Typography>
+          )}
+        </Stack>
+      </Fade>
+    </>
+  );
+}

package/src/payment/form/phone.tsx

@@ -0,0 +1,103 @@
+/* eslint-disable react/prop-types */
+import { InputAdornment, MenuItem, Select, Typography } from '@mui/material';
+import omit from 'lodash/omit';
+import { useEffect } from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { CountryIso2, FlagEmoji, defaultCountries, parseCountry, usePhoneInput } from 'react-international-phone';
+
+import FormInput from '../../components/input';
+import { isValidCountry } from '../../util';
+
+export default function PhoneInput({ ...props }) {
+  const countryFieldName = props.countryFieldName || 'billing_address.country';
+
+  const { control, getValues, setValue } = useFormContext();
+  const values = getValues();
+
+  const { phone, handlePhoneValueChange, inputRef, country, setCountry } = usePhoneInput({
+    defaultCountry: isValidCountry(values[countryFieldName]) ? values[countryFieldName] : 'us',
+    value: values[props.name] || '',
+    countries: defaultCountries,
+    onChange: (data) => {
+      setValue(props.name, data.phone);
+    },
+  });
+
+  const userCountry = useWatch({ control, name: countryFieldName });
+
+  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(countryFieldName, 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>
+        ),
+      }}
+      {...omit(props, ['countryFieldName'])}
+    />
+  );
+}

package/src/payment/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 '@blocklet/payment-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: any) {
+      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('payment.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('payment.checkout.cardPay', { action: t(`payment.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>
+  );
+}