- Оглавление
- 🕹 Введение
- 📡 Необходимые данные Paystack и конечные точки
- Настройка заголовка авторизации с помощью secret_key
- Детали тела POST-запроса
- Ответ от API paystack
- 🖲 Установка пакета WebView
- 🛢 Выполнение вызовов API во Flutter
- 📲 Отображение всплывающего окна Paystack в webView
- 💾 Прослушивание навигационного url
- Наконец
Оглавление
- 🕹 Введение
- 📡 Необходимые детали и конечные точки 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. Чтобы воспользоваться опцией умножения, пожалуйста, смените тестовый секретный ключ на реальный секретный ключ, только после этого вы увидите сообщение