Quickstart Guide

This quickstart guide walks you through integrating Swipelux OnRamp into your website in just a few minutes. Our native onramp provides maximum compatibility with crypto rails and optimal user experience. Whether you're new to coding or an experienced developer, this guide will have you processing fiat-to-crypto transfers quickly.

Prerequisites

An IDE or text editor: We recommend Visual Studio Code or Cursor
A web browser: Any modern browser (Chrome, Firefox, Safari)

Start Building

Create a Merchant Account

If you don't have a Swipelux merchant account, sign up for free at merchant.swipelux.com.

From now on, we'll refer to this website as the Merchant Panel.

Need assistance? Contact us at partner@swipelux.com.

Retrieve Your Publishable API Key

Navigate to Developers > API keys in the Merchant Panel and copy your publishable API key.

API keys

Set Up Your Integration File

In your IDE, create a new project (if you don't have one already) and create a new file. Let's call it swipelux-onramp.html.

Add the following code to your swipelux-onramp.html file:

swipelux-onramp.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Swipelux OnRamp Integration</title>
 
    <!-- Adds the Swipelux OnRamp SDK to your page -->
    <script
      crossorigin="anonymous"
      src="https://cdn.jsdelivr.net/npm/@swipelux/onramp-js@^1.0.0"
    ></script>
  </head>
 
  <body>
    <!-- Displays the Swipelux OnRamp widget on your page -->
    <swipelux-widget api-key="YOUR_PUBLISHABLE_API_KEY"></swipelux-widget>
  </body>
</html>

Make sure to replace YOUR_PUBLISHABLE_API_KEY with your actual publishable API key from the previous step.

You're All Set!

That's it! You've successfully integrated Swipelux OnRamp into your page. Open the swipelux-onramp.html file in your browser to see the widget in action.

The widget will display like this:

Next Steps

Now that you have Swipelux OnRamp integration working:

Customize the widget: Learn how to customize appearance and behavior
Handle events: Set up event listeners to respond to purchase completions
Server-side integration: Create orders programmatically with our server-side API
Production setup: Configure webhooks for real-time order updates

Processing Flow

When a user completes a purchase through your Swipelux OnRamp integration:

User selects amount and destination: Customer chooses how much to spend and which crypto/network to receive
Payment processing: Card payment is processed through our secure onramp partners
Currency conversion: Fiat is converted to cryptocurrency at optimal market rates
Network transfer: Crypto is transferred to the customer's wallet on their chosen network
Confirmation: Real-time updates keep the user informed throughout the process

Your integration automatically handles all the complexity while providing your users with a smooth purchasing experience.

On this page