Home
Guides
Sign in

Quickstart

Suggest Edits

🌟 Quickstart Guide to Swaps On-Ramp Integration

In this Quickstart, you will learn how to facilitate cryptocurrency purchases via the Swaps On-Ramp directly from your browser.

Whether you are completely new to coding or an experienced developer, this guide will walk you through all the necessary steps to get you converting fiat to cryptocurrency in no time.

What You Will Accomplish

In this tutorial, you will:

  • Configure the Swaps On-Ramp widget in a local environment.
  • Create a new folder for your code.
  • Initialize the widget in a file using HTML and JavaScript.
  • Edit the widget parameters.
  • Display the fully functional widget locally in your browser.

Prerequisites

Before beginning, you will need:

  • A Swaps Account: If you do not have one, set one up on this page.
  • An IDE (coding software): Some popular ones include Visual Studio Code and IntelliJ WebStorm. We will be using Visual Studio Code in this tutorial.
  • A Web Browser: Any web browser will work. We will be using Google Chrome in this tutorial.

Implementation

Step 1: Set up a File for Your Integration

In your IDE, create a new file for your On-Ramp code. We will call it on-ramp.html.

Step 2: Retrieve API Keys from the Swaps Dashboard

Navigate to your Swaps Dashboard and log in.
Once logged in, navigate to the Developers tab on the sidebar → API Keys.
Here, you can copy your API keys. In this tutorial, we will use the publishable test key.

Step 3: Insert HTML and Code into on-ramp.html

The code below will embed the Software Development Kit (SDK) directly into your HTML using <script> tags. This way, you can inject code directly into HTML without needing a separate linked file.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Swaps Integration</title>

    <!-- Adds the Swaps SDK as a script to your HTML file -->
    <script defer src="https://static.swaps.com/web-sdk/v1/swaps-web-sdk.min.js"></script>

    <!-- Initialize the Swaps SDK immediately upon page load -->
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const swapsSdk = window.SwapsWebSdk.init({
                flow: "buy",
                environment: "sandbox",
                variant: "overlay",
                params: {
                    apiKey: "pk_test_123", // Replace with your Swaps publishable API key
                    baseCurrencyCode: "usd",
                    baseCurrencyAmount: "30",
                    defaultCurrencyCode: "eth"
                }});

            // Open widget
            swapsSdk.show();
        });
    </script>
</head>
<body>
    <div class="container">
    </div>
</body>
</html>

This script will detect when the HTML page loads and immediately run the JavaScript inside the <script> tags once the load has completed. Remember to replace pk_test_123 with your publishable API key from Step 2.

You can customize the widget's functionality (currencies, amounts, etc.) by adding and removing parameters in the JavaScript while maintaining proper formatting.

For example, if you want to display the widget with a default of 100 GBP worth of BTC, and also specify the walletAddress so the user isn't prompted for it, modify the JavaScript like so:

HTML

<script>
   document.addEventListener("DOMContentLoaded", () => {
       const swapsSdk = window.SwapsWebSdk.init({
           flow: "buy",
           environment: "sandbox",
           variant: "overlay",
           params: {
               apiKey: "pk_test_123", // Replace with your Swaps publishable API key
               baseCurrencyCode: "gbp",
               baseCurrencyAmount: "100",
               defaultCurrencyCode: "btc",
               walletAddress: "enter your wallet here"
           }});
   
       // Open widget
       swapsSdk.show();
   });
</script>

Step 4: Perform a Test Transaction

The first step in processing a test transaction using the Swaps On-Ramp is to make sure that the environment is set to "sandbox", as shown in the example code above. This puts your widget in test mode.

Next, open up the widget, enter your email address, and log in.
You will be asked to enter a wallet address if one hasn’t been provided in the parameters. If you have existing wallet addresses saved, they will show up here. Any wallet address will work for a test transaction.

Next, go and grab the Test Credit Card from our documentation page.

🚧 Note: Never use a test credit card on anything other than a test widget with environment: "sandbox", as it may lead to your Swaps account being blocked.

If successful, you will see a confirmation screen.

Completion

Congratulations, you have just integrated the Swaps On-Ramp! 🎉

There are many ways to further integrate this widget to enhance the user experience when buying cryptocurrency. For alternative ways to integrate Swaps, check our Integrations (SDKs) page.

If you have any questions, feel free to visit our Help Center to explore more resources or contact us!

Updated 5 days ago