Integrate TransactPay Standard Kit in React & Vue

Overview

Learn how to embed TransactPay’s hosted payment modal in your SPA using React or Vue—no backend for frontend shown here (you can add backend calls as needed). Covers:

Loading the SDK
Initializing checkout
Handling payment events (onCompleted, onClose, onError)

Prerequisites

TransactPay merchant account (with Standard Kit enabled)
Reactive project (React/Vue)
Test or Live public API key and encryption key
Unique order reference logic

1. Common Setup

Add this script to your index.html (before closing </body>):

<script src="https://payment-web-sdk.transactpay.ai/v1/checkout"></script>

2. React Integration

File: `src/components/PayButton.jsx`

import React from "react";

const PayButton = ({ amount, currency }) => {
  const makePayment = () => {
    const Checkout = new window.CheckoutNS.PaymentCheckout({
      firstName: "John",
      lastName: "Doe",
      mobile: "+2348012345678",
      country: "NG",
      email: "[email protected]",
      currency: currency || "NGN",
      amount: amount || 5000,
      reference: `ORD-${Date.now()}`,
      merchantReference: `ORD-${Date.now()}`,
      description: "Order Payment",
      apiKey: "YOUR_PUBLIC_API_KEY",
      encryptionKey: "YOUR_PUBLIC_ENCRYPTION_KEY",
      onCompleted: (data) => {
        console.log("Payment completed:", data);
        if (data?.status?.toLowerCase() === "successful") {
          alert("Payment successful!");
        } else {
          alert("Payment unsuccessful. Please try again.");
        }
      },
      onClose: () => {
        console.warn("Payment window closed by user.");
        alert("Payment cancelled. Please try again.");
      },
      onError: (error) => {
        console.error("Payment error:", error);
        alert("An error occurred. Please try again.");
      },
    });

    Checkout.init();
  };

  return (
    <button onClick={makePayment}>
      Pay ₦{(amount || 5000) / 100}
    </button>
  );
};

export default PayButton;

File: `src/App.jsx`

import React from "react";
import PayButton from "./components/PayButton";

function App() {
  return (
    <div style={{ padding: "2rem", textAlign: "center" }}>
      <h1>Demo – Pay with TransactPay</h1>
      <PayButton amount={7500} currency="NGN" />
    </div>
  );
}

export default App;

3. Vue Integration

File: `src/components/PayButton.vue`

<template>
  <button @click="makePayment">
    Pay ₦{{ (amount || 5000) / 100 }}
  </button>
</template>

<script>
export default {
  name: "PayButton",
  props: {
    amount: { type: Number, default: 5000 },
    currency: { type: String, default: "NGN" },
  },
  methods: {
    makePayment() {
      const Checkout = new window.CheckoutNS.PaymentCheckout({
        firstName: "Jane",
        lastName: "Doe",
        mobile: "+2348101234567",
        country: "NG",
        email: "[email protected]",
        currency: this.currency,
        amount: this.amount,
        reference: `ORD-${Date.now()}`,
        merchantReference: `ORD-${Date.now()}`,
        description: "Payment Description",
        apiKey: "YOUR_PUBLIC_API_KEY",
        encryptionKey: "YOUR_PUBLIC_ENCRYPTION_KEY",
        onCompleted: (data) => {
          console.log("Payment completed:", data);
          if (data?.status?.toLowerCase() === "successful") {
            alert("Payment successful!");
          } else {
            alert("Payment failed.");
          }
        },
        onClose: () => {
          alert("Payment closed.");
        },
        onError: (err) => {
          console.error("Payment error:", err);
          alert("An error occurred.");
        },
      });

      Checkout.init();
    },
  },
};
</script>

Use in App

<template>
  <div class="app">
    <h1>TransactPay Vue Checkout Demo</h1>
    <PayButton :amount="10000" currency="NGN" />
  </div>
</template>

<script>
import PayButton from "./components/PayButton.vue";

export default {
  name: "App",
  components: { PayButton },
};
</script>

Best Pracitces & Tips

Principle	Description
Unique References	Always use unique `reference` and `merchantReference` values (e.g. timestamps or UUIDs).
Backend Validation	Validate transaction records server-side, use webhooks where sensitive.
Key Management	Keep public keys in frontend, never expose secret keys.
User Experience	Disable button while loading, use loaders, and handle event callbacks robustly.

Summary

Load the checkout SDK via script tag
Initialize checkout with customer, order, and API key info
Handle onCompleted, onClose, and onError
Use secure, unique order references for reconciliation

Updated 1 day ago