React PhaJay NPM Package

Features

🏦 Payment Links - Single integration for all major Lao banks
📱 QR Code Payments - Bank-specific QR codes with real-time monitoring
💳 Credit Card Payments - Secure 3DS credit card processing
⚡ React Components - Ready-to-use components with TypeScript support
🎨 Customizable - Style with CSS classes, Tailwind CSS, or styled-components

Installation

Install the official react-phajay npm package:

npm install react-phajay

Or search for "react-phajay" on npmjs.com (opens in a new tab)

Quick Start

1. Setup Provider

import { PhaJayProvider } from 'react-phajay';
 
function App() {
  return (
    <PhaJayProvider config={{ secretKey: "your-secret-key" }}>
      {/* Your payment components */}
    </PhaJayProvider>
  );
}

2. Payment Components

import { PaymentQR, PaymentLink, PaymentCreditCard } from 'react-phajay';
 
// QR Code Payment
<PaymentQR 
  amount={50000}
  description="Coffee Payment"
  bank="BCEL"
  onSuccess={(response) => {
    console.log('QR Code:', response.qrCode);
    // Display QR code in your UI
  }}
  onPaymentSuccess={(data) => {
    console.log('Payment completed!', data);
  }}
/>
 
// Payment Link (redirects to payment page)
<PaymentLink 
  amount={100000}
  description="Order Payment"
  onSuccess={(response) => {
    // Auto redirects to payment page
    console.log('Redirecting to:', response.redirectURL);
  }}
/>
 
// Credit Card Payment (redirects to card form)
<PaymentCreditCard 
  amount={100}  // Amount in USD
  description="Premium Service"
  onSuccess={(response) => {
    // Auto redirects to card payment
    console.log('Payment URL:', response.paymentUrl);
  }}
/>

3. Custom Styling

// Using CSS classes
<PaymentQR 
  amount={25000}
  bank="BCEL"
  className="bg-blue-500 text-white px-4 py-2 rounded"
  onSuccess={(response) => console.log(response.qrCode)}
>
  Generate QR Code
</PaymentQR>
 
// Using Tailwind CSS
<PaymentLink 
  amount={50000}
  className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-bold py-3 px-6 rounded-lg shadow-lg transform transition-all duration-200 hover:scale-105"
>
  Create Payment Link
</PaymentLink>

Configuration

Get your secret key from PhaJay Portal:

Register and complete KYC verification
Go to Key Management to get your secret key
Configure callback URLs in Settings

// Basic configuration
const client = new PhaJayClient({
  secretKey: 'your-secret-key' // Required
});

Supported Banks

Code	Bank Name
BCEL	Banque pour le Commerce Extérieur Lao
JDB	Joint Development Bank
LDB	Lao Development Bank
IB	Indochina Bank
STB	ST Bank Laos

Component Props Reference

PaymentQR

Prop	Type	Required	Description
amount	number	✅	Payment amount in LAK
bank	string	✅	Bank code (BCEL, JDB, LDB, IB, STB)
description	string	✅	Payment description
onSuccess	(response) => void	✅	Required: Handle QR code data
onPaymentSuccess	(data) => void	❌	Real-time payment callback
className	string	❌	Custom CSS classes
children	ReactNode	❌	Button text (default: "Generate QR Code")

PaymentLink

Prop	Type	Required	Description
amount	number	✅	Payment amount in LAK
description	string	✅	Payment description
onSuccess	(response) => void	❌	Payment link created callback
autoRedirect	boolean	❌	Auto redirect (default: true)
className	string	❌	Custom CSS classes
children	ReactNode	❌	Button text (default: "Create Payment Link")

PaymentCreditCard

Prop	Type	Required	Description
amount	number	✅	Payment amount in USD
description	string	✅	Payment description
onSuccess	(response) => void	❌	Payment URL created callback
autoRedirect	boolean	❌	Auto redirect (default: true)
className	string	❌	Custom CSS classes
children	ReactNode	❌	Button text (default: "Pay with Credit Card")

Error Handling

import { PhaJayAPIError } from 'react-phajay';
 
try {
  const paymentLink = await client.paymentLink.createPaymentLink({
    amount: 50000,
    description: 'Test payment'
  });
} catch (error) {
  if (error instanceof PhaJayAPIError) {
    console.error('API Error:', error.code, error.message);
  }
}

Last updated: 6 months ago

WordPress Plugin Flutter Phajay