React SDK

The @swipelux/onramp-react package provides a simple way to embed the Swipelux on-ramp widget into your React application.

This package was designed to work with Next.js and other server-side rendering frameworks out of the box as well.

Installation

Run the following command to install the SDK:

npm install @swipelux/onramp-react

Add the component to your app

The Swipelux On-Ramp widget is rendered using the <SwipeluxWidget/> component.

App.tsx

import React from "react";
import { SwipeluxWidget } from "@swipelux/onramp-react"; 
 
export default function App() {
  return (
    <SwipeluxWidget
      // Make sure to replace `apiKey` with your own publishable API key
      apiKey="YOUR_PUBLISHABLE_API_KEY"
    />
  );
}

If you're creating orders programmatically, make sure to include the orderToken prop in the <SwipeluxWidget/> component.

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 React app.

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

Installation

Add the component to your app

You're all set!

On this page