Add On-Ramping To Your Site

This guide gives an overview on how to implement the On-Ramping functionality using Pay.io's Payment Gateway and User Payment API. Learn more about the feature and benefits in On-Ramping: Buying Crypto with Fiat.

API endpoint used in this guide -> POST /v1/user/onramp/get_url

Integration Flow

The integration relies on a single backend API call to generate a unique URL, which is then rendered on your frontend within an iframe.

Generate the On Ramp URL (Backend)

To initiate the flow, your backend must call the Pay.io User Payments API to generate a unique, user-specific URL.

Endpoint: POST /v1/user/onramp/get_url

Authentication: API Key (Bearer YOUR_API_KEY in the header)

Request payload example

{
  "provider": "MELD",
  "currency_id": "123e4567-e89b-12d3-a456-426614174000",
  "user_reference_id": "player_98765",
  "country": "GB",
  "operation": "deposit",
  "site": "yourcasino.io",
  "theme": "dark"
}

Key Parameters

• provider: Currently supports only the provider "MELD".

• country: The user's ISO 3166-1 alpha-2 country code (e.g., GB, DE). This dictates which payment methods (like Apple Pay) are displayed.

• theme: Choose "dark" or "light" to match your Cashier UI design.

Response example

{
  "success": true,
  "data": {
    "link": "https://widget.onramp-provider.com/?session=abc123xyz..."
  }
}

Render the iframe (Frontend)

Once your backend receives the link from the API, pass it to your frontend. You will need to embed this URL seamlessly into your Cashier UI, so the user does not feel like they are leaving your site.

Best Practices

• Ensure the iframe width is 100% of its container, especially for mobile users.

• Give the iframe a sufficient minimum height (e.g., 600px to 700px) to prevent awkward inner scrolling during the KYC steps.

• Remove default borders to make the widget look native to your platform.

Example for frontend HTML for the Iframe

<div class="onramp-widget-container">
  <iframe 
    src="YOUR_GENERATED_URL_HERE" 
    title="Buy Crypto Securely"
    allow="camera; microphone; payment" 
    frameborder="0">
  </iframe>
</div>

<style>
  .onramp-widget-container {
    width: 100%;
    max-width: 500px; /* Adjust based on your UI */
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
  }
  .onramp-widget-container iframe {
    width: 100%;
    height: 700px;
    border: none;
  }
</style>

The allow="camera; microphone" attributes are crucial, as users may need their device camera to upload ID documents for the KYC verification step.