Video Tutorials

Table of Contents

• Zinari Pay
  • Links
  • Features
  • Fee Structure
  • Installation
    • Using npm
    • Using yarn
  • Usage
    • Vanilla JavaScript Example
    • React Example
  • Zinari Pay CDN Integration
  • Notes
  • Known Issues
    • CORS Error
  • Happy Coding

Zinari Pay

zinari-pay is a secure and easy-to-integrate cryptocurrency payment gateway designed to enable businesses to accept crypto payments online. It supports stablecoins (USDT & USDC), offers encrypted transaction handling, and provides seamless integration for developers and business owners.

Links

• Official Website
• NPM Package
• Documentation

Features

• Accept stablecoins payments: USDT & USDC
• Secure encrypted transactions
• Automatic payment components management
• Comprehensive logging for easy debugging
• Real-time transaction status updates
• Easy integration with JavaScript and React
• CDN integration for quick setup

Fee Structure

ZinariPay charges a straightforward and affordable fee structure:

Transaction Fee	Minimum Fee	Maximum Fee
1% per transaction	$1	$5

Example:

• Small transactions: If a customer pays $50, the 1% fee would be $0.50. However, due to the $1 minimum, the fee charged is $1.
• Large transactions: If a customer pays $1,000, the 1% fee would be $10. However, due to the $5 maximum, the fee charged is $5.

For detailed pricing information, visit our Pricing Page.

Installation

Using npm

1npm install zinari-pay

Using yarn

1yarn add zinari-pay

Usage

Vanilla JavaScript Example

1import ZinariPay from 'zinari-pay';
2
3const zinariPay = new ZinariPay({
4  appId: 'your-app-id',
5  apiKey: 'your-api-key',
6  publicKey: 'your-public-key',
7  log: process.env.NODE_ENV === 'development',
8});
9
10document.getElementById("your-payment-button").addEventListener("click", () => {
11  zinariPay.initiateTransaction({
12    amount: 1000,
13    notificationEmailAddress: 'user@email.com',
14    details: {userId: '123'},
15    onSuccess: (transactionDetails) => { /* success action */
16    },
17    onFailure: (transactionDetails) => { /* failure action */
18    },
19    onIncomplete: (transactionDetails) => { /* incomplete action */
20    },
21    onExcess: (transactionDetails) => { /* excess action */
22    },
23  });
24});

React Example

1import ZinariPay from 'zinari-pay';
2
3const zinariPay = new ZinariPay({
4  appId: 'your-app-id',
5  apiKey: 'your-api-key',
6  publicKey: 'your-public-key',
7  log: process.env.NODE_ENV === 'development',
8});
9
10const App = () => {
11  const handlePayment = () => {
12    zinariPay.initiateTransaction({
13      amount: 500,
14      notificationEmailAddress: 'user@example.com',
15      details: {orderId: '567'},
16      onSuccess: (transactionDetails) => { /* success action */
17      },
18      onFailure: (transactionDetails) => { /* failure action */
19      },
20      onIncomplete: (transactionDetails) => { /* incomplete action */
21      },
22      onExcess: (transactionDetails) => { /* excess action */
23      },
24    });
25  };
26
27  return <button onClick={handlePayment}>Pay with Crypto</button>;
28};

Zinari Pay CDN Integration

1
2<script src="https://cdn.jsdelivr.net/npm/zinari-pay/dist/zinari-pay-cdn-bundle.umd.js"></script>
3<script>
4    window.zinariPay = new ZinariPay({
5        appId: 'your-app-id',
6        apiKey: 'your-api-key',
7        publicKey: 'your-public-key',
8    });
9</script>

Notes

• Replace placeholder values (your-app-id, your-api-key, your-public-key) with actual credentials.
• Always ensure script tags use the latest CDN bundle.

Known Issues

CORS Error

Resolve by adding your environment URLs to whitelisted URLs in your ZinariPay console.

Happy Coding

• CzA