Skip to content

lailaolabdev/react-phajay

Repository files navigation

React PhaJay

Official React TypeScript SDK for PhaJay Payment Gateway - Supporting Payment QR, Payment Link and Credit Card services in Lao PDR.

πŸ” NPM Package: react-phajay | πŸš€ Install: npm install react-phajay

npm version Downloads TypeScript License: MIT

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

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:

  1. Register and complete KYC verification
  2. Go to Key Management to get your secret key
  3. 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);
  }
}

Support & Documentation

License

MIT License - see the LICENSE file for details.


πŸ” Search & Discovery

NPM Package: react-phajay

Search Terms: react-phajay npm, phajay react sdk, react payment gateway laos, npm react payment, phajay typescript

Made with ❀️ by PhaJay Payment Gateway

About

Official React TypeScript SDK for PhaJay Payment Gateway (Laos). npm: react-phajay

Topics

Resources

License

Security policy

Stars

1 star

Watchers

0 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors