Web Components

The Web Components approach is ideal when your Swipelux OnRamp 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 Swipelux OnRamp 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 this guide.

You're All Set!

You've now integrated Swipelux OnRamp into your website.

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

Event Handling

Listen to widget events to handle purchase completions and other user interactions:

index.html

<script>
  // Wait for the widget to be ready
  document.addEventListener('DOMContentLoaded', function() {
    const widget = document.querySelector('swipelux-widget');
    
    // Listen for purchase completion
    widget.addEventListener('onramp:complete', function(event) {
      console.log('Purchase completed:', event.detail);
      // Handle successful purchase
      // event.detail contains order information
    });
    
    // Listen for widget errors
    widget.addEventListener('onramp:error', function(event) {
      console.error('Widget error:', event.detail);
      // Handle errors gracefully
    });
    
    // Listen for user actions
    widget.addEventListener('onramp:user-action', function(event) {
      console.log('User action:', event.detail.action);
      // Track user behavior for analytics
    });
  });
</script>
 
<swipelux-widget api-key="YOUR_PUBLISHABLE_API_KEY"></swipelux-widget>

Configure Swipelux OnRamp using HTML attributes:

Attribute	Description	Required	Example
`api-key`	Your publishable API key	Yes	`pk_live_abc123...`
`order-token`	Pre-created order token	No	`ord_token_abc123...`
`default-crypto-currency`	Default cryptocurrency	No	`USDC`
`default-fiat-currency`	Default fiat currency	No	`USD`
`default-network`	Default blockchain network	No	`polygon`
`default-amount`	Pre-filled amount	No	`100`
`theme`	Widget appearance theme	No	`light`, `dark`, `auto`
`primary-color`	Primary color override	No	`#3B82F6`

Example with Attributes

<swipelux-widget
  api-key="YOUR_PUBLISHABLE_API_KEY"
  default-crypto-currency="USDC"
  default-network="polygon"
  default-amount="50"
  theme="dark"
  primary-color="#10B981"
></swipelux-widget>

Next Steps

We've covered the basics of Web Components integration. If you need more advanced functionality:

Server-side integration: Create orders programmatically using our REST API
Widget customization: Learn about appearance and behavior customization
Event handling: Implement advanced event handling patterns

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

For example, orderToken should be passed as order-token, defaultCryptoCurrency should be passed as default-crypto-currency, etc.

Integration Steps

Import the Script

Add the Widget to Your Page

You're All Set!

Event Handling

Widget Attributes

Example with Attributes

Next Steps

On this page