JavaScript SDK

The @swipelux/onramp-js package provides a simple way to embed the Swipelux On-Ramp widget into your website using plain JavaScript.

Integration steps

Install the package

The JavaScript Web SDK can be integrated into your project in two different ways.

For projects using modern build tools, we recommend installing the @swipelux/onramp-js package from npm. This provides the best experience when working with bundlers like Vite or Webpack, and includes full TypeScript support.

npm install @swipelux/onramp-js

In more traditional websites, you can load the SDK directly from a CDN like jsDelivr using a <script> tag. This method requires no build tools and works in any supported browser.

To get started, include our JavaScript SDK in your project by adding a <script> tag to your HTML file's <head> section.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Acme Inc.</title>
    <script
      crossorigin="anonymous"
      src="https://cdn.jsdelivr.net/npm/@swipelux/onramp-js@^1.0.0"
    ></script>
  </head>
  <body>
    <h1>Welcome to Acme Inc.</h1>
  </body>
</html>

Once you've installed this, you're ready to set up your project to integrate the Swipelux widget.

Before you can initialize the widget, you need to create an empty container for it to be rendered in.

This can be any HTML element, but it's recommended to use a <div> element with a unique id attribute to target the element later in the code.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Acme Inc.</title>
    <script
      crossorigin="anonymous"
      src="https://cdn.jsdelivr.net/npm/@swipelux/onramp-js@^1.0.0"
    ></script>
  </head>
  <body>
    <h1>Welcome to Acme Inc.</h1>
    <div id="swipelux-container"></div>
  </body>
</html>

Create an instance of SwipeluxWidget with your widget settings object and call mount() with the container element we created in the previous step. This will display the widget on the page.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Acme Inc.</title>
    <script
      crossorigin="anonymous"
      src="https://cdn.jsdelivr.net/npm/@swipelux/onramp-js@^1.0.0"
    ></script>
  </head>
  <body>
    <h1>Welcome to Acme Inc.</h1>
    <div id="swipelux-container"></div>
    <script>
      const widget = new SwipeluxWidget({
        // Make sure to replace `apiKey` with your own publishable API key
        apiKey: "YOUR_PUBLISHABLE_API_KEY",
        // Additional widget settings can be added here
        // orderToken: "YOUR_ORDER_TOKEN",
        // ...
      });
 
      widget.mount(document.getElementById("swipelux-container"));
    </script>
  </body>
</html>

You're all set!

You've now integrated the Swipelux On-Ramp widget into your website.

Visit your page and confirm that the widget is displayed correctly.

Next steps

We've only covered the basics of how to integrate the Swipelux On-Ramp widget into your website using plain JavaScript.

If you're using a server-side integration and create orders using our REST API, then you should use the orderToken property in the SwipeluxWidget constructor to initiate the widget with a prepared order.

To learn more about orderToken and other supported widget settings, please refer to the Supported widget settings article.

Integration steps

Install the package

Create an empty container for the widget

Initialize and mount the widget

You're all set!

Next steps

On this page