Swypt Checkout SDK Documentation

A comprehensive guide to integrating the Swypt Checkout SDK in your Next.js application

Requirements

Next.js 14.2.4
React 18.0.0
Node.js 16.0.0

Installation

Install the latest version (v0.1.43+)

bash

# Using npm
npm install swypt-checkout@latest

# Using yarn
yarn add swypt-checkout@latest

Demo

Try the Swypt Checkout SDK with our interactive demo

Setup Instructions

Set up the Root Layout

Create or modify your root layout file (app/layout.tsx) to include the CryptoProvider:

tsx

400 font-semibold">class="text-emerald-300">"400 font-semibold">use 300">client"

400 font-semibold">import { CryptoProvider } 400 font-semibold">from 400 font-semibold">class="text-emerald-300">"swypt-checkout";
400 font-semibold">import 400 font-semibold">class="text-emerald-300">"./globals.css";

400 font-semibold">export 400 font-semibold">default 400 font-semibold">function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  400 font-semibold">return (
    <CryptoProvider>
      <html lang=400 font-semibold">class="text-emerald-300">"en">
        <body>{children}</body>
      </html>
    </CryptoProvider>
  );
}

Important Note

The "use client" directive is essential as the CryptoProvider component contains client-side code.

Implementing the Deposit Modal

Basic Implementation

Here"s a simple implementation of the Deposit Modal:

tsx

400 font-semibold">class="text-emerald-300">"400 font-semibold">use 300">client"

400 font-semibold">import React, { useState } 400 font-semibold">from 400 font-semibold">class="text-emerald-300">"react";
400 font-semibold">import { DepositModal } 400 font-semibold">from 400 font-semibold">class="text-emerald-300">"swypt-checkout";
400 font-semibold">import 400 font-semibold">class="text-emerald-300">"swypt-checkout/dist/styles.css";

400 font-semibold">export 400 font-semibold">default 400 font-semibold">function PaymentPage() {
  400 font-semibold">const [isOpen, setIsOpen] = useState(false);

  400 font-semibold">return (
    <>
      <button onClick={() => setIsOpen(true)}>
        Open Deposit Modal
      </button>

      <DepositModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        headerBackgroundColor=400 font-semibold">class="text-emerald-300">"linear-gradient(to right, #DD268A, #FF4040)"
        businessName=400 font-semibold">class="text-emerald-300">"Your Business"
        merchantName=400 font-semibold">class="text-emerald-300">"Your Merchant"
        merchantAddress=400 font-semibold">class="text-emerald-300">"0x6d19a24D93379D1bA58d28884fFBBEf1bc145387"
        amount={100}
      />
    </>
  );
}

Advanced Implementation

For a more comprehensive implementation with styling and user input for deposit amount:

tsx

400 font-semibold">class="text-emerald-300">"400 font-semibold">use 300">client"

400 font-semibold">import React, { useState, ChangeEvent } 400 font-semibold">from 400 font-semibold">class="text-emerald-300">"react";
400 font-semibold">import { DepositModal } 400 font-semibold">from 400 font-semibold">class="text-emerald-300">"swypt-checkout";
400 font-semibold">import 400 font-semibold">class="text-emerald-300">"swypt-checkout/dist/styles.css";

400 font-semibold">export 400 font-semibold">default 400 font-semibold">function PaymentPage() {
  400 font-semibold">const [isDepositOpen, setIsDepositOpen] = useState(false);
  400 font-semibold">const [depositAmount, setDepositAmount] = useState(100);
  400 font-semibold">const merchantAddress = 400 font-semibold">class="text-emerald-300">"0x6d19a24D93379D1bA58d28884fFBBEf1bc145387";

  400 font-semibold">const handleAmountChange = (e: ChangeEvent<HTMLInputElement>) => {
    setDepositAmount(parseFloat(e.target.value));
  };

  400 font-semibold">const handleOpenModal = () => {
    document.body.style.overflow = 400 font-semibold">class="text-emerald-300">'hidden';
    setIsDepositOpen(true);
  };

  400 font-semibold">const handleCloseModal = () => {
    document.body.style.overflow = 400 font-semibold">class="text-emerald-300">'auto';
    setIsDepositOpen(false);
  };

  400 font-semibold">return (
    <div className=400 font-semibold">class="text-emerald-300">"min-h-screen bg-gray-100 p-4">
      <div className=400 font-semibold">class="text-emerald-300">"max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
        <h1 className=400 font-semibold">class="text-emerald-300">"text-2xl font-bold mb-6">Make a Deposit</h1>
        <input
          400 font-semibold">type=400 font-semibold">class="text-emerald-300">"number"
          value={depositAmount}
          onChange={handleAmountChange}
          className=400 font-semibold">class="text-emerald-300">"block w-full px-3 py-2 border rounded-md mb-4"
          placeholder=400 font-semibold">class="text-emerald-300">"0.00"
          min=400 font-semibold">class="text-emerald-300">"1"
        />
        <button onClick={handleOpenModal} className=400 font-semibold">class="text-emerald-300">"w-full py-2 px-4 bg-indigo-600 text-white rounded-md">
          Open Deposit Modal
        </button>
      </div>

      {isDepositOpen && (
        <div className=400 font-semibold">class="text-emerald-300">"fixed inset-0 z-50 flex items-center justify-center">
          <div className=400 font-semibold">class="text-emerald-300">"fixed inset-0 bg-black/80 backdrop-blur-sm" onClick={handleCloseModal} />
          <div className=400 font-semibold">class="text-emerald-300">"relative z-50">
            <DepositModal
              isOpen={isDepositOpen}
              onClose={handleCloseModal}
              headerBackgroundColor=400 font-semibold">class="text-emerald-300">"linear-gradient(to right, #044639, #FF4040)"
              businessName=400 font-semibold">class="text-emerald-300">"Your Business Name"
              merchantName=400 font-semibold">class="text-emerald-300">"Your Merchant Name"
              merchantAddress={merchantAddress}
              amount={depositAmount}
            />
          </div>
        </div>
      )}
    </div>
  );
}

Interactive Modal Configurator

Use this interactive tool to customize the appearance and behavior of the Deposit Modal. The changes will be reflected in the live preview and generated code.

Customize Modal

Business Name

Merchant Name

Merchant Address

Amount

Header Style

Solid ColorGradient

Gradient Start Color

Gradient End Color

Generated Code:

tsx

400 font-semibold">class="text-emerald-300">"400 font-semibold">use 300">client"

400 font-semibold">import React, { useState } 400 font-semibold">from 400 font-semibold">class="text-emerald-300">"react";
400 font-semibold">import { DepositModal } 400 font-semibold">from 400 font-semibold">class="text-emerald-300">"swypt-checkout";
400 font-semibold">import 400 font-semibold">class="text-emerald-300">"swypt-checkout/dist/styles.css";

400 font-semibold">export 400 font-semibold">default 400 font-semibold">function PaymentPage() {
  400 font-semibold">const [isOpen, setIsOpen] = useState(false);
  
  400 font-semibold">return (
    <>
      <button onClick={() => setIsOpen(true)}>
        Open Deposit Modal
      </button>

      <DepositModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        headerBackgroundColor=400 font-semibold">class="text-emerald-300">"linear-gradient(to right, #044639, #FF4040)"
        businessName=400 font-semibold">class="text-emerald-300">"Swypt Demo"
        merchantName=400 font-semibold">class="text-emerald-300">"Demo Merchant"
        merchantAddress=400 font-semibold">class="text-emerald-300">"0x6d19a24D93379D1bA58d28884fFBBEf1bc145387"
        amount={100}
      />
    </>
  );
}

Preview

Click the button below to see your configured modal in action.

Swypt Demo

Demo Merchant

0x6d19a24D93379D1bA58d28884fFBBEf1bc145387

$100.00

Amount to deposit

Component API Reference

DepositModal Props

Prop	Type	Required	Description
isOpen	boolean	Yes	Controls the visibility of the modal
onClose	() => void	Yes	Function called when the modal is closed
headerBackgroundColor	string	No	Background color or gradient for the modal header
businessName	string	Yes	Your business name displayed in the modal
merchantName	string	Yes	The name of the merchant
merchantAddress	string	Yes	Blockchain address to receive funds
amount	number	Yes	Amount to deposit in fiat currency
cryptoAmount	number	No	Alternative to amount (in crypto)

CryptoProvider

The CryptoProvider component does not accept any props but must wrap your application to provide the necessary context for the Swypt components.

The Deposit Flow

Asset Selection

Choose cryptocurrency for the deposit

Choose Method

Select the payment method

Phone Entry

Enter your phone number

Confirm Transaction

Review deposit details

Processing

Complete the deposit

Success

View and download the receipt

Advanced Usage

Modal Overlay Implementation

For the best user experience, implement the deposit modal as an overlay:

tsx

{isDepositOpen && (
  <div className=400 font-semibold">class="text-emerald-300">"fixed inset-0 z-50 flex items-center justify-center">
    {400 font-semibold">class=400 font-semibold">class="text-emerald-300">"text-gray-500 italic">/* Backdrop */}
    <div
      className=400 font-semibold">class="text-emerald-300">"fixed inset-0 bg-black/80 backdrop-blur-sm"
      onClick={handleCloseModal}
    />

    {400 font-semibold">class=400 font-semibold">class="text-emerald-300">"text-gray-500 italic">/* Modal content */}
    <div className=400 font-semibold">class="text-emerald-300">"relative z-50">
      <DepositModal
        isOpen={isDepositOpen}
        onClose={handleCloseModal}
        headerBackgroundColor=400 font-semibold">class="text-emerald-300">"linear-gradient(to right, #044639, #FF4040)"
        businessName=400 font-semibold">class="text-emerald-300">"Your Business Name"
        merchantName=400 font-semibold">class="text-emerald-300">"Your Merchant Name"
        merchantAddress={merchantAddress}
        amount={depositAmount}
      />
    </div>
  </div>
)}

Implementation Details

Creates a fixed position overlay that covers the entire screen
Adds a semi-transparent backdrop with a blur effect
Positions the modal in the center
Implements click-away functionality to close the modal
Uses proper z-index values to ensure the modal appears above other content

Scroll Management

To prevent the page from scrolling when the modal is open:

tsx

400 font-semibold">class=400 font-semibold">class="text-emerald-300">"text-gray-500 italic">// Function to handle modal open
400 font-semibold">const handleOpenModal = () => {
  400 font-semibold">class=400 font-semibold">class="text-emerald-300">"text-gray-500 italic">// Prevent body scrolling when modal is open
  document.body.style.overflow = 400 font-semibold">class="text-emerald-300">'hidden';
  setIsDepositOpen(true);
};

400 font-semibold">class=400 font-semibold">class="text-emerald-300">"text-gray-500 italic">// Function to handle modal close
400 font-semibold">const handleCloseModal = () => {
  400 font-semibold">class=400 font-semibold">class="text-emerald-300">"text-gray-500 italic">// Restore body scrolling when modal is closed
  document.body.style.overflow = 400 font-semibold">class="text-emerald-300">'auto';
  setIsDepositOpen(false);
};

Custom Themes

To create a custom theme for the modal, use the headerBackgroundColor prop:

Solid Color

"#044639"

Gradient

"linear-gradient(to right, #044639, #FF4040)"

Troubleshooting

Hydration Errors

If you encounter hydration errors, ensure:

Both the parent component and the layout containing the CryptoProvider have the "use client" directive
You're properly handling the modal state

Modal Opens on a New Page

If the modal opens as a new page instead of an overlay:

Verify you've implemented the modal container with the proper CSS positions and z-index
Make sure the modal container is rendered within the same component, not through routing

Best Practices

Merchant Address Security

Always ensure your merchant address is properly secured and validated

Error Handling

Implement proper error handling for user inputs

Responsive Design

Test the modal on different device sizes

Loading States

Add loading states when necessary

Confirmation

Provide clear confirmation messages to users after transactions

Privacy

Ensure user data is handled according to privacy regulations

Support and Resources

Email Support

support@swypt.io

GitHub

github.com/Swypt-io/Swypt-Checkout-SDK-Documentation

API Documentation

On-ramps & off-ramps API

View Documentation →