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 your Crossmint API keys and add them to the .env file. In staging environment, all scopes are enabled by default. This project requires two keys:
   • A server-side API key for creating onramp orders, with scopes orders.read and orders.create.
   • A client-side API key for the embedded checkout component.

CROSSMINT_SERVER_SIDE_API_KEY=your_server_api_key
NEXT_PUBLIC_CROSSMINT_CLIENT_SIDE_API_KEY=your_client_api_key

# staging | production
NEXT_PUBLIC_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 production server-side and client-side API keys and set NEXT_PUBLIC_CROSSMINT_ENV=production.

How it works

1. Order Creation: The app creates an onramp order server-side via the Crossmint Orders API using the server-side API key
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