Flutter接入微信和支付宝支付

一、前言

使用第三方包来快速接入支付宝支付和微信支付

二、配置及使用

1 通用配置

(1) 配置Associated Domains

如图所示,有关universal links可以去Mob内配置,里面免费提供。

在这里插入图片描述

(2) iOS/Runner/Info.plist内配置

放在最高级的dict

	<key>LSApplicationQueriesSchemes</key>
	<array>
		<string>https</string>
		<string>http</string>
		<string>weixin</string>
		<string>weixinULAPI</string>
        <string>alipays</string>
	</array>
	<key>CFBundleURLTypes</key>
	<array>
        <dict>
            <key>CFBundleTypeRole</key>
            <string>Editor</string>
            <key>CFBundleURLName</key>
            <string>alipay</string>
            <key>CFBundleURLSchemes</key>
            <array>
                <string>tobiasexample</string>
            </array>
        </dict>
    </array>

2 微信支付

(1) 第三方

fluwx

(2) 使用

里面所有信息都是后台所提供的,直接对接即可。

import 'package:fluwx/fluwx.dart';

/// 微信支付
paymentWechat(orderInfo) async {
  /// 判断手机上是否安装微信
  var result = await isWeChatInstalled;
  if(result){
    await payWithWeChat(
      appId: orderInfo['appid'],
      partnerId: orderInfo['partnerid'],
      prepayId: orderInfo['prepayid'],
      packageValue: orderInfo['package'],
      nonceStr: orderInfo['noncestr'],
      timeStamp: int.parse(orderInfo['timestamp']),
      sign: orderInfo['paySign'],
    );
    weChatResponseEventHandler.distinct().listen((event) {
      if(event.errCode == 0){
        toastShow("支付成功");
        Get.back(result: true);
      } else {
        toastShow("支付失败");
      }
    });
  } else {
    toastShow('该手机上未安装微信,请选择其他支付方式');
  }
}

3 支付宝支付

(1) 第三方

tobias

(2) 使用

后台提供orderInfo,直接使用即可

/// 支付宝支付
void toAliPay(orderInfo) async {
  //检测是否安装支付宝
  var result = await tobias.isAliPayInstalled();
  if(result){
    var payResult = await tobias.aliPay(orderInfo);

    if (payResult['result'] != null) {
      if (payResult['resultStatus'] == '9000') {
        toastShow("支付宝支付成功");
        Get.back(result: true);
      } else if (payResult['resultStatus'] == '6001') {
        toastShow("支付宝支付失败");
      } else {
        toastShow("未知错误");
      }
    }
  } else {
    toastShow("未安装支付宝");
  }
}
  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
通过flutter的webview_flutter插件,我们可以在应用中嵌入支付宝微信支付,并实现支付功能。使用webview_flutter的步骤如下: 1. 首先,在`pubspec.yaml`文件中引入webview_flutter插件。可以在dependencies部分添加`webview_flutter: ^2.0.0`,然后运行`flutter pub get`命令进行依赖安装。 2. 在需要嵌入支付功能的页面中,导入webview_flutter插件。在页面的顶部引入`import 'package:webview_flutter/webview_flutter.dart';`。 3. 在页面的主体中,创建一个WebView组件,并指定需要加载的URL。例如,在Container中使用WebView组件,可以使用如下代码: ```dart Container( child: WebView( initialUrl: 'https://www.alipay.com/', javascriptMode: JavascriptMode.unrestricted, ), ) ``` 4. 在支付宝微信支付的URL中,传递相关的支付参数,例如订单号、支付金额等。 5. 在WebView组件中,可以通过注册一个JavaScript channel来监听网页中的支付回调信息。例如,在页面初始加载完成后,可以通过使用`onPageFinished`回调方法来执行一段JavaScript代码,监听支付结果。在该代码中,可以通过调用与原生平台交互的方法,将支付结果返回到Flutter中进行处理。 6. 在Flutter中,可以根据支付结果展示相关的提示信息,例如支付成功、支付失败等。 需要注意的是,支付宝微信支付的具体接口和参数可能会根据版本的更新而有所变化,所以在代码实现中需要根据最新的文档进行调整。同时,为了确保支付过程的安全性,建议在应用中对支付接口进行适当的安全设置,例如使用HTTPS协议,并对支付参数进行加密处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

倾云鹤

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值