swypt-checkout

v0.1.43

Published

7 months ago

A customizable checkout SDK for Swypt payments

Downloads

113

0High
0Medium
0Low

dev-rojas

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, along with comprehensive transaction management capabilities.

Features

Multi-step checkout process
Deposit and withdraw functionality
Transaction history tracking and management
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
Real-time transaction status updates
Search and filter transaction history
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 components:

import { DepositModal, WithdrawModal, TransactionHistoryModal } from "swypt-checkout";
import "swypt-checkout/dist/styles.css";

Set up the CryptoProvider in your project's entry file:

"use client"

import { CryptoProvider } from "swypt-checkout";

export default function RootLayout({ children }) {
  return (
    <CryptoProvider>
      <html>
        <body>{children}</body>
      </html>
    </CryptoProvider>
  );
}

Implement the modals in your component:

import { useState } from "react";

function YourComponent() {
  const [isDepositOpen, setIsDepositOpen] = useState(false);
  const [isWithdrawOpen, setIsWithdrawOpen] = useState(false);
  const [isHistoryOpen, setIsHistoryOpen] = useState(false);

  const merchantAddress = "0x6d19a24D93379D1bA58d28884fFBBEf1bc145387";

  return (
    <div>
      {/* Action Buttons */}
      <div className="flex gap-4">
        <button onClick={() => setIsDepositOpen(true)}>Deposit</button>
        <button onClick={() => setIsWithdrawOpen(true)}>Withdraw</button>
        <button onClick={() => setIsHistoryOpen(true)}>Transaction History</button>
      </div>

      {/* Modals */}
      <DepositModal
        isOpen={isDepositOpen}
        onClose={() => setIsDepositOpen(false)}
        headerBackgroundColor="#3E4347"
        businessName="Your Business Name"
        merchantName="Your Merchant Name"
        merchantAddress={merchantAddress}
        amount={200}
      />

      <WithdrawModal
        isOpen={isWithdrawOpen}
        onClose={() => setIsWithdrawOpen(false)}
        headerBackgroundColor="#3E4347"
        businessName="Your Business Name"
      />

      <TransactionHistoryModal
        isOpen={isHistoryOpen}
        onClose={() => setIsHistoryOpen(false)}
        headerBackgroundColor="#3E4347"
        businessName="Your Business Name"
        merchantAddress={merchantAddress}
      />
    </div>
  );
}

Process Flows

Deposit Flow

Asset Selection: Choose cryptocurrency for deposit
Choose Method: Select payment method
Phone Entry: Enter your phone number
Confirm Transaction: Review deposit details
Processing: Complete the deposit
Success: View and download the receipt

Withdraw Flow

Connect Wallet: Link your digital wallet
Asset Selection: Choose cryptocurrency to withdraw
Confirm Transaction: Review withdrawal details
Processing: Complete the withdrawal
Success: View and download the receipt

Transaction History Flow

Connect Wallet: Verify merchant wallet
View History: Access all deposit and withdrawal transactions
Filter Transactions: Filter by type (deposit/withdraw)
Search: Search through transactions
View Details: See complete transaction details

Requirements

React 16.8+
Next.js 10+ (for optimal performance)
Web3 wallet (MetaMask, WalletConnect, etc.)

Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)
Mobile browsers with wallet support

Best Practices

Ensure proper error handling for all transaction types
Implement appropriate wallet connection error handling
Test thoroughly with different payment scenarios
Keep transaction history updated in real-time
Maintain proper state management for modals
Handle wallet disconnection gracefully

Security

Swypt Checkout SDK prioritizes security in financial transactions:

Secure wallet connections
Protected transaction data
Verified merchant addresses
Encrypted communication
Regular security updates

Troubleshooting

Common issues and solutions:

Wallet Connection: Ensure proper Web3 provider setup
Transaction History: Verify merchant address authentication
Modal Display: Check z-index and modal stack order
Styling: Ensure proper CSS import and compatibility
API Endpoints: Verify correct backend configuration

Support

For technical support and inquiries:

Email: [email protected]
Documentation: Swypt Docs
GitHub Issues: Report a bug

License

This project is licensed under the MIT License - see the LICENSE file for details.