Paper Checkout
Search…
Overview
Quick summary on getting started with our React SDK
Our React SDK is currently in beta. Please join our Discord and reach out if you have any questions for the team.

0. Install the SDK

Install this SDK with npm or yarn:
npm install @paperxyz/react-client-sdk OR yarn add @paperxyz/react-client-sdk

1. Create a checkout

A Checkout is what we use to keep track of config and various states associated with the NFT collection that you are trying to sell (i.e. the contract address, the price, etc.). Make an authenticated POST request to https://paper.xyz/api/v1/checkout on your backend to create a new Checkout, and store the ID given in the response for future use in the SDK. You'll need to have a developer key set up with us first. See the Checkout API for more details.

2a. Take card payments

(Optional) Use the CreateWallet component first for users who don't have a crypto wallet Required props: - The email address to verify - The onSuccess callback handler - execute your flow for displaying the PayWithCard component inside this handler once a wallet is successfully generated. Display the PayWithCard component Required props: - The Paper checkout ID from step 1 - The recipient wallet address - The onSuccess callback handler: invoked when the payment is completed and a job to transfer the NFT is enqueued See the PayWithCard page for more details on how the flow works.

2b. Take cryptocurrency payments

Required props: - The Paper checkout ID from step 1 - The recipient wallet address - The onSuccess callback handler: invoked when the payment is completed and a job to transfer the NFT is enqueued See the PayWithCrypto page for more details on how the flow works.

Code samples

Here are some quick code samples on getting started with PayWithCard. Backend (Node.js/Next.js) - Call the Checkout API​
/api/paper/checkout.ts
1
// Handler for `/api/paper/checkout` to create a new checkout
2
export default async function handler(req, res) {
3
const paperCheckoutResp = await fetch(
4
`https://paper.xyz/api/v1/checkout`,
5
{
6
method: 'POST',
7
headers: {
8
// Never expose this API key on the client side!
9
Authorization: `Bearer <YOUR_PAPER_API_KEY>`,
10
'Content-Type': 'application/json',
11
},
12
body: JSON.stringify({
13
contractChain: "Polygon",
14
contractAddress: "<YOUR_CONTRACT_ADDRESS>",
15
contractType: "<YOUR_CONTRACT_TYPE>",
16
collectionTitle: "My Amazing NFT Collection",
17
priceValue: 1,
18
priceCurrency: 'MATIC',
19
}),
20
},
21
);
22
const { result } = await paperCheckoutResp.json();
23
24
const checkoutId = result.id;
25
// Save this checkoutId in order to render the
26
// PayWithCard and PayWithCrypto components.
27
28
return res.status(200).json({
29
checkoutId,
30
});
31
}
32
​
Copied!
​
Frontend (React) - Simple PayWithCard example
1
function PayWithCardExample() {
2
const [paperCheckoutId, setPaperCheckoutId] = useState<string>();
3
const [message, setMessage] = useState<string>();
4
5
useEffect(() => {
6
(async () => {
7
// Fetch the Paper checkout ID from your backend
8
const checkoutFetch = await fetch('/api/paper/checkout', {
9
method: 'POST',
10
headers: {
11
'Content-Type': 'application/json',
12
},
13
body: JSON.stringify({
14
// Potentially some params you want to pass to tell
15
// your backend which Paper checkout you want to get.
16
}),
17
});
18
const { checkoutId } = await checkoutFetch.json();
19
setPaperCheckoutId(checkoutId);
20
})();
21
}, []);
22
​
23
​
24
const onPayWithCardTransferSuccess = (result: TransferSuccessResult) => {
25
setMessage(`Transaction succeeded!`);
26
};
27
28
const onPayWithCardError = (error: PaperSDKError) => {
29
setMessage(`Something went wrong! ${error}`);
30
};
31
​
32
return (
33
<PaperSDKProvider chainName='Polygon'>
34
<PayWithCard
35
checkoutId={paperCheckoutId}
36
recipientWalletAddress='0x927a5D4d0e720379ADb53a895f8755D327faF0F5'
37
emailAddress='[email protected]'
38
onTransferSuccess={onPayWithCardTransferSuccess}
39
onError={onPayWithCardError}
40
/>
41
{message}
42
</PaperSDKProvider>
43
);
44
}
Copied!
​
Frontend (React) - PayWithCard example with CreateWallet​
1
function PayWithCardWithCreateWalletExample() {
2
const [emailAddress, setEmailAddress] = useState<string>();
3
const [walletAddress, setWalletAddress] = useState<string>();
4
const [paperCheckoutId, setPaperCheckoutId] = useState<string>();
5
const [message, setMessage] = useState<string>();
6
const [showPayWithCard, setShowPayWithCard] = useState<boolean>();
7
8
useEffect(() => {
9
(async () => {
10
// Fetch the Paper checkout ID from your backend
11
const checkoutFetch = await fetch('/api/paper/checkout', {
12
method: 'POST',
13
headers: {
14
'Content-Type': 'application/json',
15
},
16
body: JSON.stringify({
17
// Potentially some params you want to pass to tell
18
// your backend which Paper checkout you want to get.
19
}),
20
});
21
const { checkoutId } = await checkoutFetch.json();
22
setPaperCheckoutId(checkoutId);
23
})();
24
}, []);
25
​
26
​
27
const onPayWithCardTransferSuccess = (result: TransferSuccessResult) => {
28
setMessage(`Transaction succeeded!`);
29
};
30
31
const onPayWithCardError = (error: PaperSDKError) => {
32
setMessage(`Something went wrong! ${error}`);
33
};
34
​
35
const onCreateWalletSuccess = (paperUser: PaperUser) => {
36
setWalletAddress(paperUser.walletAddress);
37
setEmailAddress(paperUser.emailAddress);
38
setShowPayWithCard(true);
39
};
40
41
const onCreateWalletError = (error: PaperSDKError) => {
42
setMessage(`Your email could not be verified.`);
43
};
44
​
45
return (
46
<PaperSDKProvider chainName='Polygon'>
47
<input
48
placeholder='Email address'
49
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
50
setEmailAddress(e.target.value);
51
}}
52
/>
53
<CreateWallet
54
emailAddress={emailAddress}
55
onSuccess={onCreateWalletSuccess}
56
onError={onCreateWalletError}
57
/>
58
​
59
{showPayWithCard &&
60
<PayWithCard
61
checkoutId={paperCheckoutId}
62
recipientWalletAddress={walletAddress}
63
emailAddress={emailAddress}
64
onTransferSuccess={onPayWithCardTransferSuccess}
65
onError={onPayWithCardError}
66
/>
67
}
68
​
69
{message}
70
</PaperSDKProvider>
71
);
72
}
73
​
74
​
Copied!