PayWithCard

Summary
<PayWithCard> is a React component that renders the card payment flow: 



This component will automatically render the card checkout experience. onSuccess is called when the user's payment is complete. Once the transaction is fully complete on-chain, Paper sends a transfer:succeeded webhook associated with the transaction.

Optional event callback functions onCancel and onError can be passed to handle events associated with this step.
​
​Try the interactive PayWithCard builder​
​
Code Samples
​See code samples of using PayWithCard​
​
Props
checkoutId: string 
Required
The ID of the Paper checkout created for the NFT you're selling.
See the Checkout API for more information about creating or fetching a checkout. 
recipientWalletAddress: string
Required
The public address of where the NFT will ultimately be received. If the user is using a Paper wallet, you may use the CreateWallet component to create a wallet for them, or if you already know the user has previously registered a Paper wallet, you may use /api/v1/wallet/:emailAddress to get the public wallet address associated with an email address.
emailAddress: string
Required
The email address of the user. We require this email to send useful information regarding the purchase (e.g. receipts).
onPaymentSuccess: () => void
Optional
This callback is invoked after Paper has successfully received payment from the buyer.
The NFT may not yet be transferred to the user. Use onTransferSuccess if you expect the NFT to be in the buyer's wallet.
onTransferSuccess: (result: TransferSuccessResult) => void
Optional
This callback is invoked after the NFT is successfully transferred to the buyer's wallet.
1
type TransferSuccessResult {
2
    contractAddress: string;
3
    tokenId: string;
4
    metadata: {
5
        ...NFT metadata
6
    }
7
}
Copied!
onCancelled: () => void
Optional
This callback is invoked when the buyer closes this flow without completing the payment.
onError: (error: PaperSDKError) => void
Optional
This callback is invoked if there is any error in the purchase process. An error reason is passed in as an argument to this function.
options: Object
Optional
1
{
2
    width: number;
3
    height: number;
4
    ...
5
}
Copied!
width: number (default = 400px)
The width of the checkout. Valid for POPUP, MODAL, DRAWER.
height: number (default = 800px)
The height of the checkout. Valid for POPUP, MODAL.
colorPrimary: string (in hex, e.g. #cf3781)
The primary brand color for buttons and links.
colorBackground: string (in hex)
The background color of the page.
colorText: string (in hex)
The color for text on the page and UI elements.
borderRadius: string (e.g. 0 for sharp corners, 12px for rounded corners, 24px for pill shape)
The roundness of buttons and input elements.
fontFamily: string (COMING SOON)
Any valid font family from fontsource.
​