Flutter支付功能插件gkash_payment的使用

本文将详细介绍如何在Flutter应用中集成Gkash支付插件。我们将通过一个完整的示例来演示整个过程。

使用

首先，我们需要导入必要的包并设置支付请求。以下是一个简单的示例代码：

import 'package:flutter/material.dart';
import 'package:gkash_payment/gkash_webview.dart';
import 'package:gkash_payment/model/payment_callback.dart';
import 'package:gkash_payment/model/payment_request.dart';
import 'package:gkash_payment/model/payment_response.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> implements PaymentCallback {
  String? amountInput = "0.10";
  final navigatorKey = GlobalKey<NavigatorState>();
  String? _status = "",
      _cartId = "",
      _amount = "",
      _currency = "",
      _poId = "",
      _paymentType = "",
      _description = "",
      _cid = "";

  [@override](/user/override)
  void getPaymentStatus(PaymentResponse response) {
    setState(() {
      _status = response.status;
      _cartId = response.cartid;
      _amount = response.amount;
      _currency = response.currency;
      _description = response.description;
      _paymentType = response.PaymentType;
      _poId = response.POID;
      _cid = response.cid;
    });
  }

  requestPayment() {
    PaymentRequest request = PaymentRequest(
        version: '1.5.0',
        cid: "M102-U-xxx",
        currency: 'MYR',
        amount: amountInput,
        cartid: DateTime.now().millisecondsSinceEpoch.toString(),
        signatureKey: "YourSignatureKey",
        isProd: false, // 如果是在生产环境中则设置为true
        callbackUrl: "https://YourCallbackUrl.com/callback", // 设置你的回调URL（可选）
        paymentCallback: this);

    Navigator.of(navigatorKey.currentState!.context).push(
      MaterialPageRoute(
        builder: (_) {
          return GkashWebView(request);
        },
      ),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: navigatorKey,
      home: Scaffold(
        resizeToAvoidBottomInset: false,
        appBar: AppBar(
          title: const Text("GkashPayment"),
        ),
        body: Container(
          padding: const EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              TextFormField(
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '请输入金额';
                  }
                  return null;
                },
                onChanged: (amount) {
                  amountInput = amount;
                },
                keyboardType:
                    const TextInputType.numberWithOptions(decimal: true),
                decoration: const InputDecoration(
                  hintText: "金额",
                ),
              ),
              const SizedBox(height: 30),
              SizedBox(
                width: double.infinity,
                child: ElevatedButton(
                  onPressed: () {
                    setState(() {
                      _status = "";
                      _cartId = "";
                      _amount = "";
                      _currency = "";
                      _description = "";
                      _paymentType = "";
                      _poId = "";
                      _cid = "";
                    });
                    requestPayment();
                  },
                  child: const Padding(
                    padding: EdgeInsets.all(8.0),
                    child: Text('提交'),
                  ),
                ),
              ),
              const SizedBox(
                height: 100,
              ),
              Column(
                children: [
                  Text("状态: ${_status!}"),
                  Text("描述: ${_description!}"),
                  Text("POID: ${_poId!}"),
                  Text("CID: ${_cid!}"),
                  Text("购物车ID: ${_cartId!}"),
                  Text("金额: ${_currency! + _amount!}"),
                  Text("支付类型: ${_paymentType!}"),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

获取支付结果

当WebView活动结束时，需要实现GkashPaymentCallback接口来处理支付响应。以下是具体的实现方法：

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> implements PaymentCallback {

  [@override](/user/override)
  void getPaymentStatus(PaymentResponse response) {
    // 处理支付响应
    setState(() {
      _status = response.status;
      _cartId = response.cartid;
      _amount = response.amount;
      _currency = response.currency;
      _description = response.description;
      _paymentType = response.PaymentType;
      _poId = response.POID;
      _cid = response.cid;
    });
  }
}