Flutter支付处理插件payengine的使用

Flutter支付处理插件PayEngine的使用

PayEngine SDK for Flutter

PayEngine Flutter SDK允许你在原生Android和iOS应用中构建令人愉悦的支付体验。我们提供了强大的和可定制的UI屏幕和元素，可以直接使用来收集用户支付信息。

安装

在项目中添加PayEngine注册库：

allprojects {
    repositories {
        ...your repositories
        
        maven {
            name = "pe-maven"
            url = uri("https://maven.payengine.co/payengine")
            credentials {
                username = "<username>"
                password = "<password>"
            }
        }
    }
}

联系PayEngine支持获取用户名和密码。

前置条件

Android

要使用安全字段组件，你需要安装并配置Material Components主题。

1. 在app/build.gradle文件中添加以下依赖（指定版本）：

implementation 'com.google.android.material:material:<version>'

1. 在styles.xml文件中设置适当的样式：

<style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <!-- ... -->
</style>

iOS

运行以下命令：

cd ios && pod install --repo-update && cd ..

使用

PayEngine配置

final PayEngineConfig config = const PayEngineConfig(
      publicKey: "pk_test_xxx",
      scriptURL: "https://console.payengine.dev");
final String merchantId = "<your-merchant-id>";

将配置包装在一个Provider中：

PayEngineProvider(
  config: config, 
  child: const MyApp()
)

信用卡表单

var additionalFields = List<PayEngineField>.from([
      PayEngineField('address_zip', 'text', 'Zip Code', true,
          keyboardType: PayEngineKeyboardType.number,
          pattern:
              r"^(?:\d{5}(?:-\d{4})?|[ABCEGHJKLMNPRSTVXY]\d[A-Z] ?\d[A-Z]\d)$"),
    ]);

final creditCardForm = CreditCardForm(additionalFields: additionalFields);

Container(padding: const EdgeInsets.all(10), child: creditCardForm),

OutlinedButton(
    onPressed: () async {
      final response = await creditCardForm.tokenize(merchantId);
      setState(() {
        result = response;
      });
    },
    child: const Text('Tokenize')),

银行账户表单

final bankAccountForm = BankAccountForm();

Container(padding: const EdgeInsets.all(10), child: bankAccountForm),
OutlinedButton(
    onPressed: () async {
      final response = await bankAccountForm.tokenize(merchantId);
      setState(() {
        result = response;
      });
    },
    child: const Text('Tokenize')),

Google Pay和Apple Pay

检查是否支持

final isSupported = PayEngineNative.userCanPay(PayProvider.applePay, Config.merchantId)

始终在呈现支付按钮之前调用此方法，参见下面的示例。

Google Pay

final paymentRequest = PEPaymentRequest(
  merchantId: Config.merchantId, 
  paymentAmount: 10.00, 
  paymentItems: [
    PEPaymentItem(
      label: "Test Item", 
      amount: 10.00,
    )
  ],
  platformOptions: PEGooglePayOptions(billingAddressRequired: true, shippingAddressRequired: true)
);

// 渲染按钮
FutureBuilder<bool>(
  future: PayEngineNative.userCanPay(
      PayProvider.googlePay, Config.merchantId),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      if (snapshot.hasError) {
        return Center(
          child: Text(
            '${snapshot.error}',
          ),
        );
      } else if (snapshot.data == true) {
        return PEGooglePayButton(
          paymentRequest: paymentRequest,
          onPaymentFailed: (error) {
            debugPrint("onPaymentFailed $error");
            result = error.toString();
          },
          onPaymentSheetDismissed: () {
            debugPrint("onPaymentSheetDismissed");
          },
          onTokenDidReturn: (token, metadata, billingAddress, shippingAddress) {
            debugPrint("onTokenDidReturn $token $metadata ${billingAddress?.toJson()} ${shippingAddress?.toJson()}");
            result = token;
          },
        );
      } else {
        return const Text("Google Pay is not supported");
      }
    } else {
      return const SizedBox.shrink();
    }
  })

Apple Pay

final paymentRequest = PEPaymentRequest(
  merchantId: Config.merchantId,
  paymentAmount: 10.00,
  paymentItems: [
    PEPaymentItem(
      label: "Test Item",
      amount: 10.00,
    )
  ],
  platformOptions: PEApplePayOptions(
      requiredBillingContactFields: [PEContactField.postalAddress],
      requiredShippingContactFields: [PEContactField.name])
  );

// 渲染按钮
FutureBuilder<bool>(
  future: PayEngineNative.userCanPay(
      PayProvider.applePay, Config.merchantId),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      if (snapshot.hasError) {
        return Center(
          child: Text(
            '${snapshot.error}',
          ),
        );
      } else if (snapshot.data == true) {
        return PEApplePayButton(
          paymentRequest: paymentRequest,
          onPaymentFailed: (error) {
            debugPrint("onPaymentFailed $error");
            result = error.toString();
          },
          onPaymentSheetDismissed: () {
            debugPrint("onPaymentSheetDismissed");
          },
          onTokenDidReturn: (token, metadata, billingContact, shippingContact) {
            debugPrint("onTokenDidReturn $token $metadata ${billingContact?.toJson()} ${shippingContact?.toJson()}");
            result = token;
          },
        );
      } else {
        return const Text("Apple Pay is not supported");
      }
    } else {
      return const SizedBox.shrink();
    }
  })

示例代码

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:payengine/payengine_provider.dart';
import 'package:payengine_example/config.dart';
import 'package:payengine_example/screens/credit_card_screen.dart';
import 'package:payengine_example/themes.dart';

void main() {
  runApp(
    PayEngineProvider(
      config: Config.config, 
      child: const MyApp()
    )
  );
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
  Map<dynamic, dynamic> result = {};

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: MyAppThemes.lightTheme,
      darkTheme: MyAppThemes.darkTheme,
      themeMode: ThemeMode.light,
      home: const CreditCardScreen(),
    );
  }
}