Overview

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!

Integrations - Previous

Discord Notification

Next - React SDK (Beta)

PaperCheckout

Last modified 8h ago

Copy link

Contents

0. Install the SDK

1. Create a checkout

2a. Take card payments

2b. Take cryptocurrency payments

Code samples