DEV Community

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

Posted on • Edited on

How to Integrate ZinariPay with Your Application Using the CDN

If you’re looking for a quick and easy way to integrate cryptocurrency payments into your web application, ZinariPay’s CDN option is the perfect solution. With no need to install any packages, you can start accepting USDT and USDC payments by simply including a script tag in your HTML file.

Step 1: Installation

Integrating ZinariPay via CDN is as simple as adding a script tag to your HTML file. Here’s how you can do it.

<script src="https://cdn.jsdelivr.net/npm/zinari-pay/dist/zinari-pay-cdn-bundle.umd.js"></script>
Enter fullscreen mode Exit fullscreen mode

You can also use UNPKG as an alternative:

<script src="https://unpkg.com/zinari-pay/dist/zinari-pay-cdn-bundle.umd.js"></script>
Enter fullscreen mode Exit fullscreen mode

This script will load the ZinariPay library directly into your application, allowing you to start configuring and initiating transactions right away.

Step 2: Create a New Instance

After including the script, you’ll need to create a new instance of the ZinariPay object. This is where you’ll configure your payment options, such as the publicKey and appId.

Example Configuration

Here’s a basic example of how to create a new instance:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zinari Pay Integration</title>
</head>
<body>
<!-- Your content -->

<!-- Include the Zinari Pay CDN Bundle -->
<script src="https://cdn.jsdelivr.net/npm/zinari-pay/dist/zinari-pay-cdn-bundle.umd.js"></script>
<script>
    // Create a new instance of ZinariPay
    window.zinariPay = new ZinariPay({
        appId: 'your-app-id',
        publicKey: 'your-public-key',
    });
</script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

You can get you publicKey and appId from you dashboard.

Step 3: Initiate a Transaction

Once your instance is configured, you can initiate a transaction. This can be done by calling the initiateTransaction method on your ZinariPay instance.

Example of Transaction Initiation

// Access the ZinariPay instance
const zinariPayInstance = window.zinariPay;

// Example: Initiate a transaction
zinariPayInstance.initiateTransaction({
  amount: 100,
  details: {orderId: '#1234', description: 'Purchase Order #1234'},
  onConfirmed: (response) => {
    console.log('Transaction Confirmed:', response);
  },
});
Enter fullscreen mode Exit fullscreen mode

In this example, the transaction initiation is tied to a button click event. When the user clicks the “Pay with ZinariPay” button, the transaction process begins.

Conclusion

Integrating ZinariPay using the CDN is a hassle-free way to start accepting cryptocurrency payments on your website. With just a few lines of code, you can provide your users with the option to pay using USDT or USDC, all while enjoying the security and convenience of ZinariPay’s encrypted transaction handling.

For more information, visit our official documentation and start integrating ZinariPay 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)

Cloudinary image

Zoom pan, gen fill, restore, overlay, upscale, crop, resize...

Chain advanced transformations through a set of image and video APIs while optimizing assets by 90%.

Explore

👋 Kindness is contagious

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

Okay