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.

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.

Import the script

Add the widget to your page

You're all set!

On this page