Flutter支付集成插件bootpay_api的使用

Flutter支付集成插件bootpay_api的使用

卡片快捷支付（生物识别）演示

卡片快捷支付（密码）截图

bootpay_api

bootpay_api 是由Bootpay管理的官方Flutter插件。它基于 bootpay_flutter 模块进行重构。有关Bootpay开发手册，请参阅 此处。

支持的支付网关 (PG)

  1. INIpay
  2. NICE Pay
  3. DANA
  4. KCP
  5. EasyPay (KICC)
  6. TPay (JTNet)
  7. LG U+
  8. Paylater
  9. NAVER PAY
  10. Kakao PAY
  11. PAYCO

开始使用

在项目中的 pubspec.yaml 文件中添加依赖项：

dependencies:
  ...
  bootpay_api: last_version
  ...

然后，在项目目录中运行 flutter packages get 来安装该插件。之后，导入并使用该模块。

设置

Android

无需配置。

iOS

编辑 ios/Runner/Info.plist 文件：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    ...

    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>
    <key>CFBundleURLTypes</key>
    <array>
        <dict>
            <key>CFBundleTypeRole</key>
            <string>Editor</string>
            <key>CFBundleURLName</key>
            <string>kr.co.bootpaySample</string> <!-- 使用您希望应用的bundle URL名称 -->
            <key>CFBundleURLSchemes</key>
            <array>
                <string>bootpaySample</string> <!-- 使用您希望应用的bundle URL scheme -->
            </array>
        </dict>
    </array>

    ...
    <key>NSFaceIDUsageDescription</key>
    <string>生體認證支付進行時需要權限</string>
</dict>
</plist>

完成！

开始使用

以下是完整的示例代码：

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:bootpay_api/bootpay_api.dart';
import 'package:bootpay_api/model/payload.dart';
import 'package:bootpay_api/model/bio_payload.dart';
import 'package:bootpay_api/model/bio_price.dart';
import 'package:bootpay_api/model/extra.dart';
import 'package:bootpay_api/model/user.dart';
import 'package:bootpay_api/model/item.dart';
import 'package:http/http.dart' as http;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Test",
      home: TestPage(),
    );
  }
}

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

class TestPageState extends State<TestPage> {
  var userId = "123421345671223";

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Container(
          child: Column(
            children: [
              SizedBox(
                width: double.infinity,
                height: 100,
                child: RaisedButton(
                  onPressed: () {
                    goBootpayRequest(context);
                  },
                  child: Text("부트페이 결제요청"),
                ),
              ),
              SizedBox(height: 10),
              SizedBox(
                width: double.infinity,
                height: 100,
                child: RaisedButton(
                  onPressed: () {
                    getRestToken(context);
                  },
                  child: Text("生物認證請求"),
                ),
              ),
            ],
          ),
        ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => Navigator.pop(context),
      ),
    );
  }

  void goBootpayRequest(BuildContext context) async {
    Item item1 = Item();
    item1.itemName = "米奇老鼠"; // 商品名
    item1.qty = 1; // 数量
    item1.unique = "ITEM_CODE_MOUSE"; // 唯一标识符
    item1.price = 500; // 价格

    Item item2 = Item();
    item2.itemName = "键盘"; // 商品名
    item2.qty = 1; // 数量
    item2.unique = "ITEM_CODE_KEYBOARD"; // 唯一标识符
    item2.price = 500; // 价格
    List<Item> itemList = [item1, item2];

    Payload payload = Payload();
    payload.applicationId = '5b8f6a4d396fa665fdc2b5e8';
    payload.androidApplicationId = '5b8f6a4d396fa665fdc2b5e8';
    payload.iosApplicationId = '5b8f6a4d396fa665fdc2b5e9';

    payload.pg = 'nicepay';
    payload.method = 'npay';
    payload.name = '测试商品';
    payload.price = 1000.0; // 定期支付时为0或注释
    payload.orderId = DateTime.now().millisecondsSinceEpoch.toString();
    payload.params = {
      "callbackParam1": "value12",
      "callbackParam2": "value34",
      "callbackParam3": "value56",
      "callbackParam4": "value78",
    };

    User user = User();
    user.username = "用户姓名";
    user.email = "user1234@gmail.com";
    user.area = "首尔";
    user.phone = "010-4033-4678";
    user.addr = '首尔市道马区尚都路222';

    Extra extra = Extra();
    extra.appScheme = 'bootpayFlutterSample';
    extra.quotas = [0, 2, 3];
    extra.popup = 1;
    extra.quick_popup = 1;

    BootpayApi.request(
      context,
      payload,
      extra: extra,
      user: user,
      items: itemList,
      onDone: (json) {
        print('--- onDone: $json');
      },
      onCancel: (json) {
        print('--- onCancel: $json');
      },
      onError: (json) {
        print(' --- onError: $json');
      },
    );
  }

  void goBootpayRequestBio(String token) async {
    Item item1 = Item();
    item1.itemName = "米奇老鼠"; // 商品名
    item1.qty = 1; // 数量
    item1.unique = "ITEM_CODE_MOUSE"; // 唯一标识符
    item1.price = 500; // 价格

    Item item2 = Item();
    item2.itemName = "键盘"; // 商品名
    item2.qty = 1; // 数量
    item2.unique = "ITEM_CODE_KEYBOARD"; // 唯一标识符
    item2.price = 500; // 价格
    List<Item> itemList = [item1, item2];

    BioPayload payload = BioPayload();
    payload.applicationId = '5b8f6a4d396fa665fdc2b5e8';
    payload.androidApplicationId = '5b8f6a4d396fa665fdc2b5e8';
    payload.iosApplicationId = '5b8f6a4d396fa665fdc2b5e9';
    payload.userToken = token;

    payload.pg = 'nicepay';
    payload.name = '测试商品';
    payload.price = 1000.0; // 定期支付时为0或注释
    payload.orderId = DateTime.now().millisecondsSinceEpoch.toString();
    payload.params = {
      "callbackParam1": "value12",
      "callbackParam2": "value34",
      "callbackParam3": "value56",
      "callbackParam4": "value78",
    };

    BioPrice price1 = BioPrice();
    price1.name = "商品价格";
    price1.price = 89000;

    BioPrice price2 = BioPrice();
    price2.name = "优惠券";
    price2.price = -2500;

    BioPrice price3 = BioPrice();
    price3.name = "运费";
    price3.price = 2500;
    payload.prices = [price1, price2, price3];

    payload.names = ["褶皱层裙摆短裙", "黑色 (颜色)", "55 (尺码)"];

    User user = User();
    user.id = userId;
    user.username = "用户姓名";
    user.email = "user1234@gmail.com";
    user.area = "首尔";
    user.phone = "010-4033-4678";
    user.addr = '首尔市道马区尚都路222';

    Extra extra = Extra();
    extra.appScheme = 'bootpayFlutterSample';
    extra.quotas = [0, 2, 3];
    extra.iosCloseButton = false;

    BootpayApi.requestBio(
      context,
      payload,
      extra: extra,
      user: user,
      items: itemList,
      onDone: (json) {
        print('--- onDone: $json');
      },
      onCancel: (json) {
        print('--- onCancel: $json');
      },
      onError: (json) {
        print(' --- onError: $json');
      },
    );
  }

  [@deprecated](/user/deprecated)
  void getRestToken(BuildContext context) async {
    String rest_applicationId = "5b8f6a4d396fa665fdc2b5ea";
    String rest_pk = "rm6EYECr6aroQVG2ntW0A6LpWnkTgP4uQ3H18sDDUYw=";

    Map<String, dynamic> params = {
      "application_id": rest_applicationId,
      "private_key": rest_pk
    };

    var url = Uri.parse('https://api.bootpay.co.kr/request/token');
    final response = await http.post(url, body: params);
    if (response.statusCode == 200) {
      var res = json.decode(response.body);
      String token = res['data']['token'];
      getUserToken(token);
    } else {
      print(response.body);
    }
  }

  void getUserToken(String restToken) async {
    Map<String, dynamic> body = {
      "user_id": userId,
      "email": "test1234@gmail.com",
      "name": "测试用户",
      "gender": "0",
      "birth": "861014",
      "phone": "01012345678"
    };

    var url = Uri.parse('https://api.bootpay.co.kr/request/user/token');
    final response = await http.post(url,
        headers: {
          "Accept": "application/json",
          "Content-Type": "application/x-www-form-urlencoded",
          "Authorization": restToken
        },
        body: body);
    if (response.statusCode == 200) {
      var res = json.decode(response.body);
      String token = res['data']['user_token'];
      print(token);
      goBootpayRequestBio(token);
    } else {
      print(response.body);
    }
  }
}

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

1 回复

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


当然，以下是一个关于如何在Flutter应用中集成Bootpay支付插件bootpay_api的示例代码。这段代码将展示如何初始化Bootpay客户端、创建支付请求并处理支付结果。

首先，确保你已经在pubspec.yaml文件中添加了bootpay_api依赖：

dependencies:
  flutter:
    sdk: flutter
  bootpay_api: ^最新版本号  # 请替换为实际的最新版本号

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

接下来，在你的Flutter项目中，你可以按照以下步骤集成Bootpay支付：

1. 初始化Bootpay客户端

首先，你需要在你的应用初始化时配置Bootpay客户端。通常，这会在main.dart文件中进行。

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

void main() {
  // 初始化Bootpay客户端
  Bootpay.init(
    applicationId: '你的Bootpay Application ID',
    privateKey: '你的Bootpay Private Key',
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Bootpay支付集成示例'),
        ),
        body: PaymentScreen(),
      ),
    );
  }
}

2. 创建支付请求

在你的支付屏幕上，创建一个按钮来触发支付请求，并处理支付结果。

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

class PaymentScreen extends StatefulWidget {
  @override
  _PaymentScreenState createState() => _PaymentScreenState();
}

class _PaymentScreenState extends State<PaymentScreen> {
  void _makePayment() async {
    try {
      // 创建支付请求
      BootpayResponse response = await Bootpay.requestPayment(
        name: '商品名称',
        amount: 1000, // 金额，单位为韩元（对于其他货币，请参考Bootpay文档）
        currency: 'KRW', // 货币代码
        memo: '支付备注',
        // 可选的支付选项，例如：商品详情、用户信息等
        // item_detail, user_data, ...
      );

      // 处理支付响应
      if (response.success) {
        // 支付成功处理
        print('支付成功: ${response.data}');
      } else {
        // 支付失败处理
        print('支付失败: ${response.message}');
      }
    } catch (e) {
      // 处理异常
      print('支付请求异常: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: _makePayment,
        child: Text('支付'),
      ),
    );
  }
}

3. 处理支付回调（可选）

如果你的应用需要处理支付完成后的回调（例如，从Bootpay服务器返回的结果），你可能需要在你的应用中设置一个回调URL，并在该URL对应的路由中处理支付结果。这部分通常涉及到后端服务器的配置和Flutter应用与后端服务器的通信，因此不在此示例中详细展开。

注意事项

  1. 安全性：请确保你的Bootpay Application ID和PrivateKey安全存储，不要硬编码在客户端代码中。
  2. 错误处理：在实际应用中，你应该添加更多的错误处理和用户反馈机制。
  3. UI定制：根据实际需要定制支付界面和流程。
  4. 测试：在发布前，务必进行充分的测试，包括各种边界条件和异常情况。

通过上述步骤，你应该能够在Flutter应用中成功集成Bootpay支付插件。如果有更多特定需求或遇到问题，请参考Bootpay的官方文档或联系其技术支持。

回到顶部