Flutter Paystack Реализация всех вариантов


Оглавление

  • 🕹 Введение
  • 📡 Необходимые детали и конечные точки Paystack
  • 🖲 Установка пакета WebView
  • 🛢 Выполнение вызовов API во Flutter
  • 📲 Отображение всплывающего окна Paystack в webView
  • 💾 Прослушивание навигационного url

🕹 Введение

На момент написания этой статьи, интеграция paystack для android и мобильный SDK, поддерживает только платежи по картам и банкам (с одним только Зенитом в качестве опции).

В этой статье вы узнаете, как включить другие варианты оплаты в ваше приложение на flutter.

PS: I'm assuming you are familiar with flutter and 
paystack with all the necessary keys and how to get them 
from your paystack dashboard.
Вход в полноэкранный режим Выход из полноэкранного режима

Прежде чем мы продолжим, пожалуйста, взгляните на эту статью от Paystack, именно оттуда я черпал идеи 😋. Если хотите, можете воспользоваться этой статьей или продолжить чтение.

📡 Необходимые данные Paystack и конечные точки

Вам понадобится ваш секретный ключ paystack secret_key (используйте тестовый ключ для тестирования и живой ключ для prod) в качестве токена Bearer в заголовке Authorization при выполнении POST-запроса к paystack initialize api.

Для лучшего понимания смотрите следующие изображения.

Настройка заголовка авторизации с помощью secret_key

Детали тела POST-запроса

email: This is the payers email.

amount: This is the amount to be paid, please multiply by 
        100, to remove the kobo value

reference: This should be randomly generated as it should 
           be a unique value for each payment.

callback_url: This is the most important part. If you 
              already have a callback url, setup from your 
              paystack dashboard, you don't need this 
              parameter. If you still go ahead to include 
              it, it'll override that of the dashboard. 
              This callback_url is what we will be 
              listening for from our webview.

cancel_action: This will be used to listen for when the 
               user wants to cancel payment, we then pop 
               the webview screen.
Вход в полноэкранный режим Выход из полноэкранного режима

Ответ от API paystack

authorization_url: This is the most important data we will 
                   be needing for our webview, so hold on 
                   to it 😎.
Вход в полноэкранный режим Выход из полноэкранного режима

🖲 Установка пакета WebView

Чтобы установить этот пакет, пожалуйста, перейдите по этой ссылке, ознакомьтесь с настройками и установите его.

🛢 Выполнение вызовов API во Flutter

Этот подход зависит от того, какую архитектуру вы используете для создания своего приложения, в конце концов, ответ вы получите один и тот же. В этой статье я буду действовать очень просто 🥹.

var headers = {
  'Authorization': 'Bearer sk_test_039***************',
  'Content-Type': 'application/json',
};
var request = http.Request('POST', Uri.parse('https://api.paystack.co/transaction/initialize'));
request.body = json.encode({
  "email": "g.ikwegbu@gmail.com",
  "amount": "10000",
  "reference": "randomDetails",
  "callback_url": "https://github.com/gikwegbu",
  "metadata": {"cancel_action": "https://www.google.com/"}
});
request.headers.addAll(headers);

http.StreamedResponse response = await request.send();

if (response.statusCode == 200) {
  print(await response.stream.bytesToString());
}
else {
  print(response.reasonPhrase);
}

Вход в полноэкранный режим Выход из полноэкранного режима

PS: Лично мне нравится использовать пакет flutter dio.

Retrieve the authorization_url from the response and store 
it in a global variable.
Вход в полноэкранный режим Выход из полноэкранного режима

📲 Отображение всплывающего окна Paystack в webView

Хорошо, давайте будем на одной странице 🙃. Мы создаем приложение, которое позволяет пользователям оплачивать товар через paystack.

🏳️ Поток данных:

когда пользователь нажимает на кнопку PAY, всплывает окно paystack, пользователь выбирает подходящий вариант и продолжает. После успешной оплаты мы будем перенаправлены на callback_url. Как только это произойдет, мы должны будем прослушать этот callback_url, который при обнаружении позволит нам закрыть виджет webview, а затем продолжить отправку нашего кода ссылки на наш сервер для завершения проверки оплаченного элемента.

🏳️ Реализация:

Чтобы сделать этот процесс бесшовным, я буду использовать всплывающий диалог, установлю его в полноэкранный режим, чтобы наложить нашу текущую страницу, добавлю виджет webview.

Ниже приведен фрагмент кода, который поможет вам понять больше:


// This is called when the PAY button is clicked.
_showPaystack() async {
    var _ref = 'ChargedFromMyApp_${DateTime.now().millisecondsSinceEpoch}';
    Map data = {
      // Removing the kobo by multiplying with 100
      "amount": double.parse('${_amount * 100}').toInt(),
      "email": _user.email,
      "reference": _ref,
      "callback_url": "https://github.com/gikwegbu",
      "metadata": {"cancel_action": "https://www.google.com/"}
    };
    // This awaits the [authorization_url](#authUrl). NB: I'm using the MVVM architecture in my live code, but it's still the same process of retrieving the authURL.
    var authUrl = await _profileCtrl.paystackWebViewChargeCard(data);

    // only pull-up the dialog box when we get the authURL
    if (authUrl != null) {
      return showGeneralDialog(
          context: context,
          barrierDismissible: true,
          barrierLabel:
              MaterialLocalizations.of(context).modalBarrierDismissLabel,
          barrierColor: Colors.black45,
          transitionDuration: const Duration(milliseconds: 200),
          pageBuilder: (BuildContext buildContext, Animation animation,
              Animation secondaryAnimation) {
            return Center(
                child: Container(
              width: MediaQuery.of(context).size.width - 10,
              // height: MediaQuery.of(context).size.height - 80,
              height: MediaQuery.of(context).size.height - 0,
              padding: const EdgeInsets.only(top: 40),
              color: Colors.white,
              child: WebView(
                initialUrl: authUrl.toString(),
                javascriptMode: JavascriptMode.unrestricted,
                userAgent: 'Flutter;Webview',
                navigationDelegate: (navigation) {
                  //Listen for callback URL
                  if (navigation.url == "https://standard.paystack.co/close") {
                    Navigator.of(context).pop(); //close webview

                    // _txnRef is my glabally created variable to handle my reference
                    _txnRef = _ref;
                    _submit();
                  }
                  if (navigation.url ==
                      "github.com/gikwegbu?trxref=$_ref&reference=$_ref") {
                    Navigator.of(context).pop();
                    _txnRef = _ref;
                    _submit();
                  }
                  if (navigation.url == "https://www.google.com/") {
                    Navigator.of(context).pop();
                  }
                  return NavigationDecision.navigate;
                },
              ),
            ));
          });
    }
  }

Вход в полноэкранный режим Выход из полноэкранного режима
The _submit(), is a function that sends the reference to 
my backend to complete the purchase transaction on the
selected item.
Вход в полноэкранный режим Выход из полноэкранного режима

💾 Прослушивание навигационного url

Из приведенного выше фрагмента кода вы заметили секцию navigationDelegate, именно здесь вы будете слушать callback_url, а также, в случае, если пользователь совершает платежи с помощью карты, аутентификация 3Ds должна будет перенаправить вас на ‘https://standard.paystack.co/close’. В остальном, мы будем слушать наш пользовательский callback_url, а затем откроем наш экран.

Наконец

Мы успешно интегрировали нашу платежную систему paystack с опцией multiply в наше приложение flutter. Чтобы воспользоваться опцией умножения, пожалуйста, смените тестовый секретный ключ на реальный секретный ключ, только после этого вы увидите сообщение

Оцените статью
devanswers.ru
Добавить комментарий