@blocklet/payment-react
v1.13.261
Published
Reusable react components for payment kit v2
Downloads
2,827
Readme
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);