CheckoutWithCard is the easiest way to embed a credit card form onto your own website.
CheckoutWithCard reviewing card details
To create an instance of the CheckoutWithCard component, you must first create a Checkout SDK intent using the Checkout SDK Intent API. The purpose of the SDK intent is to set the properties of this specific instance of the card form. After creating an intent using the Checkout SDK Intent API, pass the returned SDK Client Secret to the CheckoutWithCard prop in the sdkClientSecret prop.
📘 Quickstart
Check out (pun intended) the interactive CheckoutWithCard builder.
Example Usage
import {CheckoutWithCard, NFTgateSDKProvider} from "@nftgate/react-client-sdk";
import "@nftgate/react-client-sdk/dist/index.css";
<NFTgateSDKProvider appName='My Web3 App' chainName="Polygon">
<CheckoutWithCard // Generate a client secret with the Create Checkout SDK Intent API.
sdkClientSecret='eyJhbG...'
onPaymentSuccess={(result) => { ... }}
onReview={(result) => { ... }}
onError={(error) => { ... }}
options={{
colorBackground: '#121212',
colorPrimary: '#19A8D6',
colorText: '#f0f0f0',
borderRadius: 30,
}} />
</NFTgateSDKProvider>
🚧
Note that NFTgateSDKProvider and the CSS imports!
Make sure to:
Wrap your CheckoutWithCard form with the NFTgateSDKProvider .
Import the CSS stylesheets for the styling used in the checkout.
Props
| Prop | Type | Description |
|---|---|---|
| sdkClientSecret * | string | This should be JWT token that you generate by using your backed to call checkout-sdk-intent either when server side rendering the page or on the client side as an API request to your own backend once the page loads. |
Callback Functions
The following callback function can be passed on as arguments within the PayWithCard component. See the name, type, and description for each prop in the table below.
| Callback Function | Type | Description |
|---|---|---|
| onPaymentSuccess * | (result: { id: string; }) => void | This method is called after NFTgate has successfully received payment from the buyer. |
| onReview | (result: { id: string; cardholderName: string; }) => void | This method is called once the buyer presses the “Review” button with valid card details. |
| onError | (error: NFTgateSDKError => void | This method is called when an error is encountered. |
Customization
See Customizing Checkout Elements