DEV Community

Cover image for How to Integrate ZinariPay with Your Application Using the NPM Package
Christopher Akanmu for Zinari Technologies Nigeria LTD

Posted on • Edited on

How to Integrate ZinariPay with Your Application Using the NPM Package

Integrating cryptocurrency payments into your web application has never been easier. ZinariPay offers a robust NPM package that allows developers to seamlessly add USDT and USDC payment functionalities. In this guide, we will walk you through the steps to integrate ZinariPay into your application using the NPM package.

Step 1: Installation

First, you'll need to install the ZinariPay package. This can be done using either npm or yarn, depending on your preference.

Using npm
To install using npm, run the following command in your terminal:

npm install zinari-pay
Enter fullscreen mode Exit fullscreen mode

Using yarn
Alternatively, you can use yarn to install the package:

yarn add zinari-pay
Enter fullscreen mode Exit fullscreen mode

Step 2: Configuration

Once the package is installed, you need to configure it for your application. The configuration involves creating an instance of ZinariPay with your specific settings.

Example Configuration
Here's a basic configuration example using vanilla JavaScript:

import ZinariPay from 'zinari-pay';

const zinariPay = new ZinariPay({
  appId: 'your-app-id',
  publicKey: 'your-public-key',
  log: process.env.NODE_ENV === 'development', /** Recommendation: Only 
use for development to avoid exposing sensitive data to end users
   */
});
Enter fullscreen mode Exit fullscreen mode

You can get you appId and publicKey from you dashboard

Step 3: Initiate a Transaction

With your configuration set up, you can now initiate a transaction. This can be done using the initiateTransaction method.

Vanilla JavaScript Example
Here's how you would initiate a transaction:

import ZinariPay from 'zinari-pay';

const zinariPay = new ZinariPay({...})

const payWithCryptoButton = document.getElementById("your-payment-button");

payWithCryptoButton.addEventListener("click", () => {
  zinariPay.initiateTransaction({
    amount: 10000,
    notificationEmailAddress: 'users@email.com',
    details: {
      /** Add all the extra details you need here,
       * we  call your webhook url with all this data included */
    },
    onConfirmed: (transactionDetails) => {
      /** Do something when the transaction is confirmed */
    }
  });
});
Enter fullscreen mode Exit fullscreen mode

React Example
If you're using React, you can integrate ZinariPay as follows:

import ZinariPay from 'zinari-pay';

const zinariPay = new ZinariPay({
  appId: 'your-app-id',
  publicKey: 'your-public-key',
  log: process.env.NODE_ENV === 'development',
});

const App = () => {
  const handleClick = useCallback(({price, email}) => {
    zinariPay.initiateTransaction({
      amount: price,
      notificationEmailAddress: email,
      onConfirmed: (transactionDetails) => {
        /** Do something when the transaction is confirmed */
      },
      details: {
        /** Add all the extra details you need here,
         * we  call your webhook url with all this data included */
      },
    });
  }, []);

  return <button onClick={handleClick}>
    Pay with Cryptocurrency
  </button>
}
Enter fullscreen mode Exit fullscreen mode

Conclusion
Integrating ZinariPay into your application using the NPM package is straightforward and efficient. With support for USDT and USDC, encrypted transactions, and easy-to-use methods, ZinariPay is the perfect solution for adding cryptocurrency payments to your web application.
For more detailed information, visit the official documentation and start building today!

ZinariPay Customer Payment Flow
ZinariPay Customer Payment Flow
ZinariPay Customer Payment Flow
ZinariPay Customer Payment Flow
ZinariPay Customer Payment Flow

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay