Интеграция платежей Paystack в приложении Flutter
В этой статье мы рассмотрим интеграцию карточных платежей с помощью пакета Paystack под названием flutter_paystack.
Paystack — современные онлайн и офлайн платежи для Африки
Paystack помогает компаниям в Африке получать деньги от кого угодно и из любой точки мира
Перейдите к Paystack Login, чтобы получить доступ к панели инструментов.
Если у вас нет учетной записи, вы можете создать учетную запись здесь
В вашем проекте флаттера перейдите к pubspec.yaml и потребуйте следующие пакеты
Пожалуйста, убедитесь, что он правильно выровнен, как показано на изображении.
Перейдите на страницу настроек Paystack и нажмите Ключи API и веб-перехватчик, чтобы получить открытый ключ для тестирования
Далее перейдите к файлу main.dart и добавьте фрагмент
Пожалуйста, обратите внимание, что весь код был сделан на странице, которую вы можете настроить в соответствии с вашим подходом к проекту (cubit, block, services и т. д.).
import 'dart:io'; import 'package:flutter/material.dart'; import 'package:flutter_paystack/flutter_paystack.dart'; import 'package:flutter_paystack_integration/widgets/button.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp(home: PaystackCardMethod()); } } class PaystackCardMethod extends StatefulWidget { @override _PaystackCardMethodState createState() => _PaystackCardMethodState(); } class _PaystackCardMethodState extends State<PaystackCardMethod> { String publicKeyTest = 'pk_test_ieu49ej839u984urenewuwe06eishra'; //pass in the public test key here final plugin = PaystackPlugin(); @override void initState() { plugin.initialize(publicKey: publicKeyTest); super.initState(); } void _showMessage(String message) { final snackBar = SnackBar(content: Text(message)); ScaffoldMessenger.of(context).showSnackBar(snackBar); } String _getReference() { var platform = (Platform.isIOS) ? 'iOS' : 'Android'; final thisDate = DateTime.now().millisecondsSinceEpoch; return 'ChargedFrom${platform}_$thisDate'; } chargeCard() async { var charge = Charge() ..amount = 10000 * 100 //the money should be in kobo hence the need to multiply the value by 100 ..reference = _getReference() ..putCustomField('custom_id', '846gey6w') //to pass extra parameters to be retrieved on the response from Paystack ..email = '[email protected]'; CheckoutResponse response = await plugin.checkout( context, method: CheckoutMethod.card, charge: charge, ); if (response.status == true) { _showMessage('Payment was successful!!!'); } else { _showMessage('Payment Failed!!!'); } } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text( "Paystack Integration", ), centerTitle: true, elevation: 0.0, ), body: Container( padding: EdgeInsets.all(10), child: Center( child: Container( margin: const EdgeInsets.symmetric(horizontal: 24, vertical: 12), padding: const EdgeInsets.all(15), child: PayButton( height: 45, fontSize: 15, text: 'Pay Now!!!', textColor: Colors.white, callback: () => chargeCard(), color: Colors.blueAccent, ), ), )), ); } }
Нажмите кнопку "Оплатить сейчас"
Реквизиты карты для тестирования платежей
Подробнее о картах для тестирования можно узнать здесь
Сообщение в снэк-баре при отмене платежа
Вот ссылка на этот репозиторий туториалов
Кредиты исследования статьи
Спасибо, что прочитали эту статью.
Пожалуйста, поделитесь со своей сетью и не стесняйтесь использовать раздел комментариев для вопросов, ответов и предложений.
Первоначально опубликовано на https://alemsbaja.hashnode.dev.