Интеграция платежей 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.