Introduction

In this quickstart you’ll learn how to accept various cryptocurrencies using Crossmint’s headless APIs, to purchase an NFT on the polygon-amoy testnet

Prerequisites

  1. Create a developer account in the Staging Console.
  2. Create a new collection or import yours into the console and have your projectId and collectionId ready.

To integrate in production/mainnet, you'll also need to complete account and collection verification. More information on the production launch guide.

For EVM, this guide uses a collection deployed from the Crossmint developer console, which only requires a recipient parameter. For more advanced contracts, check the SDK reference.

  1. Create a client-side API key with the orders.create scope enabled. More info on creating API keys here

Integration Steps

This quickstart will primarily focus on the API calls necessary to implement headless checkout in your project. You will also need to build out the frontend experience for your users.

1. Create an Order

The first step in the headless checkout process is to create an order. An Order is the object that represents an intent to purchase in Crossmint’s systems. This guide will create a basic order and then update it with required info step by step.

You can also create the entire order in one API call if the necessary information is available at the time of order creation, such as the NFT recipient and payer address.

POST https://staging.crossmint.com/api/2022-06-09/orders

{
    "payment": {
        "method": "base-sepolia",
        "currency": "eth",
        "payerAddress": "0xabcd1234..."
    },
    "lineItems": {
        "collectionLocator": "crossmint:<collectionId>",
        "callData": {
            "totalPrice": "0.0001"
        }
    }
}

In the requests above the payerAddress has been included, however if your user has not yet connected their wallet you may omit this field, allow them to connect their wallet after creating the order, and submit the payerAddress at a later time.

For the comprehensive list of supported currencies and chains, view the Supported Currencies page.

At this point you have successfully created an Order in the Crossmint system! The order is currently in the quote phase and is awaiting a recipient to be set, which will be done in the next step.

View the Order in the Console

Navigate to the Orders tab for your collection in the Staging Console and enter the orderId returned from your API response to search for the new order.

Crossmint Headless NFT Checkout - view order

2. Update the Order with Recipient

Next, you will set who’s the recipient of the order by specifying a wallet address or email. When a recipient is passed as an email, Crossmint will automatically create a custodial wallet associated with this email, that can be accessed by logging in to the (staging) Crossmint Wallet or from your website if you’re using whitelabel wallets.

PATCH https://staging.crossmint.com/api/2022-06-09/orders/<orderId>

{
    "recipient": {
        "email": "test@example.com"
    }
}

Notice you only need to pass the object that your are updating, in this case, recipient. You can also update multiple properties in the same call. Available properties for update include recipient, locale, and the payment object.

If specifying a recipient by wallet address, ensure the address is valid for the chain your collection is on, which may differ from the chain the payment is performed on.

Anytime you update an order you must use the returned serializedTransaction property. This is especially important if/when you update the payment method.

3. Show Purchase Preview to User

Within the returned response, you’ll find the lineItems array which contains the metadata and a quote for each line item. Within a quote, a detailed breakdown of its charges can be found.

preview purchase screenshot

4. Request Payment from User

The serializedTransaction returned in the previous step can be decoded and then structured back into a transaction object which can be passed to a function like viem’s sendTransaction or wagmi’s sendTransactionAsync.

This will open the default wallet extension in the browser and allow the user to complete the cross-chain payment.

If you’ve followed along this far you can simply paste the serializedTransaction property returned in your previous API call into the app below. This will allow you to sign and send the transaction and move onto the next step of polling for payment and delivery status.

5. Poll for Status Updates

After making the payment via MetaMask (or other wallet) you’ll need to poll the Get Order API to check on the delivery status and present this info to your user.

GET https://staging.crossmint.com/api/2022-06-09/orders/<orderId>

Next Steps

This product is gated in production. To get started, contact us.