Web Components

The Web Components approach is ideal when your widget configuration is static and won't change during runtime. It provides a clean, declarative way to embed the widget using HTML syntax.

This is the easiest way to embed our widget on any website without having to write a single line of JavaScript.

Integration steps

Import the script

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>

Simply add the <swipelux-widget> element to your HTML file in the <body> section.

Remember to set the api-key attribute value to your own publishable API key, which you can find in the API Keys section of the Merchant Panel.

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>
    <!-- Don't forget to replace `api-key` with your own publishable API key -->
    <swipelux-widget api-key="YOUR_PUBLISHABLE_API_KEY"></swipelux-widget>
  </body>
</html>

If you're creating orders programmatically, make sure to include the order-token attribute in the <swipelux-widget> element.

Read more about how to create an order programmatically in the this guide.

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 Web Components.

If you're using a server-side integration and create orders using our REST API, then you should use the order-token attribute in the <swipelux-widget> element to initiate the widget with a prepared order.

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

Widget settings for the Web Components integration are expected to be passed as attributes in a pascal-cased format.

For example, orderToken should be passed as order-token, paymentChannel should be passed as payment-channel, etc.

Integration steps

Import the script

Add the widget to your page

You're all set!

Next steps

On this page