Prerequisites
- A Grain merchant account with a Merchant ID
- A server-side API key for creating payment sessions
- Node.js 18+ (for Next.js applications)
Get Your Credentials
Get your Merchant ID
Log in to the Grain Dashboard and navigate to Settings > API Keys. Copy your Merchant ID — this is used to initialize the client-side SDK.
Configure Environment Variables
Add the following to your.env file:
Add the SDK Mount Point
The Payment SDK renders its payment modal inside a dedicated DOM element. Add this to your root layout:The SDK creates a Shadow DOM inside this element, so its styles are fully isolated from your application. No CSS conflicts.
Load the SDK Bundle
The client-side SDK is distributed as a UMD bundle. Place it in your public directory:Environment Comparison
| Feature | Sandbox | Production |
|---|---|---|
| Blockchain networks | Testnets (Sepolia) | Mainnets (Ethereum, Base) |
| Real funds | No | Yes |
| Webhooks | Supported | Supported |
| Settlement | Simulated | Real on-chain settlement |
| API host | api.sandbox.pay.grain.inc | api.pay.grain.inc |