Crossmint Digital Collectibles Checkout via Credit Card

The Crossmint integration with XION enables a seamless, credit card based NFT checkout experience. This is ideal for onboarding non-crypto native users into platforms where NFT assets are used, such as games, marketplaces, or digital collectibles.

Crossmint Staging Environment

To get started, create a Crossmint staging account so you can test the integration in a sandbox environment.

1. Go to https://staging.crossmint.com and click the "Console" button in the site header

1. You will be taken to the Signin page. Make sure "Staging" is selected and then enter your sign in details

1. If you're new, you'll be guided through the account creation process

2. Once your account is created you will be asked to create your first project

3. Once your project is created you will be taken to your console's overview page

Create API Key

From the sidebar, click "Integrate", then click "API Keys".

Server Key

A server key is intended for backend (server-side) applications and should not be used in frontend code, as doing so will result in CORS (Cross-Origin Resource Sharing) errors. In this guide, we will not be using a server key since we’re building a frontend application that interacts with the Crossmint API.

If you want to test Crossmint’s APIs using their API Reference, you’ll need to generate a server key to authorize your requests.

To create one, click “Create new key” under the “Server-side keys” section in the Crossmint Console.

Client Key

Click the "Create new key" button under the "Client-side keys" section. Select the following scope to enable order execution via Crossmint’s checkout:

• orders.create

Then click "Save client key" Your client key will now appear in the client key list.

Create Collection

The Crossmint team has enabled the creation of NFT collections directly within the Console. These collections are based on the CW-721 Metadata Onchain contract. You can also import a custom NFT contract, as long as it is built on the CW-721 Metadata Onchain standard.

To create your collection, follow these steps:

1. Click the "Token collections" link in the menu sidebar and then click the "New collection" button

1. Enter the collection information and click "Next"

2. On the "Create or import your collection contract" step select "Create a new contract" and then click "Next". If you have your own custom NFT contract select "Import an existing contract"

3. On the "What do you want to do with this collection?" section select "Sell NFTs" and click "Next"

4. On "Choose a chain" select "Xion" and click "Next"

5. On "Payment settings" enter a price for the collection, select who pays the fees and enter an address that will receive the revenue from sales

6. Review details and click the "Create collection" button to complete the process

Create an NFT

On the "Token collections" page select the collection created above. The NFTs tab is selected by default, click "manual upload" and in the window that pops up enter the NFT information.

Click the "Create NFT" button when done.

Update Checkout Settings

Click the "Checkout" tab and make sure the "NFT Price" and "Recipient address" are filled in and then click "Save changes".

Also make sure "Enable Credit Card payments" is enabled under "Payment methods".

Deploy a Treasury Contract

Before integrating the Abstraxion SDK into the application, we first need to deploy a Treasury Contract. This contract facilitates gasless transactions for your smart contract by handling fee grants on behalf of users as well as allowing users to grant authorization(s) to your app to execute certain transactions on their behalf.

Steps to Deploy a Treasury Contract

1. Login to the XION Developer Portal.

2. Click the "New Treasury" button to create a new treasury contract instance.

3. Select the appropriate configurations. The default "Fee Grant (Allowance)" and "Grant Config (Permission)" should be enough for this application.

You will then copy the treasury contract address which will be required in the frontend setup below.

Building the Frontend

We've created a frontend which is a Next.js application built to interact with the NFT smart contract created by the Crossmint platform. The frontend app can be downloaded at https://github.com/burnt-labs/xion-crossmint-hosted-checkout-frontend. It showcases how users can connect their wallets and purchase NFTs via Crossmint's hosted checkout solution.

Manual Installation

You will first need to clone the repository:

git clone https://github.com/burnt-labs/xion-crossmint-hosted-checkout-frontend

After doing so you will have to change into the newly created directory and then execute the steps below.

1. Install dependencies:

cd xion-crossmint-hosted-checkout-frontend
npm install

1. Copy the .env.example file and name it .env.local and set the values with the correct information:

NEXT_PUBLIC_TREASURY_ADDRESS=your_treasury_contract_address
NEXT_PUBLIC_RPC_URL="https://rpc.xion-testnet-2.burnt.com:443"
NEXT_PUBLIC_REST_URL="https://api.xion-testnet-2.burnt.com"
NEXT_PUBLIC_CROSSMINT_API_KEY=your_crossmint_api_key

1. Update collection list:

This list contains the NFT contract addresses and their corresponding collection IDs that users will be able to purchase. Open the src/app/collections.json file and add your collections using the following format:

{
  "collections": [
    {
      "id": "your-collection-id",
      "contractAddress": "your-nft-contract-address"
    }
  ]
} 

You can find the collection ID on the listing page for each collection. To copy it, simply click the copy icon next to the desired collection ID.

To find the NFT contract click on the collection and then click the "Smart contract" tab and copy the smart "Contract address".

1. Build and start the application:

npm run dev

You can now access the app at http://localhost:3000 in your browser.

Additional Resources

• Crossmint API Reference Full documentation for all Crossmint API endpoints and capabilities. https://docs.crossmint.com/api-reference/introduction

• Quickstart: Add a Pay Button A simple guide to help you quickly add Crossmint's checkout button to your frontend. https://docs.crossmint.com/payments/pay-button/quickstart

• Importing a Custom NFT Contract on XION Requirements and steps for registering your own CW721-based contract with Crossmint. https://docs.crossmint.com/minting/advanced/xion-contracts

• Enable Multi-NFT Checkout in a Single Order Learn how to allow users to purchase multiple NFTs at once via a single Crossmint transaction. https://docs.crossmint.com/payments/advanced/selling-multiple-nfts