flutter 支付宝支付流程以及用 Flutter 在 Android Ios 中实现支付宝支付

 

1. 支付宝客户端支付流程

// 官方支付流程文档提供了支付宝客户端支付的详细步骤
https://docs.open.alipay.com/59/103658/

2. 准备已有的 Flutter 项目并安装插件

// 使用以下链接安装sy_flutter_alipay插件到你的Flutter项目中
https://pub.dev/packages/sy_flutter_alipay

3. 服务器端调用支付宝 sdk 生成订单信息

// 1. 下载服务端的sdk，以下是支付宝的sdk下载地址
https://docs.open.alipay.com/54/103419/
// 2. 本教程采用的是php的sdk，可以查看相关的演示

4. 客户端调用服务器端接口生成订单签名信息

// 通过调用支付插件完成支付，确保你的服务器提供了签名信息

5. 服务器端异步回调更新订单信息

// 当支付成功后，支付宝会异步给服务器发送post数据，此时服务器应该更新订单信息

6. Flutter 在 Xcode 上的编译问题及解决方案

// 如果你在Xcode上编译Flutter项目时遇到以下提示:
// "Target 'Runner': script phase “[CP] Embed Pods Frameworks”"
// 可以参考以下链接的解决方案:
https://www.cflutter.com/topic/5d09a1c73b57e317a4d0af08

Flutter 代码实现

import 'package:flutter/material.dart';
import 'package:sy_flutter_alipay/sy_flutter_alipay.dart';
import 'package:dio/dio.dart';

class HomePage extends StatefulWidget {
    HomePage({Key key}) : super(key: key);
    _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
    _doPay() async{
        // 调用支付接口获取订单信息
        var apiUrl='http://agent.itying.com/alipay/index.php';
        var myPayInfo = await Dio().get(apiUrl);
        final payInfo = myPayInfo.data;
        print(payInfo);

        // 使用sy_flutter_alipay插件进行支付
        var result = await SyFlutterAlipay.pay(payInfo);
        print(result);
    }

    @override
    Widget build(BuildContext context) {
        return Center(
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                    SizedBox(height: 20),
                    RaisedButton(
                        child: Text('支付宝支付'),
                        onPressed: _doPay,
                    ),
                    SizedBox(height: 20),
                ],
            ),
        );
    }
}