Onramp Embedded Quickstart

All Quickstarts | Onramp Embedded Docs

Introduction

Create and fund a crypto wallet using Crossmint Onramp with embedded checkout. This quickstart demonstrates creating an order and using Crossmint's embedded checkout component to handle KYC, payment collection, and delivery automatically.

Key features

• Accept fiat payments via credit and debit cards
• Create an onramp order
• Embedded checkout handles KYC, payment, and delivery automatically
• Deliver funds directly to a buyer's wallet
• Simple integration with minimal code

Deploy

Easily deploy the template to Vercel with the button below. You will need to set the required environment variables in the Vercel dashboard.

Setup

1. Clone the repository and navigate to the project folder:

git clone https://github.com/crossmint/onramp-embedded-quickstart.git && cd onramp-embedded-quickstart

2. Install all dependencies:

npm install
# or
yarn install
# or
pnpm install
# or
bun install

3. Set up the environment variables:

cp .env.template .env

4. Get a Crossmint server API key from here and add it to the .env file. Ensure it has the scopes: orders.read and orders.create. You'll also need a client-side API key for the embedded checkout. The following variables are used by this project:

CROSSMINT_SERVER_SIDE_API_KEY=your_server_api_key
NEXT_PUBLIC_CROSSMINT_CLIENT_SIDE_API_KEY=your_client_api_key

# staging | production
CROSSMINT_ENV=staging

5. Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Using in production

1. Create a production server-side API key and a production client-side API key and set CROSSMINT_ENV=production.

How it works

1. Order Creation: The app creates an onramp order via the /api/orders endpoint
2. Embedded Checkout: Once the order is created, pass the orderId and clientSecret information to the Crossmint's embedded checkout component, which handles:
   • KYC verification (when required)
   • Payment collection
   • Order fulfillment and delivery to the recipient wallet