Overlay mode - guide

A simple guide on getting started with overlay mode

This guide is designed to help developers integrate the Onramp widget into their applications seamlessly. the guide will walk you through the entire process, from setting up your environment to embedding the widget using CodePen example for real-time testing.

Note:

Before you start, make sure you've read the official Onramp documentation on overlay mode integration
To ensure that users are restricted from making any alterations and are exclusively presented with the checkout confirmation page, it is imperative to pre-fill and pass the necessary parameters. This will help enhance user experience by displaying only relevant information.

Create an HTML file and paste the following code:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="favicon.png" type="image/x-icon">
    <title>Onramp Demo</title>
</head>
<body>
    <button id="showOnramp">Launch Onramp Widget</button>
    <script type="module" src="script.js"></script>
</body>
</html>

The file includes a button with the ID showOnramp, which will be used to launch the Onramp widget.

Create a CSS file and paste the following code:

#showOnramp {
    width: 400px;
    height: 80px;
    font-size: 28px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#showOnramp:hover {
    background-color: #0056b3;
}

CSS file above styles the button

To configure the javascript file, copy the below javascript file.

import { OnrampWebSDK } from '<https://cdn.skypack.dev/@onramp.money/onramp-web-sdk>';

window.OnrampWebSDK = OnrampWebSDK;

const onrampInstance = new OnrampWebSDK({
    appId: 1,
    merchantRecognitionId: "some string",
    paymentMethod: 1,
});

document.getElementById('showOnramp').addEventListener('click', () => {
    onrampInstance.show();
});

This script imports the Onramp Web SDK and initializes it with some basic parameters.

The user

Live Example (CodePen)

For real-time testing and demonstration, we have embedded a CodePen example below. Feel free to interact with it to see how the Onramp widget works.

A simple button Launch Onramp widget can be placed directly in your platform to launch onramp widget.

PreviousOverlay Mode NextWebhook updates

Last updated 1 month ago