Flutter微信H5支付插件better_wechat_h5pay的使用

Flutter微信H5支付插件better_wechat_h5pay的使用

简介

better_wechat_h5pay 是一个用于 Flutter 的简单微信 H5 支付插件。

安装与开始

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

dependencies:
  better_wechat_h5pay: ^0.0.1

2. 安装依赖：

运行以下命令安装插件：

$ flutter pub get

常规用法

以下是使用 better_wechat_h5pay 插件的基本示例：

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

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

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

class _MyAppState extends State<MyApp> {
  // 初始化 WeChat Pay 控制器
  final WechatPayWebViewController _payWebViewController =
      WechatPayWebViewController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('微信H5支付示例'),
        ),
        body: Column(
          children: [
            // 集成 WeChat Pay WebView
            WechatPayWebView(controller: _payWebViewController),
            // 支付按钮
            Expanded(
              child: Center(
                child: CupertinoButton(
                  child: Text("支付"),
                  onPressed: () {
                    // 调用支付方法
                    _payWebViewController.pay(
                      url: url(), // 微信支付跳转的URL
                      referer: referer(), // 引用地址
                    );
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 获取微信支付的跳转URL
  String url() {
    return "https://wx.tenpay.com/xxxxxx"; // 替换为实际的微信支付跳转URL
  }

  // 获取引用地址
  String referer() {
    return Platform.isIOS
        ? "yourserverhost://" // iOS平台的引用地址
        : "https://yourserverhost"; // Android平台的引用地址
  }
}

功能特点

• ✅ wechat h5 payment：支持微信 H5 支付功能。

示例代码

以下是完整的示例代码（来自官方仓库）：

import 'dart:io';

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

import 'package:better_wechat_h5pay/better_wechat_h5pay.dart';

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

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

class _MyAppState extends State<MyApp> {
  // 初始化 WeChat Pay 控制器
  final WechatPayWebViewController _payWebViewController =
      WechatPayWebViewController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('better_wechat_h5pay 示例'),
        ),
        body: Column(
          children: [
            // 集成 WeChat Pay WebView
            WechatPayWebView(controller: _payWebViewController),
            // 支付按钮
            Expanded(
              child: Center(
                child: CupertinoButton(
                  child: Text("支付"),
                  onPressed: () {
                    // 调用支付方法
                    _payWebViewController.pay(
                      url: url(), // 微信支付跳转的URL
                      referer: referer(), // 引用地址
                    );
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 获取微信支付的跳转URL
  String url() {
    return "https://wx.tenpay.com/xxxxxx"; // 替换为实际的微信支付跳转URL
  }

  // 获取引用地址
  String referer() {
    return Platform.isIOS
        ? "yourserverhost://" // iOS平台的引用地址
        : "https://yourserverhost"; // Android平台的引用地址
  }
}