Used to check for browser translation.
用于检测浏览器翻译。
ブラウザの翻訳を検出する

Getting Started

This guide provides a step-by-step walkthrough to get you up and running with @blocklet/payment-react. You will learn how to install the library, set up the essential PaymentProvider, and render your first payment form using the CheckoutForm component.

1. Installation#

First, add the library to your project using npm or your preferred package manager.

npm install @blocklet/payment-react

2. Set up PaymentProvider#

Most components in @blocklet/payment-react require access to payment context, such as user session information and API configuration. The PaymentProvider component provides this context to all its children. You should wrap it around the root of your application or at least the section that handles payments.

PaymentProvider requires two key props:

  • session: The user's session object, typically from an authentication library like @arcblock/did-connect-react.
  • connect: The DID Connect API instance for handling authentication-related actions.
import { PaymentProvider } from '@blocklet/payment-react';

// These would come from your application's authentication state
const session = getSessionFromYourAuthSystem();
const connectApi = getConnectApiFromYourAuthSystem();

function App() {
return (
<PaymentProvider session={session} connect={connectApi}>
{/* Your payment components will go here */}
</PaymentProvider>
);
}

3. Add a Checkout Form#

The CheckoutForm is the primary component for building a payment flow. It renders a complete payment interface based on a paymentLink ID (plink_...) or checkoutSession ID (cs_...) that you create in your payment service dashboard.

Here is a basic example of how to embed a payment form directly into your user interface.

Complete Example#

This example combines the PaymentProvider and CheckoutForm to create a minimal, functional payment page. You just need to provide a valid Payment Link ID.

import React from 'react';
import { PaymentProvider, CheckoutForm } from '@blocklet/payment-react';

// Assume session and connectApi are obtained from your app's auth context

function MyPaymentPage() {
const session = { user: { did: 'z...' } }; // Replace with actual session object
const connectApi = {}; // Replace with actual connect API instance

return (
<PaymentProvider session={session} connect={connectApi}>
<CheckoutForm
id="plink_xxx" // Replace with your actual Payment Link ID
mode="inline" // Embeds the form directly in your UI
showCheckoutSummary={true}
onChange={(state) => console.log('Checkout State:', state)}
/>
</PaymentProvider>
);
}

export default MyPaymentPage;

In this example:

  • We wrap CheckoutForm with PaymentProvider to provide the necessary context.
  • The id prop is set to a Payment Link ID. This is required.
  • mode="inline" renders the form within the current page flow.
  • showCheckoutSummary={true} displays a summary of what the user is paying for.
  • The onChange callback allows you to monitor the state of the checkout process, which can be useful for debugging or analytics.

Next Steps#

You have now successfully integrated a basic payment form. To learn more about configuring the context for your payment components, see the Providers section. To explore the full range of available UI and business logic components, head over to the Components documentation.

previous
Overview
next
Providers