Quick Start
@blocklet/payment-react is a React component library designed for Blocklet applications. It integrates payment processing, subscription management, and tipping, seamlessly integrating with Blocklet's payment infrastructure.
This guide will take you through the process of setting up and running a simple payment component.
Requirements#
- Node.js and npm are installed.
- A Blocklet application environment that provides
sessionandconnectApiconfigurations. - (Optional) Payment Kit is deployed to support payment functionality (see the Payment Kit documentation).
Step 1: Install the Component Library#
Install @blocklet/payment-react in your React project using npm:
npm install @blocklet/payment-reactStep 2: Basic Integration#
Integrate the core components and configure the payment environment for your application. The following example shows a simple payment form:
import { PaymentProvider, CheckoutForm } from '@blocklet/payment-react';
function App() {
// Assume session and connectApi are obtained from your authentication system
const session = /* Retrieved from your auth service */;
const connectApi = /* Retrieved from Blocklet environment */;
return (
<PaymentProvider session={session} connect={connectApi}>
<CheckoutForm
id="plink_xxx" // Payment Link ID, provided by Payment Kit
mode="inline" // Inline display mode
showCheckoutSummary={true} // Show checkout summary
onChange={(state) => console.log('Checkout State:', state)} // Callback for state changes
/>
</PaymentProvider>
);
}
export default App;Key Configuration Details:#
session: Session data, typically retrieved from your authentication system.connectApi: The Blocklet Payment API. Ensure it is properly initialized.id: The payment link ID (e.g., `plink_xxx`), generated by the Payment Kit, uniquely identifies a specific payment process.
Step 3: Run and Test#
- Launch Project
npm startOpen the application in a browser to view the embedded payment form.
- Testing the Payment Flow
- Enter test data ( if using test mode, make sure
livemode=false). - Check the console output to verify that the
onChangethe callback is firing correctly.
With these steps, you can have payments up and running in your app in minutes! When you're ready, explore more advanced features to enhance your payment experience.
Explore More#
- Customize the styling: Use the
themeproperty to adjust the component's appearance. - Discover more components:
- CheckoutTable: Displays the pricing table.
- OverdueInvoicePayment: Handles overdue invoice payments.
- CheckoutDonate: Add a donation feature. See the Enable Donation Guide.