@blocklet/payment-react

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);

Updates

theme

Since version 1.14.22, the component includes a built-in theme provider. If you need to modify the styles of internal components, you need to pass the theme property to override or inherit the external theme.

option	description
default [default value]	wrapped with built-in PaymentThemeProvider
inherit	use the parent component's themeProvider
PaymentThemeOptions	override some styles of PaymentThemeProvider

export type PaymentThemeOptions = ThemeOptions & {
  sx?: SxProps;
};

// 1. use themeOptions
<CheckoutForm
 id="plink_oB1I6FNeHKSkuq81fhJy0vIZ"
 onChange={console.info}
 theme={{
   components: {
     MuiButton: {
       styleOverrides: {
         containedPrimary: {
           backgroundColor: '#1DC1C7',
           color: '#fff',
           '&:hover': {
             backgroundColor: 'rgb(20, 135, 139)',
           },
         },
       },
     },
   },
 }}
/>

// 2. use theme sx
<CheckoutForm
 id="plink_oB1I6FNeHKSkuq81fhJy0vIZ"
 mode="inline-minimal"
 onChange={console.info}
 theme={{
   sx: {
     '.cko-submit-button': {
       backgroundColor: '#1DC1C7',
       color: '#fff',
       '&:hover': {
         backgroundColor: 'rgb(20, 135, 139)',
       },
     },
   },
 }}
/>

showCheckoutSummary

Since version 1.14.23, if you need to hide the product column, we recommend using showCheckoutSummary=false instead of mode=inline-minimal. We aim for better semantics.

// bad
<CheckoutForm
  id="plink_oB1I6FNeHKSkuq81fhJy0vIZ"
  mode="inline-minimal"
  onChange={console.info}
/>

// good
<CheckoutForm
  id="plink_oB1I6FNeHKSkuq81fhJy0vIZ"
  showCheckoutSummary={false}
  onChange={console.info}
/>