RedotPayKit SDK - Merchant Web3 payment integration tool

Provides merchants with diverse and convenient web3 payment methods.

After user registration, integrate the SDK into your web app, allowing for multi-language customization and theming. Multiple payment methods are built in, including Web3 wallets, RedotPay, and Binance Pay.

🌟 Core Features

• One-click integration of payment interface UI and payment wrappers for multiple wallets (Web3 wallets, RedotPay, and Binance Pay), allowing merchants to use the SDK with minimal cost
• Automatic chain switching, gas estimation, and transaction confirmation monitoring
• Built-in payment result verification (anti-tampering, anti-duplicate payment)
• Supported transaction networks: Ethereum, BNB Smart Chain
• Supported wallets: RedotPay, Binance, MetaMask
• Supported transaction countries: Hong Kong, UK, USA, France, Germany, UAE, India, Indonesia, Canada, Saudi Arabia (10 countries, 8 languages)

📦 Installation

Package Manager Installation

# npm
npm install @red_dot/redotkit --save

# yarn
yarn add @red_dot/redotkit

# pnpm
pnpm add @red_dot/redotkit

⚡ Quick Start

1. Initialize SDK(React Project)

// App.tsx
import { BrowserRouter, Routes, Route, HashRouter } from 'react-router-dom';
// import RedotProvider
import RedotProvider from '@red_dot/redotkit';
// redotkit styles
import '@red_dot/redotkit/redotStyles.css';
import { TestDemo } from './TestDemo';

const App = () => {
	return (
		<RedotProvider lang='en' chooseThemeByName='blue'> 
			<HashRouter>
				<Routes>
					<Route path='/' element={<TestDemo />} />
				</Routes>
			</HashRouter>
		</RedotProvider>
	);
};

export default App;

// TestDemo.tsx
import { useState, useCallback } from 'react';
import { useRedot } from '@red_dot/redotkit';
import type { RedotContextType } from '@red_dot/redotkit';


export const TestDemo = (): React.ReactElement => {
	const [isLoading, setIsLoading] = useState(false);
	const [preOrderId, setPreOrderId] = useState<string | null>(null);
	const { init } = useRedot() as RedotContextType;

	const callAllApis = useCallback(async () => {
		try {
			setIsLoading(true);

			if (init) {
				init({
					portalContainer: document.body,
					preOrderId: '',
					jwtToken: '',
					publicKey: ''
				});
			}
		} catch (error) {
			console.error(error);
			
		} finally {
			setIsLoading(false);
		}
	}, [init]);

	return (
		<button
			className='w-full bg-white text-black py-2 px-4 md:py-[18px] md:px-[148px] rounded-2xl font-bold text-base uppercase hover:bg-gray-100 transition-colors'
			onClick={() => callAllApis()}
		>
			Pay Now
		</button>
	);
};

📚 Core API Documentation

1. RedotProvider Initialization Configuration

| Parameter Name | Type | Description | Required | |------------------|--------------------------|---------------------------------------| -------- | | lang | string | Multi-language, default English | No | | customizeTheme | Theme(Object) | Custom Theme | No | | chooseThemeByName| string | Select Built-in Theme Properties | No |

2. Core Methods

useRedot(RedotContextTypeOptional): RedotContextType

• Function: Retrieves methods provided by the SDK
• Parameter: undefined
• Return Value Type:

interface RedotContextType {
	// Built-in multi-language processing
	t: (key: string) => string;
	// Initialize SDK
	init: (options: InitOptions) => Promise<void>;
	// Destroy SDK
	destroy: () => void;
	// Change Multi-language
	changeLanguage: (lang: string) => void;
	// Change Built-in Theme
	changeThemeByClassName: (className: string) => void;
	//	Change Custom Theme
	changeCustomizeTheme: (theme: Theme) => void;
	// Refresh JWT Token
	refreshJwtToken: (jwtToken: string) => boolean;
}
type RedotContextTypeOptional = RedotContextType | undefined;

• Return: RedotContextType