Payxy Payment Gateway SDK

Payxy is a lightweight JavaScript SDK that allows merchants and developers to easily integrate the Payxy payment gateway into their web applications via a seamless iframe experience.

✨ Features

• Seamless iframe-based payment experience.
• Secure communication via postMessage.
• Simple setup and integration.
• Environment-aware with explicit support for development, staging, and production.
• Custom callbacks for handling transaction results.

📦 Installation

Using npm

npm install payxy

Using yarn

yarn add payxy

🛠️ Usage

1. Import and Initialize

import { Payxy } from "payxy";

const payxy = new Payxy({
  accessCode: "YOUR_ACCESS_CODE",
  environment: "staging", // "development" | "staging" | "production"
  onSuccess: (data) => {
    console.log(data)
  },
  onError: (data) => {
    console.log(data)
  }
});

1b. Optional URL Overrides

Use this when your environments do not use the SDK defaults.

import { Payxy } from "payxy";

const payxy = new Payxy({
  accessCode: "YOUR_ACCESS_CODE",
  environment: "staging",
  environmentUrls: {
    development: "http://localhost:5006",
    staging: "https://staging.your-payxy-domain.com",
    production: "https://payxy.your-domain.com"
  },
  onSuccess: (data) => {
    console.log(data)
  },
  onError: (data) => {
    console.log(data)
  }
});

You can also set a single direct URL with origin if needed:

const payxy = new Payxy({
  accessCode: "YOUR_ACCESS_CODE",
  origin: "https://pg-ip6u.onrender.com",
  onSuccess: (data) => {
    console.log(data)
  },
  onError: (data) => {
    console.log(data)
  }
});

Note: origin and environmentUrls values must be full http or https URLs. Invalid values throw a runtime error during SDK initialization.

2. Launch Payment

payxy.init();

🧱 SDK Options

| Option | Type | Required | Description | |--------------|----------|----------|-------------| | accessCode | string | ✅ | Unique access code generated for the transaction | | environment | "development" \| "staging" \| "production" | ❌ | Runtime target environment. If omitted, localhost resolves to development; all other hostnames resolve to production | | environmentUrls | Partial<{ development: string; staging: string; production: string }> | ❌ | Override one or more environment URLs | | origin | string | ❌ | Direct URL override that takes priority over environment/environmentUrls | | onSuccess | callback | ✅ | A callback function to get success data | | onError | callback | ❌ | A callback funtion to get error data | | onClose | callback | ❌ | A callback function called when payment modal closes |

🧹 Cleanup

To close the payment modal or remove the iframe manually:

payxy.close();

📄 License

MIT