Flutter插件portone_flutter的使用方法介绍

Flutter插件portone_flutter的使用方法介绍

pub package

포트원 V1 플러터 모듈

目录

  • 版本信息
  • 支持信息
  • 安装方法
  • 设置方法
    • 公共事项
    • iOS设置方法
    • Android设置方法
    • 实时转账设置方法
  • 示例
  • 回调函数设置方法

版本信息

最新版本是v0.12.0。更多版本历史信息请参考版本信息。

支持信息

PortOne V1 Flutter 模块支持普通支付和定期支付及手机实名认证功能。有关支持的PG公司和支付方式的详细信息，请参考支持信息。

安装方法

在pubspec.yaml文件中添加portone_flutter模块，以便在您的项目中安装PortOne V1 Flutter模块。

dependencies:
  portone_flutter: ^0.12.0

设置方法

iOS设置方法

要在iOS上使用PortOne V1支付集成模块，您需要在info.plist文件中设置以下三个项目。打开[项目名称]/ios/Runner.xcworkspace文件，并点击左侧项目面板中的Runner > info.plist文件。

1. 注册App Scheme

外部支付应用（例如Payco、新韩银行Pay）在支付后返回时需要使用URL标识符。

  1. 添加URL types属性。
  2. 展开项0并添加URL schemes属性。
  3. 在项0中写入App URL Scheme值（例如example）。
...
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <!-- URL Scheme值设置 -->
      <string>example</string>
    </array>
  </dict>
</array>
...

2. 注册外部应用程序列表

需要注册外部应用程序列表，以便可以运行第三方应用（例如银行卡应用、便捷支付应用等）。

  1. 添加LSApplicationQueriesSchemes属性。
  2. 依次添加外部应用URL Scheme值。
...
<key>LSApplicationQueriesSchemes</key>
<array>
  <string>kftc-bankpay</string> <!-- 银行转账 -->
  <string>ispmobile</string> <!-- ISP移动 -->
  <string>itms-apps</string> <!-- 应用商店 -->
  <string>hdcardappcardansimclick</string> <!-- 现代卡-应用卡 -->
  <string>smhyundaiansimclick</string> <!-- 现代卡-公认证书 -->
  <string>shinhan-sr-ansimclick</string> <!-- 新韩卡-应用卡 -->
  <string>smshinhanansimclick</string> <!-- 新韩卡-公认证书 -->
  <string>kb-acp</string> <!-- 国民卡-应用卡 -->
  <string>mpocket.online.ansimclick</string> <!-- 三星卡-应用卡 -->
  <string>ansimclickscard</string> <!-- 三星卡-在线支付 -->
  <string>ansimclickipcollect</string> <!-- 三星卡-在线支付 -->
  <string>vguardstart</string> <!-- 三星卡-杀毒软件 -->
  <string>samsungpay</string> <!-- 三星卡-三星支付 -->
  <string>scardcertiapp</string> <!-- 三星卡-公认证书 -->
  <string>lottesmartpay</string> <!-- 洛克特卡-移动支付 -->
  <string>lotteappcard</string> <!-- 洛克特卡-应用卡 -->
  <string>cloudpay</string> <!-- 一个卡-应用卡 -->
  <string>nhappcardansimclick</string> <!-- 农协卡-应用卡 -->
  <string>nonghyupcardansimclick</string> <!-- 农协卡-公认证书 -->
  <string>citispay</string> <!-- 市民卡-应用卡 -->
  <string>citicardappkr</string> <!-- 市民卡-公认证书 -->
  <string>citimobileapp</string> <!-- 市民卡-便捷支付 -->
  <string>kakaotalk</string> <!-- KakaoTalk -->
  <string>payco</string> <!-- Payco -->
  <string>lpayapp</string> <!-- (旧版)洛特 L-Pay -->
  <string>hanamopmoasign</string> <!-- 一个卡 公认证书应用 -->
  <string>wooripay</string> <!-- (旧版)我们的支付 -->
  <string>nhallonepayansimclick</string> <!-- NH All-One支付 -->
  <string>hanawalletmembers</string> <!-- 一个卡 (一个成员钱包) -->
  <string>chaipayment</string> <!-- Chai -->
  <string>kb-auth</string> <!-- 国民 -->
  <string>hyundaicardappcardid</string>  <!-- 现代卡 -->
  <string>com.wooricard.wcard</string>  <!-- 我们的WON支付 -->
  <string>lmslpay</string>  <!-- 洛特 L-Pay -->
  <string>lguthepay-xpay</string>  <!-- Paynow -->
  <string>liivbank</string>  <!-- Liiv 国民 -->
  <string>supertoss</string> <!-- Toss -->
  <string>newsmartpib</string> <!-- 我们的WON银行 -->
  <string>naversearchthirdlogin</string> <!-- Naver Pay 应用登录 -->
</array>
...

3. 设置App Transport Security

  1. 添加App Transport Security Settings属性。
  2. 将Allow Arbitrary Loads in Web Content属性设置为true。
...
<key>NSAppTransportSecurity</key>
<dict>
  <!-- Allow Arbitrary Loads in Web Content 属性设置为 true -->
  <key>NSAllowsArbitraryLoadsInWebContent</key>
  <true/>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>
...

Android设置方法

在Android API级别30中，当尝试向特定发卡机构付款时报告了net::ERR_CLEARTEXT_NOT_PERMITTED错误。要解决此问题，请将AndroidManifest.xml文件中的usesclearTextTraffic属性设置为true。

<manifest ...>
    ...
    <application
        ...
        android:usesCleartextTraffic="true"
    >
    </application>
</manifest>

实时转账设置方法

Web标准的Inicis和Nice Information Communications通过BankPay应用进行实时转账。完成支付认证后从BankPay应用返回到原始应用时，需要进行额外配置。详情请参阅实时转账设置方法。

示例

您可以使用PortOne V1 Flutter模块实现普通/定期支付及手机实名认证功能。更多详细信息请参考示例。

普通/定期支付示例

import 'package:flutter/material.dart';

/* 导入PortOne V1支付模块 */
import 'package:portone_flutter/iamport_payment.dart';
/* 导入PortOne V1支付数据模型 */
import 'package:portone_flutter/model/payment_data.dart';

class Payment extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return IamportPayment(
      appBar: new AppBar(
        title: new Text('PortOne V1支付'),
      ),
      /* 初始化加载组件 */
      initialChild: Container(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Image.asset('assets/images/iamport-logo.png'),
              Padding(padding: EdgeInsets.symmetric(vertical: 15)),
              Text('请稍候...', style: TextStyle(fontSize: 20)),
            ],
          ),
        ),
      ),
      /* [必填] 商户识别码 */
      userCode: 'iamport',
      /* [必填] 支付数据 */
      data: PaymentData(
        pg: 'html5_inicis',                                          // PG公司
        payMethod: 'card',                                           // 支付方式
        name: 'PortOne V1支付数据分析',                                  // 商品名称
        merchantUid: 'mid_${DateTime.now().millisecondsSinceEpoch}', // 订单号
        amount: 39000,                                               // 金额
        buyerName: 'Hong Gil-dong',                                   // 购买者姓名
        buyerTel: '01012345678',                                     // 购买者电话
        buyerEmail: 'example@naver.com',                             // 购买者邮箱
        buyerAddr: 'Seoul Gangnam-gu Sinsa-dong 661-16',             // 购买者地址
        buyerPostcode: '06018',                                      // 购买者邮编
        appScheme: 'example',                                        // 应用URL Scheme
        cardQuota : [2,3]                                            // 支付界面内分期选项限制
      ),
      /* [必填] 回调函数 */
      callback: (Map<String, String> result) {
        Navigator.pushReplacementNamed(
          context,
          '/result',
          arguments: result,
        );
      },
    );
  }
}

手机实名认证示例

对于Inicis统一认证，需要设置mRedirectUrl参数。

DANA手机实名认证

import 'package:flutter/material.dart';

/* 导入PortOne V1手机实名认证模块 */
import 'package:portone_flutter/iamport_certification.dart';
/* 导入PortOne V1手机实名认证数据模型 */
import 'package:portone_flutter/model/certification_data.dart';

class Certification extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return IamportCertification(
      appBar: new AppBar(
        title: new Text('PortOne V1实名认证'),
      ),
      /* 初始化加载组件 */
      initialChild: Container(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Image.asset('assets/images/iamport-logo.png'),
              Padding(padding: EdgeInsets.symmetric(vertical: 15)),
              Text('请稍候...', style: TextStyle(fontSize: 20)),
            ],
          ),
        ),
      ),
      /* [必填] 商户识别码 */
      userCode: 'iamport',
      /* [必填] 实名认证数据 */
      data: CertificationData(
        pg: 'danal',                                                  // PG公司
        merchantUid: 'mid_${DateTime.now().millisecondsSinceEpoch}',  // 订单号
        company: 'PortOne V1',                                        // 公司名或URL
        carrier: 'SKT',                                               // 运营商
        name: 'Hong Gil-dong',                                        // 姓名
        phone: '01012341234',                                         // 电话号码
      ),
      /* [必填] 回调函数 */
      callback: (Map<String, String> result) {
        Navigator.pushReplacementNamed(
          context,
          '/result',
          arguments: result,
        );
      },
    );
  }
}

Inicis统一认证

import 'package:flutter/material.dart';

/* 导入PortOne V1手机实名认证模块 */
import 'package:portone_flutter/iamport_certification.dart';
/* 导入PortOne V1手机实名认证数据模型 */
import 'package:portone_flutter/model/certification_data.dart';

class Certification extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return IamportCertification(
      appBar: new AppBar(
        title: new Text('PortOne V1实名认证'),
      ),
      /* 初始化加载组件 */
      initialChild: Container(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Image.asset('assets/images/iamport-logo.png'),
              Padding(padding: EdgeInsets.symmetric(vertical: 15)),
              Text('请稍候...', style: TextStyle(fontSize: 20)),
            ],
          ),
        ),
      ),
      /* [必填] 商户识别码 */
      userCode: 'iamport',
      /* [必填] 实名认证数据 */
      data: CertificationData(
        pg: 'inicis_unified',                                         // PG公司
        merchantUid: 'mid_${DateTime.now().millisecondsSinceEpoch}',  // 订单号
        mRedirectUrl: 'https://example.com',                          // 实名认证后跳转URL
      ),
      /* [必填] 回调函数 */
      callback: (Map<String, String> result) {
        Navigator.pushReplacementNamed(
          context,
          '/result',
          arguments: result,
        );
      },
    );
  }
}

回调函数设置方法

回调函数是必填字段，用于在支付/实名认证完成后执行路由跳转。回调函数的详细说明请参考回调函数设置方法。

...
callback: (Map<String, String> result) {
  Navigator.pushReplacementNamed(
    context,
    '/result',
    arguments: result,
  );
},
...

示例代码

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:portone_flutter_example/screens/certification.dart';
import 'package:portone_flutter_example/screens/certification_result.dart';
import 'package:portone_flutter_example/screens/certification_test.dart';
import 'package:portone_flutter_example/screens/home.dart';
import 'package:portone_flutter_example/screens/payment.dart';
import 'package:portone_flutter_example/screens/payment_result.dart';
import 'package:portone_flutter_example/screens/payment_test.dart';

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

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

class _IamportAppState extends State<IamportApp> {
  static const Color primaryColor = Color(0xff344e81);

  [@override](/user/override)
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
      systemNavigationBarColor: Colors.transparent,
      statusBarColor: Colors.transparent,
    ));
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);

    return GetMaterialApp(
      initialRoute: '/',
      theme: ThemeData(
        primaryColor: primaryColor,
      ),
      getPages: [
        GetPage(name: '/', page: () => Home()),
        GetPage(name: '/payment-test', page: () => PaymentTest()),
        GetPage(name: '/payment', page: () => Payment()),
        GetPage(name: '/payment-result', page: () => PaymentResult()),
        GetPage(name: '/certification-test', page: () => CertificationTest()),
        GetPage(name: '/certification', page: () => Certification()),
        GetPage(
            name: '/certification-result', page: () => CertificationResult()),
      ],
    );
  }
}

更多关于Flutter插件portone_flutter的使用方法介绍的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


portone_flutter 是一个用于在 Flutter 应用中集成 PortOne 支付网关的插件。PortOne 是韩国的一个流行的支付网关，支持多种支付方式，如信用卡、银行转账、移动支付等。通过 portone_flutter 插件，开发者可以轻松地在 Flutter 应用中集成 PortOne 支付功能。

以下是对 portone_flutter 插件的探索和使用步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 portone_flutter 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  portone_flutter: ^latest_version

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

2. 初始化 PortOne

在你的 Flutter 应用中，你需要在启动时初始化 PortOne。通常在 main.dart 文件中进行初始化：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await PortOneFlutter.initialize(
    storeId: 'your_store_id',
    channelKey: 'your_channel_key',
  );
  runApp(MyApp());
}

storeId 和 channelKey 是你在 PortOne 平台上注册应用时获取的。

3. 使用 PortOne 进行支付

在你的应用界面中，你可以创建一个按钮来触发支付流程。以下是一个简单的示例：

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

class PaymentPage extends StatelessWidget {
  Future<void> _startPayment() async {
    try {
      final response = await PortOneFlutter.payment(
        orderId: 'order_123',
        amount: 10000,
        orderName: 'Test Product',
        customerName: 'John Doe',
        customerEmail: 'john.doe@example.com',
      );

      if (response.success) {
        // Payment successful
        print('Payment successful: ${response.transactionId}');
      } else {
        // Payment failed
        print('Payment failed: ${response.errorMessage}');
      }
    } catch (e) {
      print('Error: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Payment'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _startPayment,
          child: Text('Pay Now'),
        ),
      ),
    );
  }
}

4. 处理支付结果

PortOneFlutter.payment 方法返回一个 PaymentResponse 对象，你可以通过该对象检查支付是否成功，并获取交易 ID 或错误信息。

5. 处理回调

PortOne 还支持通过回调 URL 通知支付结果。你可以在 PortOne 控制台中设置回调 URL，并在服务器端处理支付结果。

6. 调试和测试

在开发过程中，你可以使用 PortOne 提供的测试环境进行支付测试。确保在 PortOneFlutter.initialize 中设置 isTest 参数为 true：

await PortOneFlutter.initialize(
  storeId: 'your_store_id',
  channelKey: 'your_channel_key',
  isTest: true,
);
回到顶部