Prerequisite You should have installed Node.js (version 18.10.0 or higher).

Step 1. Install NoRamp’s SDK in your favorite frontend framework:

yarn add norampkit

Step 2. Add the following code to your frontend:

import { NoRampCheckout } from "norampkit";

<NoRampCheckout
  priceId="price_id" // Create price in your dashboard or using our API
  testnet // optional param to use testnet, dont include for mainnet
/>;

You are now ready to start receiving payments!

Customizing the widget

You can customize the widget by changing the buttonTheme and theme props. Here’s an example of how to change the widget to a dark theme:

import { NoRampCheckout } from "norampkit";

<NoRampCheckout
  priceId="price_id"
  buttonTheme="light" // or use "dark"
  theme="light" // or use "dark"
/>;

Customizing the pay button

You can customize the pay button text by changing the type prop. Here’s an example of how to change the button text to “Donate”:

import { NoRampCheckout } from "norampkit";

<NoRampCheckout
  priceId="price_id"
  type="buy" // or "donate" or "book" or "checkout" or "subscribe" ...
/>;