Swypt-checkout NPM

Swypt Checkout SDK

Overview

Swypt Checkout SDK is a customizable, easy-to-integrate payment solution for e-commerce and point-of-sale applications. It provides a seamless checkout experience for customers using cryptocurrencies and traditional payment methods.

Features

Multi-step checkout process
Support for both crypto and cash payments
Customizable header with gradient support
Responsive design (mobile and desktop compatible)
Wallet integration for crypto payments
Transaction confirmation and receipt generation
Downloadable and shareable transaction receipts

Installation

yarn add swypt-checkout

Getting Started

To start using the Swypt Checkout SDK in your project, follow these steps:

Install the SDK: Use npm or yarn to install the package as shown above.
Import the SDK: In your React component file, import the CheckoutModal component in the location you wish to use it:

import { CheckoutModal } from "swypt-checkout";

Import the CSS in the location or component use are going to use the checkout Modal:

import "swypt-checkout/dist/styles.css";

Import the context in your project's entry file (e.g., _app.js or layout.js for Next.js):

"use client"

import { CryptoProvider } from "swypt-checkout";

return (
  <CryptoProvider>
    <html>
      <body>{children}</body>
    </html>
  </CryptoProvider>
);

Set up state: Create a state variable to control the visibility of the modal:

import { useState } from "react";

function YourComponent() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  // ... rest of your component
}

Add the CheckoutModal: Include the CheckoutModal in your component's render method:

return (
  <div>
    {/* Your existing component content */}
    <button onClick={() => setIsModalOpen(true)}>Open Checkout</button>

    <CheckoutModal
      isOpen={isModalOpen}
      onClose={() => setIsModalOpen(false)}
      headerBackgroundColor="#3E4347" // Put your header background color code
      businessName="Your Business Name"
      merchantName="Your Merchant Name"
      merchantAddress="0x6d19a24D93379D1bA58d28884fFBBEf1bc145387" // Put your address
      amount={200} // Specify the payment amount
    />
  </div>
);

Customize the appearance: Adjust the headerBackground and businessName props to match your branding.
Handle payments: Implement the necessary backend logic to process payments when the checkout process is completed. The SDK will call the appropriate callbacks which you can integrate with your payment processing system.

Checkout Process

Choose Payment Method: Select between crypto or cash payment.
Connect Wallet: For crypto payments, connect your digital wallet.
Select Asset: Choose the cryptocurrency for payment.
Confirm Transaction: Review and confirm the transaction details.
Processing: Approve and process the payment.
Success: View and download the transaction receipt.

Requirements

React 16.8+
Next.js 10+ (for optimal performance)

Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)

Best Practices

Ensure proper error handling in your implementation.
Test thoroughly with different payment scenarios.
Keep the SDK updated to the latest version for security and feature improvements.

Security

Swypt Checkout SDK prioritizes security in financial transactions. However, always ensure you're using the latest version and follow best practices for handling sensitive financial data.