Flutter Paystack 所有选项实现

前言

在撰写本文时，Android 和移动 SDK 的 paystack 集成仅支持卡支付和银行（仅 Zenith 作为选项）。

在本文中，您将学习如何在 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 initialize api发出 POST 请求时，您将需要您的 paystack secret_key（使用 test 密钥进行测试，使用 live 密钥进行 prod）作为 Authorization 标头中的 Bearer 令牌。

检查下面的图像以获得更好的理解。

使用 secret_key 设置您的授权标头

发布正文详细信息

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.

来自 paystack API 的响应

authorization_url: This is the most important data we will 
                   be needing for our webview, so hold on 
                   to it .

在 Flutter 中调用 API

这种方法取决于您用于构建应用程序的架构，最后，您将收到相同的响应。在本文中，我将保持非常简单🥹。

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": "[email protected]",
  "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);
}

Retrieve the authorization_url from the response and store 
it in a global variable.

在 webView 中显示 Paystack 弹窗

好的，让我们在同一页面上 。我们正在构建一个应用程序，允许用户通过 paystack 为项目付款。

️ 数据流：
当用户点击 PAY 按钮时，paystack 会弹出，用户选择合适的选项，然后继续。一旦支付成功，我们将被重定向到一个callback_url。一旦发生这种情况，我们将不得不监听该 callback_url，当检测到它时，允许我们关闭 webview 小部件，然后继续将参考代码发送到我们的服务器以完成对 PAID 项目的签出。

️ 实施：
为了使过程无缝，我将使用一个弹出对话框，将其设置为全屏以覆盖我们当前的页面，添加 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 支付系统与乘法选项集成到我们的 Flutter 应用程序中。要体验多个选项，请将您的测试密钥更改为您的实时密钥，然后您才会看到