🎉 PhaJay is service now. Get Started

v1
Plugin ແລະ SDK
Flutter Phajay

PhaJay Flutter SDK

PhaJay Flutter SDK ຊ່ວຍໃຫ້ທ່ານສ້າງປະສົບການການຊຳລະເງິນທີ່ລື່ນໄຫຼ ແລະ ປອດໄພ ພາຍໃນແອັບ Android ແລະ iOS ທີ່ພັດທະນາດ້ວຍ Flutter. SDK ມີໜ້າຈໍ UI ແລະ ຄອມໂພເນັນທີ່ປັບແຕ່ງໄດ້ຢ່າງເຕັມທີ່ ເພື່ອເກັບລວບລວມ ແລະ ປະມວນຜົນຂໍ້ມູນການຊຳລະຜ່ານເຄືອຂ່າຍການຊຳລະຫຼາຍທະນາຄານ ແລະ QR ຂອງ PhaJay.

ນອກຈາກນີ້ ຍັງຮອງຮັບການອັບເດດທຸລະກຳແບບ real-time ແລະ ໃຊ້ໄດ້ຫຼາຍແພລດຟອມ ລວມທັງ Android, iOS, Web, macOS, Linux ແລະ Windows.

ຄຸນສົມບັດ

  • ເປີດ payment link ພາຍໃນແອັບຂອງທ່ານ
  • ເຊື່ອມຕໍ່ງ່າຍດ້ວຍ widget ດຽວ
  • ອັບເດດທຸລະກຳແບບ real-time
  • ຮອງຮັບຫຼາຍແພລດຟອມ (Android, iOS, Web, macOS, Linux, Windows)
  • ການປະມວນຜົນການຊຳລະທີ່ປອດໄພ ແລະ ເຊື່ອຖືໄດ້
  • ຄອມໂພເນັນ UI ທີ່ປັບແຕ່ງໄດ້ຢ່າງເຕັມທີ່
  • ມີ font Noto Sans Lao ໃນຕົວ
  • ລະບົບ theme ທີ່ສອດຄ່ອງກັນໃນທຸກໜ້າການຊຳລະ

ການຕິດຕັ້ງ

ເພີ່ມຂໍ້ຄວາມນີ້ໃສ່ໄຟລ໌ pubspec.yaml ຂອງທ່ານ:

dependencies:
	flutter_phajay: ^0.0.17

google_fonts ຖືກລວມເຂົ້າມາອັດຕະໂນມັດເປັນ dependency ຂອງ flutter_phajay ເພື່ອຮອງຮັບ Noto Sans Lao, ດັ່ງນັ້ນທ່ານບໍ່ຕ້ອງເພີ່ມເອງ.

ຈາກນັ້ນໃຫ້ແລ່ນຄຳສັ່ງ:

flutter pub get

ການຕັ້ງຄ່າແພລດຟອມ

Android

1. ສິດເຂົ້າເຖິງອິນເຕີເນັດ (ຈຳເປັນ)

ເພີ່ມໃສ່ android/app/src/main/AndroidManifest.xml:

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
		<uses-permission android:name="android.permission.INTERNET" />
 
		<application>
				<!-- Your app configuration -->
		</application>
</manifest>

2. ການຕັ້ງຄ່າ Deep Link (ຈຳເປັນສຳລັບ callback ການຊຳລະ)

ເພີ່ມ intent filter ຕໍ່ໄປນີ້ພາຍໃນ MainActivity ຂອງທ່ານໃນ android/app/src/main/AndroidManifest.xml:

<activity
		android:name=".MainActivity"
		android:exported="true"
		android:launchMode="singleTop"
		android:theme="@style/LaunchTheme">
 
		<intent-filter>
				<action android:name="android.intent.action.MAIN"/>
				<category android:name="android.intent.category.LAUNCHER"/>
		</intent-filter>
 
		<intent-filter android:autoVerify="true">
				<action android:name="android.intent.action.VIEW" />
				<category android:name="android.intent.category.DEFAULT" />
				<category android:name="android.intent.category.BROWSABLE" />
				<data android:scheme="phajay" android:host="payment" />
		</intent-filter>
</activity>

3. ການເຊື່ອມຕໍ່ແອັບທະນາຄານ (ທາງເລືອກ)

ຖ້າທ່ານຕ້ອງການເປີດແອັບທະນາຄານສະເພາະ, ໃຫ້ເພີ່ມ queries ໃນ android/app/src/main/AndroidManifest.xml:

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
		<queries>
				<package android:name="com.jdb.mobile.jdb" />
				<package android:name="com.bcel.one" />
		</queries>
 
		<application>
				<!-- Your app configuration -->
		</application>
</manifest>

iOS

1. ການຕັ້ງຄ່າ Deep Link (ຈຳເປັນສຳລັບ callback ການຊຳລະ)

ເພີ່ມໃສ່ ios/Runner/Info.plist:

<key>CFBundleURLTypes</key>
<array>
		<dict>
				<key>CFBundleURLName</key>
				<string>phajay.payment.callback</string>
				<key>CFBundleURLSchemes</key>
				<array>
						<string>phajay</string>
				</array>
		</dict>
</array>
 
<key>LSApplicationQueriesSchemes</key>
<array>
		<string>jdbbank</string>
		<string>onepay</string>
</array>

2. ຄວາມປອດໄພເຄືອຂ່າຍ (iOS 9.0+)

ຖ້າເຊື່ອມຕໍ່ກັບ endpoint ແບບ HTTP (ສະເພາະໃນການພັດທະນາເທົ່ານັ້ນ), ໃຫ້ເພີ່ມ:

<key>NSAppTransportSecurity</key>
<dict>
		<key>NSAllowsArbitraryLoads</key>
		<true/>
</dict>

ສຳລັບ production, ໃຫ້ໃຊ້ HTTPS ສະເໝີ ແລະ ລົບການຕັ້ງຄ່ານີ້ອອກ.

ຂໍ້ຄວນພິຈາລະນາດ້ານຄວາມປອດໄພ

ການນຳໃຊ້ໃນ Production

  • ໃຊ້ endpoint ແບບ HTTPS ເທົ່ານັ້ນ
  • ເກັບ secret key ໄວ້ຢ່າງປອດໄພ
  • ກວດສອບ parameter ຂອງ deep link ທີ່ເຂົ້າມາທັງໝົດ
  • ພິຈາລະນາໃຊ້ certificate pinning ເພື່ອເພີ່ມຄວາມປອດໄພ

ການຈັດການ Secret Key

// ຢ່າຝັງ secret key ໄວ້ໃນ source code ໂດຍກົງ
PaymentLinkScreen(
	publicKey: "your-secret-key-here",
);
 
// ແນະນຳ: ສົ່ງ key ຜ່ານການຕັ້ງຄ່າ build/runtime
PaymentLinkScreen(
	publicKey: const String.fromEnvironment('PHAJAY_SECRET_KEY'),
);

ການນຳໃຊ້

1. Import ໄລບຣາຣີ

import 'package:flutter_phajay/flutter_phajay.dart';

2. ທາງເລືອກ: ໃຊ້ Theme Noto Sans Lao

import 'package:flutter/material.dart';
import 'package:flutter_phajay/flutter_phajay.dart';
 
void main() {
	runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
	const MyApp({super.key});
 
	@override
	Widget build(BuildContext context) {
		return MaterialApp(
			title: 'My App',
			theme: PhajayTheme.lightTheme,
			home: const MyHomePage(),
		);
	}
}

3. ເພີ່ມ PaymentLinkScreen

PaymentLinkScreen(
	amount: 100,
	description: "Test Payment",
	publicKey: r"{YOUR_SECRET_KEY}",
	onPaymentSuccess: () {
		print('Payment successful!');
	},
	onPaymentError: (String error) {
		print('Payment failed: $error');
	},
);

ການຕັ້ງຄ່າ

ກຳນົດ Base URL

import 'package:flutter_phajay/flutter_phajay.dart';
 
void main() {
	// ຄ່າເລີ່ມຕົ້ນ: https://payment-gateway.phajay.co
	PhajayConfig.setBaseUrl('https://staging-payment-gateway.phajay.co');
	runApp(const MyApp());
}
 
// ທີ່ມີໃຫ້ໃຊ້:
// PhajayConfig.baseUrl
// PhajayConfig.setBaseUrl(url)
// PhajayConfig.resetToDefault()
// PhajayConfig.createPaymentLink
// PhajayConfig.creditCardPayment
// PhajayConfig.wechatAlipayPayment
// PhajayConfig.getTransaction
// PhajayConfig.getPaymentMethods
// PhajayConfig.uploadsPath

ການປັບແຕ່ງ Theme

ໃຊ້ Theme ທີ່ມີມາໃຫ້

import 'package:flutter/material.dart';
import 'package:flutter_phajay/flutter_phajay.dart';
 
class MyApp extends StatelessWidget {
	const MyApp({super.key});
 
	@override
	Widget build(BuildContext context) {
		return MaterialApp(
			theme: PhajayTheme.lightTheme,
			home: const MyHomePage(),
		);
	}
}

ໃຊ້ Text Style ແຕ່ລະແບບ

import 'package:flutter/material.dart';
import 'package:flutter_phajay/flutter_phajay.dart';
 
Text('Main Title', style: PhajayTheme.heading1);
Text('Section Header', style: PhajayTheme.heading2);
Text('Subsection', style: PhajayTheme.heading3);
Text('Body content', style: PhajayTheme.bodyText);
Text('Small text', style: PhajayTheme.bodyTextSmall);
Text('Caption', style: PhajayTheme.caption);
 
Text(
	'Custom',
	style: PhajayTheme.bodyText.copyWith(
		color: Colors.blue,
		fontWeight: FontWeight.bold,
	),
);
 
Text(
	'Custom Style',
	style: PhajayTheme.notoSansLao(
		fontSize: 20,
		fontWeight: FontWeight.w600,
		color: Colors.green,
	),
);

ຈຸດເດັ່ນຂອງ Theme:

  • ການສະແດງຜົນ Noto Sans Lao ທີ່ເໝາະສົມ
  • ຕົວອັກສອນທີ່ສອດຄ່ອງກັນ
  • ອ່ານງ່າຍໃນທຸກຂະໜາດໜ້າຈໍ
  • ຂະຫຍາຍ style ໄດ້ດ້ວຍ .copyWith()

ຕົວຢ່າງແບບຄົບຖ້ວນ

import 'package:flutter/material.dart';
import 'package:flutter_phajay/flutter_phajay.dart';
 
void main() {
	runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
	const MyApp({super.key});
 
	@override
	Widget build(BuildContext context) {
		return MaterialApp(
			title: 'Flutter Phajay Example',
			theme: PhajayTheme.lightTheme,
			home: const PaymentExampleScreen(),
		);
	}
}
 
class PaymentExampleScreen extends StatelessWidget {
	const PaymentExampleScreen({super.key});
 
	@override
	Widget build(BuildContext context) {
		return Scaffold(
			appBar: AppBar(
				title: Text('Payment Example', style: PhajayTheme.heading2),
			),
			body: Center(
				child: Column(
					mainAxisAlignment: MainAxisAlignment.center,
					children: [
						Text('ຍິນດີຕ້ອນຮັບ', style: PhajayTheme.heading1),
						const SizedBox(height: 20),
						PaymentLinkScreen(
							amount: 100000,
							description: "ການທົດສອບການຈ່າຍເງິນ",
							publicKey: r"{YOUR_SECRET_KEY}",
							onPaymentSuccess: () {
								print('Payment successful!');
							},
							onPaymentError: (String error) {
								print('Payment failed: $error');
							},
						),
					],
				),
			),
		);
	}
}

ການແກ້ໄຂບັນຫາ

1. Deep Link ບໍ່ເຮັດວຽກ

  • Android: ກວດສອບ intent filter ໃນ MainActivity
  • iOS: ກວດສອບ CFBundleURLSchemes ໃນ Info.plist
  • ຄຳສັ່ງທົດສອບ:
adb shell am start -W -a android.intent.action.VIEW -d "phajay://payment?status=success" com.yourapp.package

2. ແອັບທະນາຄານບໍ່ເປີດ

  • Android: ເພີ່ມ package queries ໃນ manifest
  • iOS: ເພີ່ມ LSApplicationQueriesSchemes
  • ຢືນຢັນວ່າແອັບປາຍທາງຖືກຕິດຕັ້ງແລ້ວ

3. ບໍ່ໄດ້ຮັບ callback ການຊຳລະ

  • ກວດສອບການຈັດການ URL phajay://
  • ກວດສອບການຕັ້ງຄ່າ app_links
  • ໃຫ້ແນ່ໃຈວ່າແອັບຢູ່ໃນ foreground ເມື່ອການຊຳລະສຳເລັດ

4. ບັນຫາການສະແດງຜົນ Font

  • ໃຊ້ PhajayTheme.lightTheme
  • ກວດສອບການເຊື່ອມຕໍ່ອິນເຕີເນັດເພື່ອດາວໂຫລດ font

ການທົດສອບ Deep Links

Android

# callback ສຳເລັດ
adb shell am start -W -a android.intent.action.VIEW -d "phajay://payment?status=success&amount=100" com.yourapp.package
 
# callback ລົ້ມເຫລວ
adb shell am start -W -a android.intent.action.VIEW -d "phajay://payment?status=failed&error=timeout" com.yourapp.package

iOS

ໃຊ້ Safari ໃນ iOS Simulator ແລ້ວເປີດ:

phajay://payment?status=success&amount=100

ຂໍ້ກຳນົດ

ເວີຊັນຕ່ຳສຸດ

  • Flutter 1.17.0+
  • Dart SDK 3.9.0+
  • Android API 21+
  • iOS 12.0+

Dependencies ທີ່ລວມມາໃຫ້

ແພັກເກັດນີ້ລວມ dependencies ຕໍ່ໄປນີ້ມາໃຫ້ອັດຕະໂນມັດ:

  • http: ^1.5.0
  • qr_flutter: ^4.1.0
  • socket_io_client: ^3.1.2
  • url_launcher: ^6.3.0
  • app_links: ^6.3.2
  • flutter_inappwebview: ^6.0.0
  • google_fonts: ^6.1.0
  • lottie: ^3.3.2
  • intl: ^0.20.2

ສະຫຼຸບສິດທີ່ຕ້ອງການ

Android

  • android.permission.INTERNET ສຳລັບການເອີ້ນ API ການຊຳລະ
  • intent filter ຂອງ deep link ສຳລັບ callback ການຊຳລະ
  • package queries ສຳລັບແອັບທະນາຄານ (ທາງເລືອກ)

iOS

  • CFBundleURLSchemes ສຳລັບ callback ການຊຳລະ
  • LSApplicationQueriesSchemes ສຳລັບການເປີດແອັບທະນາຄານ
  • ການເຂົ້າເຖິງເຄືອຂ່າຍສຳລັບການເອີ້ນ API ການຊຳລະ

ແນວທາງປະຕິບັດທີ່ດີ

ການໃຊ້ Font

// ແນະນຳ: ໃຊ້ຕົວອັກສອນລາວທີ່ສອດຄ່ອງກັນ
Text('ຍິນດີຕ້ອນຮັບ', style: PhajayTheme.heading1);
 
MaterialApp(
	theme: PhajayTheme.lightTheme,
	home: const MyHomePage(),
);
 
// ຫຼີກລ່ຽງການລົງທະບຽນ Noto Sans Lao ເອງ ເມື່ອໃຊ້ flutter_phajay

ການຕັ້ງຄ່າ Environment

import 'package:flutter/foundation.dart';
import 'package:flutter_phajay/flutter_phajay.dart';
 
void main() {
	if (kDebugMode) {
		PhajayConfig.setBaseUrl('http://localhost:3000');
	} else {
		PhajayConfig.setBaseUrl('https://payment-gateway.phajay.co');
	}
 
	runApp(const MyApp());
}

URL Scheme ແອັບທະນາຄານ iOS ເພີ່ມເຕີມ

ຖ້າຈຳເປັນ, ສາມາດເພີ່ມ URL scheme ອື່ນໆ ພາຍໃຕ້ LSApplicationQueriesSchemes ເຊັ່ນ:

  • ldbbank
  • indochinabank

ໝາຍເຫດ

  • ປ່ຽນ {YOUR_SECRET_KEY} ເປັນ key ຕົວຈິງຂອງທ່ານຈາກບັນຊີ PhaJay
  • ໃຫ້ແນ່ໃຈວ່າສິດຂອງແພລດຟອມ ແລະ ການຕັ້ງຄ່າ deep link ຖືກຕ້ອງ
  • ເພື່ອໃຫ້ການສະແດງຜົນພາສາລາວຖືກຕ້ອງສວຍງາມ, ໃຫ້ໃຊ້ PhajayTheme.lightTheme

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