payment-kit 1.13.111 → 1.13.113

package/src/pages/admin/payments/links/create.tsx

@@ -2,7 +2,8 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Tabs from '@arcblock/ux/lib/Tabs';
 import Toast from '@arcblock/ux/lib/Toast';
-import type { InferFormType, TPaymentLink } from '@did-pay/types';
+import { api, formatError, usePaymentContext } from '@blocklet/payment-react';
+import type { InferFormType, TPaymentLink } from '@blocklet/payment-types';
 import { AddOutlined } from '@mui/icons-material';
 import { Button, Stack, Typography } from '@mui/material';
 import { useEffect, useState } from 'react';
@@ -16,9 +17,6 @@ import BeforePay from '../../../../components/payment-link/before-pay';
 import PaymentLinkPreview from '../../../../components/payment-link/preview';
 import { ProductsProvider } from '../../../../contexts/products';
 import { useSessionContext } from '../../../../contexts/session';
-import { useSettingsContext } from '../../../../contexts/settings';
-import api from '../../../../libs/api';
-import { formatError } from '../../../../libs/util';
 
 type PaymentLink = InferFormType<TPaymentLink> & {
   include_free_trial: boolean;
@@ -30,7 +28,7 @@ export default function CreatePaymentLink() {
   const { session } = useSessionContext();
   const [current, setCurrent] = useState('beforePay');
   const [stashed, setStashed] = useState(0);
-  const { settings } = useSettingsContext();
+  const { settings } = usePaymentContext();
 
   const methods = useForm<PaymentLink>({
     shouldUnregister: false,

package/src/pages/admin/payments/links/detail.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import type { TLineItemExpanded, TPaymentLinkExpanded, TPrice, TProduct } from '@did-pay/types';
+import { api, formatError, formatTime, usePaymentContext } from '@blocklet/payment-react';
+import type { TLineItemExpanded, TPaymentLinkExpanded, TPrice, TProduct } from '@blocklet/payment-types';
 import { ArrowBackOutlined, Edit } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Grid, Stack, Typography } from '@mui/material';
 import { styled } from '@mui/system';
@@ -20,9 +21,7 @@ import PaymentLinkPreview from '../../../../components/payment-link/preview';
 import AddPrice from '../../../../components/product/add-price';
 import SectionHeader from '../../../../components/section/header';
 import Table from '../../../../components/table';
-import { useSettingsContext } from '../../../../contexts/settings';
-import api from '../../../../libs/api';
-import { formatError, formatPaymentLinkPricing, formatProductPrice, formatTime } from '../../../../libs/util';
+import { formatPaymentLinkPricing, formatProductPrice } from '../../../../libs/util';
 
 const fetchData = (id: string): Promise<TPaymentLinkExpanded> => {
   return api.get(`/api/payment-links/${id}`).then((res) => res.data);
@@ -31,7 +30,7 @@ const fetchData = (id: string): Promise<TPaymentLinkExpanded> => {
 export default function PaymentLinkDetail(props: { id: string }) {
   const { t, locale } = useLocaleContext();
   const navigate = useNavigate();
-  const { settings } = useSettingsContext();
+  const { settings } = usePaymentContext();
   const [state, setState] = useSetState({
     adding: {
       price: false,

package/src/pages/admin/payments/links/index.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { getDurableData } from '@arcblock/ux/lib/Datatable';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import type { TPaymentLinkExpanded } from '@did-pay/types';
+import { Status, api, formatTime, usePaymentContext } from '@blocklet/payment-react';
+import type { TPaymentLinkExpanded } from '@blocklet/payment-types';
 import { Alert, CircularProgress, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
 import { useRequest } from 'ahooks';
 import { useEffect, useState } from 'react';
@@ -11,12 +12,9 @@ import useBus from 'use-bus';
 
 import Copyable from '../../../../components/copyable';
 import PaymentLinkActions from '../../../../components/payment-link/actions';
-import Status from '../../../../components/status';
 import Table from '../../../../components/table';
 import { ProductsProvider } from '../../../../contexts/products';
-import { useSettingsContext } from '../../../../contexts/settings';
-import api from '../../../../libs/api';
-import { formatPaymentLinkPricing, formatTime } from '../../../../libs/util';
+import { formatPaymentLinkPricing } from '../../../../libs/util';
 
 const fetchData = (params: Record<string, any> = {}): Promise<{ list: TPaymentLinkExpanded[]; count: number }> => {
   const search = new URLSearchParams();
@@ -29,7 +27,7 @@ const fetchData = (params: Record<string, any> = {}): Promise<{ list: TPaymentLi
 function PaymentLinks() {
   const listKey = 'payment-links';
   const { t } = useLocaleContext();
-  const { settings } = useSettingsContext();
+  const { settings } = usePaymentContext();
   const navigate = useNavigate();
 
   const persisted = getDurableData(listKey);

package/src/pages/admin/products/passports/index.tsx

@@ -1,12 +1,12 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { api } from '@blocklet/payment-react';
 import { Alert, CircularProgress, Typography } from '@mui/material';
 import { useRequest } from 'ahooks';
 import { Link } from 'react-router-dom';
 
 import PassportActions from '../../../../components/passport/actions';
 import Table from '../../../../components/table';
-import api from '../../../../libs/api';
 
 const fetchData = (params: Record<string, any> = {}): Promise<any[]> => {
   const search = new URLSearchParams();

package/src/pages/admin/products/prices/actions.tsx

@@ -1,6 +1,7 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import type { TPrice } from '@did-pay/types';
+import { api, formatError } from '@blocklet/payment-react';
+import type { TPrice } from '@blocklet/payment-types';
 import { useSetState } from 'ahooks';
 import noop from 'lodash/noop';
 import { useNavigate } from 'react-router-dom';
@@ -8,8 +9,6 @@ import { useNavigate } from 'react-router-dom';
 import Actions from '../../../../components/actions';
 import ConfirmDialog from '../../../../components/confirm';
 import EditPrice from '../../../../components/product/edit-price';
-import api from '../../../../libs/api';
-import { formatError } from '../../../../libs/util';
 
 type Props = {
   data: TPrice;

package/src/pages/admin/products/prices/detail.tsx

@@ -1,6 +1,7 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import type { TPrice, TPriceExpanded } from '@did-pay/types';
+import { api, formatError, formatPrice, formatTime } from '@blocklet/payment-react';
+import type { TPrice, TPriceExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined, Edit } from '@mui/icons-material';
 import { Alert, AlertTitle, Box, Button, CircularProgress, Grid, Stack, Typography } from '@mui/material';
 import { styled } from '@mui/system';
@@ -18,8 +19,6 @@ import PriceUpsell from '../../../../components/price/upsell';
 import EditPrice from '../../../../components/product/edit-price';
 import SectionHeader from '../../../../components/section/header';
 import Table from '../../../../components/table';
-import api from '../../../../libs/api';
-import { formatError, formatPrice, formatTime } from '../../../../libs/util';
 import PriceActions from './actions';
 
 const fetchData = (id: string): Promise<TPriceExpanded> => {

package/src/pages/admin/products/prices/list.tsx

@@ -1,20 +1,18 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Status, formatPrice, formatTime, usePaymentContext } from '@blocklet/payment-react';
 import { LockOutlined } from '@mui/icons-material';
 import { Stack, Tooltip, Typography } from '@mui/material';
 import { Link } from 'react-router-dom';
 
 import Copyable from '../../../../components/copyable';
 import type { Product } from '../../../../components/product/form';
-import Status from '../../../../components/status';
 import Table from '../../../../components/table';
-import { useSettingsContext } from '../../../../contexts/settings';
-import { formatPrice, formatTime } from '../../../../libs/util';
 import PriceActions from './actions';
 
 export default function PricesList({ product, onChange }: { product: Product; onChange: Function }) {
   const { t, locale } = useLocaleContext();
-  const { settings } = useSettingsContext();
+  const { settings } = usePaymentContext();
 
   const columns = [
     {

package/src/pages/admin/products/pricing-tables/create.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable no-nested-ternary */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import type { TPricingTable } from '@did-pay/types';
+import { api, formatError } from '@blocklet/payment-react';
+import type { TPricingTable } from '@blocklet/payment-types';
 import { AddOutlined } from '@mui/icons-material';
 import { Box, Button, Stack, Typography } from '@mui/material';
 import { useEffect, useState } from 'react';
@@ -16,8 +17,6 @@ import PricingTablePreview from '../../../../components/pricing-table/preview';
 import PricingTableProductSettings from '../../../../components/pricing-table/product-settings';
 import { ProductsProvider } from '../../../../contexts/products';
 import { useSessionContext } from '../../../../contexts/session';
-import api from '../../../../libs/api';
-import { formatError } from '../../../../libs/util';
 
 export default function CreatePricingTable() {
   const { t } = useLocaleContext();

package/src/pages/admin/products/pricing-tables/detail.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import type { TPricingTableExpanded, TProduct } from '@did-pay/types';
+import { api, formatError, formatTime, usePaymentContext } from '@blocklet/payment-react';
+import type { TPricingTableExpanded, TProduct } from '@blocklet/payment-types';
 import { ArrowBackOutlined, Edit } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Grid, Stack, Typography } from '@mui/material';
 import { styled } from '@mui/system';
@@ -19,9 +20,7 @@ import PricingTableActions from '../../../../components/pricing-table/actions';
 import PricingTablePreview from '../../../../components/pricing-table/preview';
 import SectionHeader from '../../../../components/section/header';
 import Table from '../../../../components/table';
-import { useSettingsContext } from '../../../../contexts/settings';
-import api from '../../../../libs/api';
-import { formatError, formatProductPrice, formatTime } from '../../../../libs/util';
+import { formatProductPrice } from '../../../../libs/util';
 
 const fetchData = (id: string): Promise<TPricingTableExpanded> => {
   return api.get(`/api/pricing-tables/${id}`).then((res) => res.data);
@@ -30,7 +29,7 @@ const fetchData = (id: string): Promise<TPricingTableExpanded> => {
 export default function PricingTableDetail(props: { id: string }) {
   const { t, locale } = useLocaleContext();
   const navigate = useNavigate();
-  const { settings } = useSettingsContext();
+  const { settings } = usePaymentContext();
   const [state, setState] = useSetState({
     adding: {
       price: false,

package/src/pages/admin/products/pricing-tables/index.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { getDurableData } from '@arcblock/ux/lib/Datatable';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import type { TPricingTableExpanded } from '@did-pay/types';
+import { Status, api, formatTime } from '@blocklet/payment-react';
+import type { TPricingTableExpanded } from '@blocklet/payment-types';
 import { Alert, CircularProgress, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
 import { useRequest } from 'ahooks';
 import { useEffect, useState } from 'react';
@@ -11,11 +12,8 @@ import useBus from 'use-bus';
 
 import Copyable from '../../../../components/copyable';
 import PricingTableActions from '../../../../components/pricing-table/actions';
-import Status from '../../../../components/status';
 import Table from '../../../../components/table';
 import { ProductsProvider } from '../../../../contexts/products';
-import api from '../../../../libs/api';
-import { formatTime } from '../../../../libs/util';
 
 const fetchData = (params: Record<string, any> = {}): Promise<{ list: TPricingTableExpanded[]; count: number }> => {
   const search = new URLSearchParams();

package/src/pages/admin/products/products/create.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable no-nested-ternary */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
+import { api, formatError, formatPrice, usePaymentContext } from '@blocklet/payment-react';
 import { AddOutlined } from '@mui/icons-material';
 import { Box, Button, Divider, Typography } from '@mui/material';
 import { cloneDeep } from 'lodash';
@@ -13,13 +14,10 @@ import DrawerForm from '../../../../components/drawer-form';
 import PriceActions from '../../../../components/price/actions';
 import PriceForm, { DEFAULT_PRICE } from '../../../../components/price/form';
 import ProductForm, { Product } from '../../../../components/product/form';
-import { useSettingsContext } from '../../../../contexts/settings';
-import api from '../../../../libs/api';
-import { formatError, formatPrice } from '../../../../libs/util';
 
 export default function ProductsCreate() {
   const { t, locale } = useLocaleContext();
-  const { settings } = useSettingsContext();
+  const { settings } = usePaymentContext();
 
   const methods = useForm<Product>({
     defaultValues: {

package/src/pages/admin/products/products/detail.tsx

@@ -1,6 +1,7 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import type { TPrice, TProduct, TProductExpanded } from '@did-pay/types';
+import { api, formatError, formatTime, usePaymentContext } from '@blocklet/payment-react';
+import type { TPrice, TProduct, TProductExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined, Edit } from '@mui/icons-material';
 import { Alert, AlertTitle, Box, Button, CircularProgress, Grid, Stack, Typography } from '@mui/material';
 import { styled } from '@mui/system';
@@ -19,9 +20,7 @@ import AddPrice from '../../../../components/product/add-price';
 import ProductCrossSell from '../../../../components/product/cross-sell';
 import EditProduct from '../../../../components/product/edit';
 import SectionHeader from '../../../../components/section/header';
-import { useSettingsContext } from '../../../../contexts/settings';
-import api from '../../../../libs/api';
-import { formatError, formatProductPrice, formatTime } from '../../../../libs/util';
+import { formatProductPrice } from '../../../../libs/util';
 import PricesList from '../prices/list';
 
 const getProduct = (id: string): Promise<TProductExpanded> => {
@@ -31,7 +30,7 @@ const getProduct = (id: string): Promise<TProductExpanded> => {
 export default function ProductDetail(props: { id: string }) {
   const { t, locale } = useLocaleContext();
   const navigate = useNavigate();
-  const { settings } = useSettingsContext();
+  const { settings } = usePaymentContext();
   const [state, setState] = useSetState({
     adding: {
       price: false,

package/src/pages/admin/products/products/index.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { getDurableData } from '@arcblock/ux/lib/Datatable';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import type { TProductExpanded } from '@did-pay/types';
+import { Status, api, formatTime, usePaymentContext } from '@blocklet/payment-react';
+import type { TProductExpanded } from '@blocklet/payment-types';
 import { Alert, CircularProgress, ToggleButton, ToggleButtonGroup } from '@mui/material';
 import { useRequest } from 'ahooks';
 import { useEffect, useState } from 'react';
@@ -10,11 +11,8 @@ import useBus from 'use-bus';
 
 import InfoCard from '../../../../components/info-card';
 import ProductActions from '../../../../components/product/actions';
-import Status from '../../../../components/status';
 import Table from '../../../../components/table';
-import { useSettingsContext } from '../../../../contexts/settings';
-import api from '../../../../libs/api';
-import { formatProductPrice, formatTime } from '../../../../libs/util';
+import { formatProductPrice } from '../../../../libs/util';
 
 const fetchData = (params: Record<string, any> = {}): Promise<{ list: TProductExpanded[]; count: number }> => {
   const search = new URLSearchParams();
@@ -30,7 +28,7 @@ export default function ProductsList() {
 
   const { t, locale } = useLocaleContext();
   const navigate = useNavigate();
-  const { settings } = useSettingsContext();
+  const { settings } = usePaymentContext();
   const [search, setSearch] = useState<{ active: string; pageSize: number; page: number }>({
     active: '',
     pageSize: persisted.rowsPerPage || 20,

package/src/pages/admin/settings/index.tsx

@@ -1,7 +1,7 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Tabs from '@arcblock/ux/lib/Tabs';
 import { Stack, Typography } from '@mui/material';
-import React, { isValidElement } from 'react';
+import React, { isValidElement, startTransition } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 const PaymentMethodCreate = React.lazy(() => import('./payment-methods/create'));
@@ -18,7 +18,9 @@ export default function SettingsIndex() {
   const { page = 'payment-methods' } = useParams();
 
   const onTabChange = (newTab: string) => {
-    navigate(`/admin/settings/${newTab}`);
+    startTransition(() => {
+      navigate(`/admin/settings/${newTab}`);
+    });
   };
 
   // @ts-ignore

package/src/pages/admin/settings/payment-methods/create.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable no-nested-ternary */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import type { TPaymentMethod } from '@did-pay/types';
+import { api, formatError, usePaymentContext } from '@blocklet/payment-react';
+import type { TPaymentMethod } from '@blocklet/payment-types';
 import { AddOutlined } from '@mui/icons-material';
 import { Button, Typography } from '@mui/material';
 import { FormProvider, useForm } from 'react-hook-form';
@@ -9,13 +10,10 @@ import { dispatch } from 'use-bus';
 
 import DrawerForm from '../../../../components/drawer-form';
 import PaymentMethodForm from '../../../../components/payment-method/form';
-import { useSettingsContext } from '../../../../contexts/settings';
-import api from '../../../../libs/api';
-import { formatError } from '../../../../libs/util';
 
 export default function PaymentMethodCreate() {
   const { t } = useLocaleContext();
-  const settings = useSettingsContext();
+  const settings = usePaymentContext();
 
   const methods = useForm<TPaymentMethod>({
     defaultValues: {

package/src/pages/admin/settings/payment-methods/index.tsx

@@ -1,5 +1,6 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import type { TPaymentMethodExpanded } from '@did-pay/types';
+import { Switch, api } from '@blocklet/payment-react';
+import type { TPaymentMethodExpanded } from '@blocklet/payment-types';
 import { Alert, Box, CircularProgress, Grid, Typography } from '@mui/material';
 import { useRequest } from 'ahooks';
 import useBus from 'use-bus';
@@ -7,8 +8,6 @@ import useBus from 'use-bus';
 import IconCollapse from '../../../../components/collapse';
 import InfoCard from '../../../../components/info-card';
 import InfoRow from '../../../../components/info-row';
-import Switch from '../../../../components/switch';
-import api from '../../../../libs/api';
 
 const getMethods = (params: Record<string, any> = {}): Promise<TPaymentMethodExpanded[]> => {
   const search = new URLSearchParams();

package/src/pages/checkout/index.tsx

@@ -1,8 +1,9 @@
+import { PaymentProvider } from '@blocklet/payment-react';
 import { Box } from '@mui/material';
 import React from 'react';
 import { useParams } from 'react-router-dom';
 
-import { SettingsProvider } from '../../contexts/settings';
+import { useSessionContext } from '../../contexts/session';
 
 const pages = {
   pay: React.lazy(() => import('./pay')),
@@ -23,9 +24,11 @@ function Checkout() {
 }
 
 export default function WrappedAdmin() {
+  const { session, connectApi } = useSessionContext();
+
   return (
-    <SettingsProvider>
+    <PaymentProvider session={session} connect={connectApi}>
       <Checkout />
-    </SettingsProvider>
+    </PaymentProvider>
   );
 }

package/src/pages/checkout/pay.tsx

@@ -1,91 +1,27 @@
-import type {
-  TCheckoutSessionExpanded,
-  TCustomer,
-  TPaymentIntent,
-  TPaymentLink,
-  TPaymentMethodExpanded,
-} from '@did-pay/types';
-import { useRequest, useSetState } from 'ahooks';
-import { useEffect } from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
-
-import CheckoutPay from '../../components/checkout/pay';
-import api from '../../libs/api';
+import { Checkout } from '@blocklet/payment-react';
 
 type Props = {
   id: string;
 };
 
-type PageData = {
-  checkoutSession: TCheckoutSessionExpanded;
-  paymentMethods: TPaymentMethodExpanded[];
-  paymentLink?: TPaymentLink;
-  paymentIntent?: TPaymentIntent;
-  customer?: TCustomer;
-};
-
-const startFromPaymentLink = async (id: string, params: string): Promise<PageData> => {
-  const { data } = await api.post(`/api/checkout-sessions/start/${id}?${params}`);
-  return data;
-};
-
-const fetchCheckoutSession = async (id: string): Promise<PageData> => {
-  const { data } = await api.get(`/api/checkout-sessions/retrieve/${id}`);
-  return data;
-};
-
 export default function Payment({ id }: Props) {
-  const type = id.startsWith('plink_') ? 'paymentLink' : 'checkoutSession';
-
-  const navigate = useNavigate();
-  const [params] = useSearchParams();
-  const [state, setState] = useSetState({ completed: false, appError: null });
-
-  const { error: apiError, data } = useRequest(() =>
-    type === 'paymentLink' ? startFromPaymentLink(id, params.toString()) : fetchCheckoutSession(id)
-  );
-
-  useEffect(() => {
-    if (data && type === 'paymentLink') {
-      navigate(`/checkout/pay/${data.checkoutSession.id}`, { replace: true });
-    }
-  }, [type, data, navigate]);
-
-  const onPaid = () => {
-    setState({ completed: true });
+  const onPaid = (data: any) => {
     if (data?.checkoutSession?.success_url) {
       setTimeout(() => {
         const tmp = new URL(data.checkoutSession.success_url as string, window.location.origin);
         tmp.searchParams.set('checkout_session_id', data.checkoutSession.id);
-        window.location.href = tmp.href;
+        window.location.replace(tmp.href);
       }, 1000);
     } else if (data?.paymentLink) {
       if (data.paymentLink.after_completion?.type === 'redirect' && data.paymentLink.after_completion?.redirect?.url) {
         setTimeout(() => {
           const tmp = new URL(data.paymentLink?.after_completion?.redirect?.url as string, window.location.origin);
           tmp.searchParams.set('checkout_session_id', data.checkoutSession.id);
-          window.location.href = tmp.href;
+          window.location.replace(tmp.href);
         }, 1000);
       }
     }
   };
 
-  const onError = (err: any) => {
-    setState({ appError: err });
-    console.error(err);
-  };
-
-  return (
-    <CheckoutPay
-      checkoutSession={data?.checkoutSession}
-      paymentMethods={data?.paymentMethods}
-      paymentIntent={data?.paymentIntent}
-      paymentLink={data?.paymentLink}
-      customer={data?.customer}
-      completed={state.completed}
-      error={apiError || state.appError}
-      onPaid={onPaid}
-      onError={onError}
-    />
-  );
+  return <Checkout mode="standalone" id={id} onPaid={onPaid} />;
 }

package/src/pages/checkout/pricing-table.tsx

@@ -1,17 +1,13 @@
 import Center from '@arcblock/ux/lib/Center';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
+import { Livemode, PricingTable, ProductSkeleton, api } from '@blocklet/payment-react';
+import type { TPricingTableExpanded } from '@blocklet/payment-types';
 import Header from '@blocklet/ui-react/lib/Header';
-import type { TPricingTableExpanded } from '@did-pay/types';
 import { Alert, Box, Skeleton, Stack, Typography } from '@mui/material';
 import { useLocalStorageState, useRequest } from 'ahooks';
 import { useSearchParams } from 'react-router-dom';
 
-import PricingTable from '../../components/checkout/pricing-table';
-import Livemode from '../../components/livemode';
-import ProductSkeleton from '../../components/pricing-table/product-skeleton';
-import api from '../../libs/api';
-
 type Props = {
   id: string;
 };
@@ -105,7 +101,7 @@ export default function PricingTablePage({ id }: Props) {
           theme={undefined}
         />
         <Center relative="parent">
-          <Alert severity="warning">{t('checkout.noPricing')}</Alert>
+          <Alert severity="warning">{t('payment.checkout.noPricing')}</Alert>
         </Center>
       </Box>
     );

package/src/pages/customer/index.tsx

@@ -1,6 +1,7 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import type { TCustomerExpanded } from '@did-pay/types';
+import { formatError } from '@blocklet/payment-react';
+import type { TCustomerExpanded } from '@blocklet/payment-types';
 import { Edit } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Grid, Stack } from '@mui/material';
 import { styled } from '@mui/system';
@@ -15,7 +16,6 @@ import CurrentSubscriptions from '../../components/portal/subscription/list';
 import SectionHeader from '../../components/section/header';
 import { useSessionContext } from '../../contexts/session';
 import api from '../../libs/api';
-import { formatError } from '../../libs/util';
 
 const fetchData = (): Promise<TCustomerExpanded> => {
   return api.get('/api/customers/me').then((res) => res.data);
@@ -44,7 +44,7 @@ export default function CustomerHome() {
   if (!data) {
     return (
       <Alert sx={{ mt: 3 }} severity="info">
-        {t('customer.empty')}
+        {t('payment.customer.empty')}
       </Alert>
     );
   }
@@ -68,7 +68,7 @@ export default function CustomerHome() {
       <Grid item xs={12} md={8}>
         <Root direction="column" spacing={3} sx={{ my: 2 }}>
           <Box className="section">
-            <SectionHeader title={t('customer.subscriptions.current')} mb={0} />
+            <SectionHeader title={t('payment.customer.subscriptions.current')} mb={0} />
             <Box className="section-body">
               <CurrentSubscriptions
                 id={data.id}
@@ -83,7 +83,7 @@ export default function CustomerHome() {
             </Box>
           </Box>
           <Box className="section">
-            <SectionHeader title={t('customer.invoices')} mb={0} />
+            <SectionHeader title={t('payment.customer.invoices')} mb={0} />
             <Box className="section-body">
               <CustomerInvoiceList customer_id={data.id} />
             </Box>
@@ -93,7 +93,7 @@ export default function CustomerHome() {
       <Grid item xs={12} md={4}>
         <Root direction="column" spacing={4} sx={{ my: 2 }}>
           <Box className="section">
-            <SectionHeader title={t('customer.details')}>
+            <SectionHeader title={t('payment.customer.details')}>
               <Button
                 variant="outlined"
                 color="inherit"
@@ -101,7 +101,7 @@ export default function CustomerHome() {
                 disabled={state.editing || state.loading}
                 onClick={() => setState({ editing: true })}>
                 <Edit fontSize="small" sx={{ mr: 0.5 }} />
-                {t('customer.update')}
+                {t('payment.customer.update')}
               </Button>
             </SectionHeader>
             <Stack>