Merso Modal Documentation
A powerful, embeddable payment modal that supports both Web2 (fiat) and Web3 (crypto) payment flows with PNPL and upfront payment options.
What is Merso Modal?
Merso Modal is a standalone payment interface that can be embedded in any website via an <iframe>. It provides a seamless checkout experience for purchasing in-game items or NFTs with flexible payment options.
Item Purchases (Web2)
Enable players to buy in-game items with credit card payments through Stripe integration.
NFT Purchases (Web3)
Support NFT minting with both crypto (MetaMask) and fiat card payments.
PNPL Support
Offer Play Now Pay Later options with weekly payment schedules for larger purchases.
Upfront Payments
Traditional one-time payments for immediate purchase completion.
Key Features
-
✓
Dual Payment SystemsSeamlessly handle both fiat (Stripe) and crypto (MetaMask/Web3) payments in one unified interface.
-
✓
Flexible Payment ModesSupport for both PNPL (Play Now Pay Later) with weekly installments and upfront full payments.
-
✓
Full CustomizationConfigure colors, fonts, logos, titles, and more via the backend API to match your brand.
-
✓
Secure CommunicationJWT-based authentication and postMessage API for secure parent-iframe communication.
-
✓
Easy IntegrationSimple iframe embed with postMessage or Form POST configuration.
-
✓
Multi-Chain SupportConfigure different blockchain networks for NFT purchases via chainId parameter.
How It Works
The modal follows a simple flow: embed → configure → pay → notify. Here's the typical user journey:
You can pre-select the product type and payment mode via the request body (product_type and payment_mode) to skip selection steps and streamline the checkout flow.
Payment Flows
The modal supports various combinations of product types and payment methods:
| Product Type | Payment Mode | Payment Method | Status |
|---|---|---|---|
| Item (Web2) | PNPL | Card (Stripe) | ✓ Supported |
| Item (Web2) | Upfront | Card (Stripe) | ✓ Supported |
| NFT (Web3) | PNPL | Card (Stripe) | ✓ Supported |
| NFT (Web3) | Upfront | Card (Stripe) | ✓ Supported |
| NFT (Web3) | PNPL | Crypto (MetaMask) | ✓ Supported |
| NFT (Web3) | Upfront | Crypto (MetaMask) | ✓ Supported |
| Item (Web2) | Any | Crypto | ✗ Not Available |
Customization Options
The modal appearance is fully customizable through the backend configuration API. Each game can have its own unique styling:
| Property | Description | Default |
|---|---|---|
primaryColor |
Main brand color for buttons and accents | #1d4ed8 |
secondaryColor |
Secondary color for gradients and highlights | #06b6d4 |
backgroundColor |
Modal background color | #ffffff |
textColor |
Primary text color | #0f172a |
fontFamily |
Font family for all text | Inter, system-ui |
fontUrl |
Custom Google Fonts URL | null |
logoUrl |
URL to your brand logo | null |
modalTitle |
Main heading text | Pick your experience |
modalSubtitle |
Subheading text | Choose the integration... |
borderRadius |
Modal corner radius | 1.25rem |
buttonBorderRadius |
Button corner radius | 0.75rem |
availableBnpl |
Enable PNPL option | true |
availableUpfront |
Enable Upfront option | true |