@blocklet/payment-react v1.13.238

Payment Kit Components

import { CheckoutForm, CheckoutTable, PaymentProvider } from '@blocklet/payment-react';
import { Paper, Typography } from '@mui/material';
import React from 'react';
import { useSearchParams } from 'react-router-dom';

import { useSessionContext } from '../contexts/session';

export default function CheckoutPage() {
  const [params] = useSearchParams();
  const { session, connectApi } = useSessionContext();

  if (params.get('type') === 'session') {
    return (
      <PaymentProvider session={session} connect={connectApi}>
        <Typography variant="h4" gutterBottom>
          Checkout with session
        </Typography>
        <Paper sx={{ p: 3, display: 'inline-block' }} elevation={3}>
          <CheckoutForm id="cs_9zeD2yCgPXT9Vit9bab2vVC3V7DFjHiKvyoLzVTVzAf4XSU2oLWY67vKy7" mode="inline" />
        </Paper>
      </PaymentProvider>
    );
  }

  if (params.get('type') === 'link') {
    return (
      <PaymentProvider session={session} connect={connectApi}>
        <Typography variant="h4" gutterBottom>
          Checkout with payment link
        </Typography>
        <Paper sx={{ p: 3, display: 'inline-block' }} elevation={3}>
          <CheckoutForm id="plink_oB1I6FNeHKSkuq81fhJy0vIZ" mode="inline" />
        </Paper>
      </PaymentProvider>
    );
  }

  if (params.get('type') === 'table') {
    return (
      <PaymentProvider session={session} connect={connectApi}>
        <Typography variant="h4" gutterBottom>
          Checkout with pricing table
        </Typography>
        <Paper sx={{ p: 3, display: 'inline-block' }} elevation={3}>
          <CheckoutTable id="prctbl_kOsaIiPrsHAwwALaKgy17mIl" mode="inline" />
        </Paper>
      </PaymentProvider>
    );
  }

  return null;
}

I18n

import { createTranslator, translations as extraTranslations } from '@blocklet/payment-react';
import merge from 'lodash/merge';

import en from './en';
import zh from './zh';

// eslint-disable-next-line import/prefer-default-export
export const translations = merge({ zh, en }, extraTranslations);