Flutter支付功能插件wht_pay_plugin的使用

Flutter支付功能插件wht_pay_plugin的使用

本项目是一个用于Flutter的新插件。该插件包含Android和/或iOS平台特定实现代码。

使用指南

以下是如何在你的Flutter应用中使用wht_pay_plugin插件的详细步骤和示例代码。

步骤一:添加依赖

在你的pubspec.yaml文件中添加wht_pay_plugin依赖:

dependencies:
  wht_pay_plugin: ^版本号

然后运行flutter pub get来安装依赖。

步骤二:初始化SDK

在应用启动时初始化SDK,以便可以调用支付相关的API。以下是在main.dart中初始化SDK的示例代码:

import 'dart:math';

import 'package:flutter/material.dart';
import 'dart:async';

import 'package:flutter/services.dart';
import 'package:wht_pay_plugin/sdp_model.dart';
import 'package:wht_pay_plugin/sdp_payment_bean.dart';
import 'package:wht_pay_plugin/wht_pay_plugin.dart';
import 'package:wht_pay_plugin_example/http_util.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> {

  [@override](/user/override)
  void initState()  {
    super.initState();
    
    // 初始化SDK
    SDPPayInitBean sdpPayModel = SDPPayInitBean();
    WhtPayPlugin.initSdk(config: sdpPayModel).then((value) {
      print("SDK初始化状态 $value");
    });

    // 设置支付事件监听器
    WhtPayPlugin.payMentListen(onEvent: (result){
      print("FlutterPay = $result");
    });
  }

  // 请求签名信息
  void reqestSignInfo({
    required String signType,
    required String orderAmt,
    required String merOrderNo,
    required String createIp,
    required String productCode
  }){

    MyHttpUtil().post("http://192.168.2.35:8888/sign",data: {
      "sign_type" : signType,
      "order_amt" : orderAmt,
      "mer_order_no" :merOrderNo,
      "create_ip" : createIp,
      "goodsName" : "测试商品",
      "code" : 100001
    }).then((value) {
      SDPPaymentBean bean =  SDPPaymentBean(productCode:productCode, orderAmt: "0.01", goodsName: "测试商品名称");
      WhtPayPlugin.generalPayment(bean: bean, parameter: value.data);
    });

  }

  // 生成随机字符串
  _randomBit(int len) {
    String scopeF = '123456789'; // 首位
    String scopeC = '0123456789'; // 中间
    String result = '';
    for (int i = 0; i < len; i++) {
      if (i == 0) {
        result = scopeF[Random().nextInt(scopeF.length)];
      } else {
        result = result + scopeC[Random().nextInt(scopeC.length)];
      }
    }  
    return result;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: Container(
            child: Center(
              child: Column(
                children: [
                  /// 微信02010005 支付宝02020004  银联02030001  链接02000002 杉德宝02040001
                  Padding(
                    padding: const EdgeInsets.all(15.0),
                    child: Container(
                      width: 150,
                      height: 50,
                      color: Colors.deepOrange,
                      child: InkWell(
                          onTap: (){
                            reqestSignInfo(productCode: "02010005", signType: "MD5", orderAmt: "0.01", merOrderNo: _randomBit(20), createIp: "192_168_0_1");
                          },
                          child: const Center(child: Text('微信支付',style: TextStyle(color: Colors.white),))),
                    ),
                  ),

                  Padding(
                    padding: const EdgeInsets.all(15.0),
                    child: Container(
                      width: 150,
                      height: 50,
                      color: Colors.deepOrange,
                      child: InkWell(
                          onTap: (){
                            reqestSignInfo(productCode: "02020004", signType: "MD5", orderAmt: "0.01", merOrderNo: _randomBit(19), createIp: "192_168_0_1");
                          },
                          child: const Center(child: Text('支付宝支付',style: TextStyle(color: Colors.white),))),
                    ),
                  ),

                  Padding(
                    padding: const EdgeInsets.all(15.0),
                    child: Container(
                      width: 150,
                      height: 50,
                      color: Colors.deepOrange,
                      child: InkWell(
                          onTap: (){
                            reqestSignInfo(productCode: "02030001", signType: "MD5", orderAmt: "0.01", merOrderNo: _randomBit(19), createIp: "192_168_0_1");
                          },
                          child: const Center(child: Text('银联支付',style: TextStyle(color: Colors.white),))),
                    ),
                  ),

                  Padding(
                    padding: const EdgeInsets.all(15.0),
                    child: Container(
                      width: 150,
                      height: 50,
                      color: Colors.deepOrange,
                      child: InkWell(
                          onTap: (){
                            reqestSignInfo(productCode: "02000002", signType: "MD5", orderAmt: "0.01", merOrderNo: _randomBit(19), createIp: "192_168_0_1");
                          },
                          child: const Center(child: Text('链接好友支付',style: TextStyle(color: Colors.white),))),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter支付功能插件wht_pay_plugin的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter支付功能插件wht_pay_plugin的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


wht_pay_plugin 是一个用于 Flutter 的支付功能插件,支持常见的支付方式,如微信支付、支付宝支付等。以下是如何在 Flutter 项目中使用 wht_pay_plugin 的基本步骤。

1. 添加依赖

首先,在 pubspec.yaml 文件中添加 wht_pay_plugin 依赖:

dependencies:
  flutter:
    sdk: flutter
  wht_pay_plugin: ^版本号 # 请替换为最新版本号

然后运行 flutter pub get 来安装依赖。

2. 配置支付平台

根据你使用的支付平台(如微信支付、支付宝支付),需要进行相应的配置。

微信支付配置

android/app/src/main/AndroidManifest.xml 文件中添加以下配置:

<activity
    android:name="com.tencent.mm.opensdk.openapi.WXAPIFactory"
    android:theme="@android:style/Theme.Translucent.NoTitleBar.Fullscreen" />

ios/Runner/Info.plist 文件中添加以下配置:

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLName</key>
        <string>weixin</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>wx你的AppID</string> <!-- 替换为你的微信AppID -->
        </array>
    </dict>
</array>

支付宝支付配置

支付宝支付通常不需要额外的配置,但确保你已经正确配置了支付宝的商户信息。

3. 初始化支付插件

main.dart 中初始化支付插件:

import 'package:wht_pay_plugin/wht_pay_plugin.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化支付插件
  await WhtPayPlugin.init(
    wxAppId: '你的微信AppID', // 替换为你的微信AppID
    aliAppId: '你的支付宝AppID', // 替换为你的支付宝AppID
  );
  
  runApp(MyApp());
}

4. 调用支付功能

在需要支付的地方调用支付方法。以下是一个简单的示例:

import 'package:flutter/material.dart';
import 'package:wht_pay_plugin/wht_pay_plugin.dart';

class PaymentPage extends StatelessWidget {
  Future<void> _payWithWeChat() async {
    try {
      final result = await WhtPayPlugin.payWithWeChat(
        appId: '你的微信AppID',
        partnerId: '商户号',
        prepayId: '预支付交易会话ID',
        packageValue: '扩展字段',
        nonceStr: '随机字符串',
        timeStamp: '时间戳',
        sign: '签名',
      );
      print('微信支付结果: $result');
    } catch (e) {
      print('微信支付失败: $e');
    }
  }

  Future<void> _payWithAlipay() async {
    try {
      final result = await WhtPayPlugin.payWithAlipay(
        orderInfo: '你的订单信息',
      );
      print('支付宝支付结果: $result');
    } catch (e) {
      print('支付宝支付失败: $e');
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('支付'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _payWithWeChat,
              child: Text('微信支付'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _payWithAlipay,
              child: Text('支付宝支付'),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部