১. ভূমিকা
আপনি যা তৈরি করবেন
এই কোডল্যাবটি সম্পন্ন করার পর, আপনার কাছে অ্যান্ড্রয়েডের জন্য একটি কার্যকরী গুগল পে ইন্টিগ্রেশন সহ একটি ন্যূনতম কার্যকর ফ্লাটার অ্যাপ থাকবে। এই প্রজেক্টটি একটি পেমেন্ট টোকেন সংগ্রহ করে, যা প্রক্রিয়াকরণের জন্য কোনো পেমেন্ট পরিষেবা প্রদানকারীর কাছে পাঠানো যেতে পারে।
আপনি যা শিখবেন
- গুগল পে ফ্লাটার লাইব্রেরি কীভাবে ইনস্টল এবং কনফিগার করবেন
- গুগল পে বাটন কীভাবে প্রদর্শন করবেন এবং ক্লিকগুলো কীভাবে সামলাবেন
- গুগল পে থেকে কীভাবে পেমেন্ট টোকেনের জন্য অনুরোধ করবেন
আপনার যা যা লাগবে
- ডার্ট ফাইল সম্পাদনা করার জন্য আপনার পছন্দের একটি টেক্সট এডিটর।
- অ্যান্ড্রয়েডের জন্য একটি ফ্লাটার ডেভেলপমেন্ট এনভায়রনমেন্ট তৈরি করা হয়েছে।
- প্রোডাকশনের জন্য আপনার একটি Google Pay
merchantIdলাগবে। Google Pay ও ওয়ালেট কনসোলে এটি রেজিস্টার করতে মাত্র এক মিনিট সময় লাগে, তাই এখনই করে ফেলা ভালো।
২. ফ্লাটার প্রজেক্টটি তৈরি করুন।
প্রজেক্ট ফাইল তৈরি করুন
-
googlepay_flutterনামে একটি নতুন ফ্লাটার প্রজেক্ট তৈরি করুন।flutter create googlepay_flutter
- Google Pay ফ্লাটার লাইব্রেরিটি ইনস্টল করুন।
cd googlepay_flutter flutter pub add pay
- আপনার পছন্দের IDE-তে
lib/main.dartখুলুন এবং এর ভেতরের লেখাগুলো নিচের কোড দিয়ে প্রতিস্থাপন করুন:import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return const MaterialApp( home: PaySampleApp(), ); } } class PaySampleApp extends StatefulWidget { const PaySampleApp({super.key}); @override State<PaySampleApp> createState() => _PaySampleAppState(); } class _PaySampleAppState extends State<PaySampleApp> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Google Pay Codelab'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ const Text('Transaction info and errors will be logged to the console.'), ], ), ), ); } }
৩. গুগল পে কনফিগার করুন
একটি গুগল পে পেমেন্ট অনুরোধের জন্য একটি রিকোয়েস্ট অবজেক্ট প্রয়োজন। এখানে _paymentItems হিসেবে সংজ্ঞায়িত অবজেক্টটিতে সমস্ত অনুরোধের জন্য ন্যূনতম সাধারণ সেটিংস থাকে। অনুরোধের ধরনের ওপর নির্ভর করে অতিরিক্ত সেটিংস যোগ করা হবে, যা আমরা এই কোডল্যাবে পর্যালোচনা করব।
-
lib/main.dartএ Google Pay কনফিগারেশন কনস্ট্যান্টগুলো যোগ করুন:
import 'package:pay/pay.dart';
const _paymentItems = [
PaymentItem(
label: 'Total',
amount: '14.95',
status: PaymentItemStatus.final_price,
)
];
- ডিফল্ট পেমেন্ট কনফিগারেশন json ফাইলটি
assets/google_pay_config.jsonপাথে যোগ করুন:
{
"provider": "google_pay",
"data": {
"environment": "TEST",
"apiVersion": 2,
"apiVersionMinor": 0,
"allowedPaymentMethods": [
{
"type": "CARD",
"tokenizationSpecification": {
"type": "PAYMENT_GATEWAY",
"parameters": {
"gateway": "example",
"gatewayMerchantId": "exampleGatewayMerchantId"
}
},
"parameters": {
"allowedCardNetworks": ["VISA", "MASTERCARD"],
"allowedAuthMethods": ["PAN_ONLY", "CRYPTOGRAM_3DS"],
"billingAddressRequired": true,
"billingAddressParameters": {
"format": "FULL",
"phoneNumberRequired": true
}
}
}
],
"merchantInfo": {
"merchantName": "Example Merchant Name"
},
"transactionInfo": {
"countryCode": "US",
"currencyCode": "USD"
}
}
}
সম্পদ
- এপিআই রেফারেন্স : গুগল পে এপিআই অনুরোধ অবজেক্টের ডকুমেন্টেশন
- এপিআই রেফারেন্স : অনুমোদিত অনুমোদন পদ্ধতি, অনুমোদিত কার্ড নেটওয়ার্ক এবং সঠিক গেটওয়ে মান সহ টোকেনাইজেশন স্পেসিফিকেশন সম্পর্কে আরও তথ্যের জন্য
PaymentMethodদেখুন।
৪. গুগল পে বাটনটি যোগ করুন
pay লাইব্রেরিতে একটি নেটিভ গুগল পে বাটন কম্পোনেন্ট অন্তর্ভুক্ত রয়েছে।
lib/main.dart এ থাকা _PaySampleAppState ক্লাসটি নিম্নলিখিত কোড দিয়ে আপডেট করুন:
class _PaySampleAppState extends State<PaySampleApp> {
late final Future<PaymentConfiguration> _gpayConfig;
void onGooglePayResult(paymentResult) {
// Send 'token' to your payment service provider (PSP)
print(paymentResult);
}
@override
void initState() {
super.initState();
_gpayConfig = PaymentConfiguration.fromAsset('google_pay_config.json');
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Google Pay Codelab')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FutureBuilder<PaymentConfiguration>(
future: _gpayConfig,
builder: (context, snapshot) {
if (snapshot.connectionState != ConnectionState.done) {
return const Center(child: CircularProgressIndicator());
}
if (snapshot.hasError || !snapshot.hasData) {
return const Text('Error loading Google Pay config');
}
return GooglePayButton(
paymentConfiguration: snapshot.data!,
onPaymentResult: onGooglePayResult,
paymentItems: _paymentItems,
height: 48,
type: GooglePayButtonType.buy,
theme: GooglePayButtonTheme.dark,
margin: const EdgeInsets.only(top: 15.0),
loadingIndicator: const Center(
child: CircularProgressIndicator(),
),
);
},
),
const Text('Transaction info and errors will be logged to the console.'),
],
),
),
);
}
}
কোডের ব্যাখ্যা
-
_paymentItemsসেই লেনদেনটি বর্ণনা করে যা এই বাটন ক্লিকের মাধ্যমে সম্পন্ন করা হবে। -
GooglePayButtonউইজেটেরpaymentConfigurationAssetঅ্যাসেটটিassets/google_pay_config.jsonফাইল থেকে কনফিগারেশন লোড করে। - যখন
GooglePayButtonটি চাপ দেওয়া হয়, তখনonGooglePayResultফাংশনটি কল করা হয়। এই ফাংশনটি পেমেন্টের ফলাফল গ্রহণ করে। - রেসপন্স থেকে পেমেন্ট টোকেনটি পেয়ে গেলে, ট্রানজ্যাকশনটি প্রসেস করার জন্য আপনাকে সেটি আপনার পেমেন্ট গেটওয়েতে পাঠাতে হবে।
৫. ক্লিকের মাধ্যমে পেমেন্ট চালু করুন
GooglePayButton এ ট্যাপ করলে Google Pay শীটটি খোলে এবং একটি ফলাফল দেখায় — এর জন্য আলাদাভাবে 'make payment' কল করার প্রয়োজন হয় না। টোকেন লগ করতে, ত্রুটি দেখাতে এবং ঐচ্ছিকভাবে বাটন চাপার বিষয়টি লগ করতে হ্যান্ডলার যোগ করুন।
-
_PaySampleAppStateভিতরে ফলাফল হ্যান্ডলার যোগ বা আপডেট করুন:
void onGooglePayResult(dynamic paymentResult) {
try {
final token = paymentResult['paymentMethodData']['tokenizationData']['token'];
debugPrint('Google Pay payment token: $token');
} catch (e) {
debugPrint('Unexpected payment result: $e');
}
}
-
GooglePayButtonএ প্রেস এবং এরর হ্যান্ডলার অন্তর্ভুক্ত করতে এটি আপডেট করুন:
GooglePayButton(
paymentConfiguration: snapshot.data!,
paymentItems: _paymentItems,
onPaymentResult: onGooglePayResult,
onError: (Object err) => debugPrint('Google Pay error: $err'),
onPressed: () => debugPrint('Google Pay button pressed'),
height: 48,
type: GooglePayButtonType.buy,
theme: GooglePayButtonTheme.dark,
margin: const EdgeInsets.only(top: 15.0),
loadingIndicator: const Center(child: CircularProgressIndicator()),
)
নোট
- ট্যাপটি নিজেই পেমেন্ট শিটটি চালু করে;
onPaymentResultপেলোডটি গ্রহণ করে। - প্রোডাকশন পর্যায়ে, চার্জটি সম্পন্ন করতে আপনার পেমেন্ট সার্ভিস প্রোভাইডারের কাছে টোকেনটি পাঠান।
৬. উপসংহার
এই কোডল্যাবটি সম্পন্ন করার জন্য অভিনন্দন! আপনি শিখেছেন কিভাবে অ্যান্ড্রয়েডের জন্য একটি ফ্লাটার অ্যাপে গুগল পে এপিআই (Google Pay API) ইন্টিগ্রেট করতে হয়।
প্রকল্পটি চালান
আপনার অ্যাপটি চালু করতে নিম্নলিখিত কমান্ডটি চালান:
flutter run
এখান থেকে কোথায় যাওয়া যায়
অতিরিক্ত সম্পদ
- ডিসকর্ডের #payments চ্যানেলে আলোচনায় যোগ দিন।
- X-এ @GooglePayDevs-কে অনুসরণ করুন
- ইউটিউবে গুগল পে সম্পর্কিত ভিডিও দেখুন