npm package: @photos3016/paymenttest
Description: A robust and easy-to-use package for integrating with the payment gateway, designed specifically for cryptocurrency transactions. This package provides developers with a seamless way to handle payments, manage transactions, and interact with the Pyamnet A
Author: Shivam Tyagi
Latest version: 1.8.7

# PayAiro-Payment Gateway SDK

## Introduction

This SDK allows merchants to integrate a seamless payment gateway into their React, Angular, or Vue applications.

## Installation

Install the SDK using npm:

```sh
npm install @photos3016/paymenttest
```

## Usage

### React

```jsx
import { createAPI } from "@photos3016/paymenttest";
import React, { useState } from "react";

const PaymentPage = () => {
  const [data, setData] = useState(null);
  const apikey = "YOUR_SECRET_KEY";
  const merchantId = "YOUR_MERCHANT_ID";
  const api = createAPI(apikey, merchantId);

  const handlePayment = async (item) => {
    try {
      const res = await api.paymentTest({
        amount: item.amount,
        json: [
          {
            name: item.name,
            quantity: 1,
            amount: item.amount,
            tax: item.tax,
            price: item.price,
          },
        ],
      });
      setData(res);
    } catch (error) {
      console.error("Transaction failed:", error.message);
    }
  };

  return (
    <div>
      <h1>Payment Gateway</h1>
      <button
        onClick={() => handlePayment({ name: "Test Product", amount: 100 })}
      >
        Pay $100
      </button>
    </div>
  );
};

export default PaymentPage;
```

### Angular

```typescript
import { Component } from "@angular/core";
import { createAPI } from "@photos3016/paymenttest";

@Component({
  selector: "app-payment",
  template: `<button (click)="handlePayment()">Pay $100</button>`,
})
export class PaymentComponent {
  api = createAPI("YOUR_SECRET_KEY", "YOUR_MERCHANT_ID");

  handlePayment() {
    this.api
      .paymentTest({
        amount: 100,
        json: [
          {
            name: "Test Product",
            quantity: 1,
            amount: 100,
            tax: 0,
            price: 100,
          },
        ],
      })
      .then((res) => console.log(res))
      .catch((error) => console.error("Transaction failed:", error.message));
  }
}
```

### Vue

```vue
<template>
  <button @click="handlePayment">Pay $100</button>
</template>

<script>
import { createAPI } from "@photos3016/paymenttest";

export default {
  data() {
    return {
      api: createAPI("YOUR_SECRET_KEY", "YOUR_MERCHANT_ID"),
    };
  },
  methods: {
    async handlePayment() {
      try {
        const res = await this.api.paymentTest({
          amount: 100,
          json: [
            {
              name: "Test Product",
              quantity: 1,
              amount: 100,
              tax: 0,
              price: 100,
            },
          ],
        });
        console.log(res);
      } catch (error) {
        console.error("Transaction failed:", error.message);
      }
    },
  },
};
</script>
```

## Customizing the SDK

You can customize the payment UI with primary/secondary colors, button styles, and logos.

![Customize SDK](https://api.payairo.com/media/logo/customized.png)

## Adding Project URLs

Merchants can add a **callback URL** and **success URL** while creating a project.

![Adding URLs](https://api.payairo.com/media/logo/url_edit.png)

## Getting Your Secret Key

After creating a project, you'll receive a secret key. This key is shown only once.

![Secret Key](https://api.payairo.com/media/logo/created.png)

## Merchant Panel

Manage all projects, update callback and success URLs, and view received transactions from users in the **Merchant Panel**.

🔗 [Access the Merchant Panel](https://merchant.payairo.com)

## Support

For any issues, contact our support team at support@payairo.com.

---

**Note:** Replace `YOUR_SECRET_KEY` and `YOUR_MERCHANT_ID` with actual values from the Merchant Panel.