CheckoutTable
The CheckoutTable component provides a complete, out-of-the-box solution for displaying a pricing table and handling the entire checkout flow. It fetches pricing table data by ID, allows users to select a plan, and then either redirects them to a checkout page or renders an inline payment form.
This component is a high-level abstraction that internally uses PricingTable for display and CheckoutForm for payment processing, simplifying the integration of subscription or one-time payment flows.
How It Works#
The component follows a clear, logical flow to guide the user from plan selection to payment completion.
Props#
The CheckoutTable component requires a PaymentProvider to be present in the component tree. For more details, refer to the PaymentProvider documentation.
Prop | Type | Required | Description |
|---|---|---|---|
|
| Yes | The ID of the pricing table to display. This must start with |
|
| No | Determines the checkout behavior. In |
|
| No | Callback function executed when the payment is successfully completed. It receives the final checkout session data. |
|
| No | Callback function executed if an error occurs during the payment process. |
|
| No | Callback function executed whenever the checkout session state changes (e.g., from |
|
| No | An object containing extra query parameters to be sent when creating the checkout session. |
|
| No | A function that is called when the user clicks the "back" button on the |
|
| No | A custom Material-UI theme object to style the component. Set to |
Usage Scenarios#
CheckoutTable can be configured for two primary user experiences: a full-page redirect or a seamless embedded flow.
Standalone Mode#
In standalone mode, the component handles plan selection and then redirects the user to a dedicated, hosted checkout page. This is the simplest way to integrate.
import { CheckoutTable, PaymentProvider } from '@blocklet/payment-react';
function MyPaymentPage() {
const paymentProps = {
serviceHost: 'https://payment.arcblock.io',
// other required provider props
};
return (
<PaymentProvider {...paymentProps}>
<div style={{ height: '600px', width: '100%' }}>
<CheckoutTable
id="prctbl_xxxxxxxxxxxx" // Replace with your actual pricing table ID
mode="standalone"
/>
</div>
</PaymentProvider>
);
}When a user clicks a subscription button in the pricing table, window.location.replace is called to navigate them to the checkout URL provided by the payment service API.
Embedded Mode#
In embedded mode (the default behavior), the entire checkout process happens within your application. After a plan is selected, the pricing table is replaced by the CheckoutForm component.
This mode relies on the URL hash (#) to store and retrieve the checkout session ID, enabling a smooth, single-page application experience.
import { CheckoutTable, PaymentProvider } from '@blocklet/payment-react';
function MyEmbeddedCheckout() {
const paymentProps = {
serviceHost: 'https://payment.arcblock.io',
// other required provider props
};
const handlePaymentSuccess = (checkoutData) => {
console.log('Payment successful!', checkoutData);
alert('Thank you for your payment!');
};
const handlePaymentError = (error) => {
console.error('Payment failed:', error);
alert('There was an issue with your payment.');
};
const handleGoBack = () => {
// The component handles clearing the URL hash internally.
// You can add custom logic here if needed.
console.log('User returned to the pricing table view.');
};
return (
<PaymentProvider {...paymentProps}>
<div style={{ height: '800px', width: '100%' }}>
<CheckoutTable
id="prctbl_xxxxxxxxxxxx" // Replace with your actual pricing table ID
onPaid={handlePaymentSuccess}
onError={handlePaymentError}
goBack={handleGoBack}
/>
</div>
</PaymentProvider>
);
}In this example:
- The
onPaidandonErrorcallbacks are used to handle the final state of the transaction. - The
goBackprop enables a back button on the payment form, allowing users to return to the plan selection screen without losing context.