ແພັກເກັດ NPM React PhaJay

ຄຸນສົມບັດ

🏦 Payment Links - ເຊື່ອມຕໍ່ຄັ້ງດຽວ ຮອງຮັບທຸກທະນາຄານຫຼັກຂອງລາວ
📱 ການຊຳລະດ້ວຍ QR Code - QR code ສະເພາະຂອງແຕ່ລະທະນາຄານ ພ້ອມການຕິດຕາມແບບ real-time
💳 ການຊຳລະດ້ວຍບັດເຄຣດິດ - ປະມວນຜົນບັດເຄຣດິດ 3DS ທີ່ປອດໄພ
⚡ React Components - ຄອມໂພເນັນພ້ອມໃຊ້ງານ ແລະ ຮອງຮັບ TypeScript
🎨 ປັບແຕ່ງໄດ້ - ຕົກແຕ່ງດ້ວຍ CSS classes, Tailwind CSS ຫຼື styled-components

ການຕິດຕັ້ງ

ຕິດຕັ້ງແພັກເກັດ npm react-phajay ຢ່າງເປັນທາງການ:

npm install react-phajay

ຫຼື ຄົ້ນຫາ "react-phajay" ໃນ npmjs.com (opens in a new tab)

ເລີ່ມຕົ້ນຢ່າງວ່ອງໄວ

1. ຕັ້ງຄ່າ Provider

import { PhaJayProvider } from 'react-phajay';
 
function App() {
  return (
    <PhaJayProvider config={{ secretKey: "your-secret-key" }}>
      {/* ຄອມໂພເນັນການຊຳລະຂອງທ່ານ */}
    </PhaJayProvider>
  );
}

2. ຄອມໂພເນັນການຊຳລະ

import { PaymentQR, PaymentLink, PaymentCreditCard } from 'react-phajay';
 
// ການຊຳລະດ້ວຍ QR Code
<PaymentQR 
  amount={50000}
  description="Coffee Payment"
  bank="BCEL"
  onSuccess={(response) => {
    console.log('QR Code:', response.qrCode);
    // ສະແດງ QR code ໃນ UI ຂອງທ່ານ
  }}
  onPaymentSuccess={(data) => {
    console.log('Payment completed!', data);
  }}
/>
 
// Payment Link (ປ່ຽນເສັ້ນທາງໄປໜ້າຊຳລະເງິນ)
<PaymentLink 
  amount={100000}
  description="Order Payment"
  onSuccess={(response) => {
    // ປ່ຽນເສັ້ນທາງໄປໜ້າຊຳລະເງິນອັດຕະໂນມັດ
    console.log('Redirecting to:', response.redirectURL);
  }}
/>
 
// ການຊຳລະດ້ວຍບັດເຄຣດິດ (ປ່ຽນເສັ້ນທາງໄປແບບຟອມບັດ)
<PaymentCreditCard 
  amount={100}  // ຈຳນວນເງິນເປັນ USD
  description="Premium Service"
  onSuccess={(response) => {
    // ປ່ຽນເສັ້ນທາງໄປໜ້າຊຳລະດ້ວຍບັດອັດຕະໂນມັດ
    console.log('Payment URL:', response.paymentUrl);
  }}
/>

3. ການຕົກແຕ່ງແບບກຳນົດເອງ

// ໃຊ້ 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>
 
// ໃຊ້ 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>

ການຕັ້ງຄ່າ

ຮັບ secret key ຂອງທ່ານຈາກ PhaJay Portal:

ລົງທະບຽນ ແລະ ຢືນຢັນຕົວຕົນ KYC ໃຫ້ສຳເລັດ
ໄປທີ່ Key Management ເພື່ອຮັບ secret key ຂອງທ່ານ
ຕັ້ງຄ່າ callback URLs ໃນ Settings

// ການຕັ້ງຄ່າພື້ນຖານ
const client = new PhaJayClient({
  secretKey: 'your-secret-key' // ຈຳເປັນ
});

ທະນາຄານທີ່ຮອງຮັບ

ລະຫັດ	ຊື່ທະນາຄານ
BCEL	Banque pour le Commerce Extérieur Lao
JDB	Joint Development Bank
LDB	Lao Development Bank
IB	Indochina Bank
STB	ST Bank Laos

ເອກະສານອ້າງອີງ Props ຂອງຄອມໂພເນັນ

PaymentQR

Prop	ປະເພດ	ຈຳເປັນ	ຄຳອະທິບາຍ
amount	number	✅	ຈຳນວນເງິນຊຳລະເປັນ LAK
bank	string	✅	ລະຫັດທະນາຄານ (BCEL, JDB, LDB, IB, STB)
description	string	✅	ລາຍລະອຽດການຊຳລະ
onSuccess	(response) => void	✅	ຈຳເປັນ: ຈັດການຂໍ້ມູນ QR code
onPaymentSuccess	(data) => void	❌	callback ການຊຳລະແບບ real-time
className	string	❌	CSS classes ແບບກຳນົດເອງ
children	ReactNode	❌	ຂໍ້ຄວາມປຸ່ມ (ຄ່າເລີ່ມຕົ້ນ: "Generate QR Code")

PaymentLink

Prop	ປະເພດ	ຈຳເປັນ	ຄຳອະທິບາຍ
amount	number	✅	ຈຳນວນເງິນຊຳລະເປັນ LAK
description	string	✅	ລາຍລະອຽດການຊຳລະ
onSuccess	(response) => void	❌	callback ເມື່ອສ້າງ payment link ສຳເລັດ
autoRedirect	boolean	❌	ປ່ຽນເສັ້ນທາງອັດຕະໂນມັດ (ຄ່າເລີ່ມຕົ້ນ: true)
className	string	❌	CSS classes ແບບກຳນົດເອງ
children	ReactNode	❌	ຂໍ້ຄວາມປຸ່ມ (ຄ່າເລີ່ມຕົ້ນ: "Create Payment Link")

PaymentCreditCard

Prop	ປະເພດ	ຈຳເປັນ	ຄຳອະທິບາຍ
amount	number	✅	ຈຳນວນເງິນຊຳລະເປັນ USD
description	string	✅	ລາຍລະອຽດການຊຳລະ
onSuccess	(response) => void	❌	callback ເມື່ອສ້າງ Payment URL ສຳເລັດ
autoRedirect	boolean	❌	ປ່ຽນເສັ້ນທາງອັດຕະໂນມັດ (ຄ່າເລີ່ມຕົ້ນ: true)
className	string	❌	CSS classes ແບບກຳນົດເອງ
children	ReactNode	❌	ຂໍ້ຄວາມປຸ່ມ (ຄ່າເລີ່ມຕົ້ນ: "Pay with Credit Card")

ການຈັດການຂໍ້ຜິດພາດ

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);
  }
}

ອັບເດດຫຼ້າສຸດ: 7 ເດືອນກ່ອນ

ປລັກອິນ WordPress Flutter Phajay