Flutter支付插件wht_sande_pay的使用

发布于 1周前 作者 zlyuanteng 来自 Flutter

Flutter支付插件wht_sande_pay的使用

简介

wht_sande_pay 是一个集成微信开发SDK（支付、登录、分享）和衫德支付Flutter SDK的插件。通过此插件，开发者可以轻松实现微信支付、支付宝支付、银联支付等功能。

使用步骤

1. 添加依赖

在 pubspec.yaml 文件中添加 wht_sande_pay 插件依赖：

dependencies:
  wht_sande_pay: ^0.0.8
2. 原生项目配置
IOS 配置

  1. 微信支付配置

    • 在项目的 Info.plist 文件中，添加以下内容：
      <key>LSApplicationQueriesSchemes</key>
<array>
  <string>weixin</string>
  <string>weixinULAPI</string>
</array>
      • 添加 URL Types，确保 URL Schemes 是你的微信 App ID（微信移动应用 ID）。
    • 注意：吊起支付宝支付后无法自动返回原 App，需要用户手动返回。

  2. 银联支付配置

    • 在 Info.plist 文件中添加以下内容：
      <key>LSApplicationQueriesSchemes</key>
<array>
  <string>uppaysdk</string>
  <string>uppaywallet</string>
  <string>uppayx1</string>
  <string>uppayx2</string>
  <string>uppayx3</string>
  <string>spdbcccUnionPay</string>
  <string>credit</string>
  <string>spdbbank</string>
  <string>ccbmbsylunionpay</string>
  <string>paesuperbank</string>
  <string>com.cebbank.ebank</string>
  <string>cmbmobilebank</string>
</array>
Android 配置

在 AndroidManifest.xml 中添加以下内容：

<intent-filter>
  <action android:name="android.intent.action.VIEW"/>
  <category android:name="android.intent.category.DEFAULT"/>
  <category android:name="android.intent.category.BROWSABLE"/>
  <data android:scheme="sandcash"
        android:host="scpay"/>
</intent-filter>
3. 插件初始化

需要传入一个服务端结果查询的 API（用于 iOS 支付结果查询）。

/// 初始化微信
Wechat.instance
    .registerApp(
  appId: "wexinId",
  universalLink: "link",
  queryURL: "http://192.168.2.9:8888/payQuery"
)
.then((value) {
  /// 判断是否安装了微信
  MainService.to.checkWechatInstallStatus();
});
4. 调起支付

衫德支付需要后端获取签名和签名信息。

/// 杉德支付，请求签名拉起支付
void reqestSdpaySgin({
  required String signType,
  required String orderAmt,
  required String merOrderNo,
  required String createIp,
  required String productCode,
}) {
  MyHttpUtil().post("http://192.168.2.9: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: "测试商品名称",
    );
    Wechat.instance.generalPayment(
      bean: bean,
      parameter: value.data,
    );
  });
}

完整示例代码

以下是一个完整的示例代码，展示了如何使用 wht_sande_pay 插件实现微信支付、支付宝支付、银联支付和链接好友支付。

import 'dart:math';

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

import 'package:flutter/services.dart';
import 'package:wht_sande_pay/sdp_payment_bean.dart';
import 'package:wht_sande_pay/wechat_kit.dart';
import 'package:wht_sande_pay/wht_sande_pay.dart';
import 'package:wht_sande_pay_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> {
  /// 微信支付
  late final StreamSubscription<BaseResp> _auth;

  [@override](/user/override)
  void initState() {
    super.initState();

    _auth = Wechat.instance.respStream().listen(_listenPay);

    Wechat.instance.registerApp(
      appId: "wx24932e45899137eb",
      universalLink: "https://mmall.mixienet.com.cn/apple-app-site-association/",
    );

    initPlatformState();
  }

  /// 微信支付回调
  void _listenPay(BaseResp resp) {
    /// errorCode:
    /// -1: 包名或证书不一致（无法拉起微信app）
    /// 0: 支付成功
    /// -2: 支付失败（无效订单、订单重复支付、订单过期失效和用户取消支付）
    print('支付: $resp');
  }

  void reqestSignInfo({
    required String signType,
    required String orderAmt,
    required String merOrderNo,
    required String createIp,
    required String productCode,
  }) {
    MyHttpUtil().post(
      "https://notify.qidiangouwu.com/sande/api/sign",
      data: {
        "sign_type": signType,
        "order_amt": orderAmt,
        "mer_order_no": merOrderNo,
        "new_order_no": "",
        "create_ip": createIp,
        "goodsName": "测试商品",
        "code": 100001,
      },
    ).then((value) {
      SDPPaymentBean bean = SDPPaymentBean(
        productCode: productCode,
        orderAmt: "0.01",
        goodsName: "测试商品名称",
      );
      Wechat.instance.generalPayment(
        bean: bean,
        parameter: value.data,
      );
    });
  }

  // Platform messages are asynchronous, so we initialize in an async method.
  Future<void> initPlatformState() async {}

  String _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: [
                  /// 微信支付
                  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_sande_pay的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


wht_sande_pay 是一个用于 Flutter 应用的支付插件，主要用于集成第三方支付功能。以下是如何在 Flutter 项目中使用 wht_sande_pay 插件的基本步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 wht_sande_pay 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  wht_sande_pay: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 引入插件

在需要使用支付功能的 Dart 文件中引入插件：

import 'package:wht_sande_pay/wht_sande_pay.dart';

3. 初始化支付

在调用支付功能之前，通常需要初始化支付插件。初始化时可能需要传入一些配置参数，如应用ID、商户ID等。

void initPay() async {
  bool result = await WhtSandePay.initPay(
    appId: 'your_app_id',
    merchantId: 'your_merchant_id',
    // 其他必要的配置参数
  );
  if (result) {
    print('支付初始化成功');
  } else {
    print('支付初始化失败');
  }
}

4. 发起支付

初始化成功后，可以调用支付方法来发起支付。通常需要传入订单信息、支付金额等参数。

void startPay() async {
  Map<String, dynamic> payResult = await WhtSandePay.startPay(
    orderId: 'your_order_id',
    amount: 100,  // 支付金额，单位为分
    // 其他必要的支付参数
  );

  if (payResult['status'] == 'success') {
    print('支付成功');
  } else {
    print('支付失败: ${payResult['message']}');
  }
}

5. 处理支付结果

支付完成后，插件会返回一个包含支付结果的 Map。你可以根据返回的状态码或消息来处理支付结果。

6. 错误处理

在实际使用中，可能会遇到各种错误，如网络问题、支付失败等。建议在支付过程中添加错误处理逻辑。

void startPay() async {
  try {
    Map<String, dynamic> payResult = await Wht_sande_pay.startPay(
      orderId: 'your_order_id',
      amount: 100,
      // 其他必要的支付参数
    );

    if (payResult['status'] == 'success') {
      print('支付成功');
    } else {
      print('支付失败: ${payResult['message']}');
    }
  } catch (e) {
    print('支付过程中出现错误: $e');
  }
}
回到顶部
AI 助手
你好，我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验！