Flutter支付处理插件flutter_braintree_betc的使用

Flutter支付处理插件flutter_braintree_betc的使用

安装

首先，将 flutter_braintree 添加到您的 pubspec.yaml 文件中：

dependencies:
  ...
  flutter_braintree: <版本号>

Android 使用示例

1. 迁移至 AndroidX： 在 /app/build.gradle 中设置 minSdkVersion 至至少 21。

2. 启用 Card.io（可选）： 在 app 水平的 build.gradle 文件中添加以下行以启用 Card.io 功能：

   dependencies {
       ...
       implementation 'io.card:android-sdk:5.+'
   }
   

3. 支持 PayPal、Venmo 和 3D Secure： 在 AndroidManifest.xml 中添加以下 intent filter 以允许浏览器切换：

   <activity android:name="com.braintreepayments.api.DropInActivity"
             android:launchMode="singleTask">
     <intent-filter>
         <action android:name="android.intent.action.VIEW" />
         <category android:name="android.intent.category.DEFAULT" />
         <category android:name="android.intent.category.BROWSABLE" />
         <data android:scheme="${applicationId}.braintree" />
     </intent-filter>
   

</activity> <activity android:name=“com.braintreepayments.api.ThreeDSecureActivity” android:theme="@style/Theme.AppCompat.Light" android:exported=“true”> </activity>

**重要提示**：您的应用 URL scheme 必须以您的包 ID 开头并以 `.braintree` 结尾。例如，如果包 ID 是 `com.your-company.your-app`，则 URL scheme 应为 `com.your-company.your-app.braintree`。`${applicationId}` 自动应用于 Gradle 中的包 ID。
**注意**：您定义的 scheme 必须全部使用小写字母。如果您的包包含下划线，请在指定方案时移除下划线。

#### iOS 使用示例

1. **添加或取消 Podfile 中的平台声明**：
在 `ios/Podfile` 的顶部添加或取消以下行：

```ruby
platform :ios, '12.0'

警告：设备数据收集尚未支持 iOS。

1. 设置 URL Scheme： 在 App Delegate 或 Runner 项目中，需要指定用于重定向支付的 URL Scheme：

   BTAppContextSwitcher.setReturnURLScheme("com.your-company.your-app.payments")
   

   同时，在 Info.plist 中也需要指定相同的 URL Scheme：

   <key>CFBundleURLTypes</key>
   <array>
       <dict>
           <key>CFBundleTypeRole</key>
           <string>Editor</string>
           <key>CFBundleURLName</key>
           <string>com.your-company.your-app.payments</string>
           <key>CFBundleURLSchemes</key>
           <array>
               <string>com.your-company.your-app.payments</string>
           </array>
       </dict>
   </array>
   

   参见官方文档 Braintree 文档 以获取更详细的说明。

使用示例

1. 创建 Braintree 账户： 首先创建一个 Braintree 账户，并在控制面板中创建一个密钥化键。确保后端服务器已配置好。请参阅 Braintree 开发者文档以了解所有关键概念。

2. 导入插件： 在代码中导入插件：

   import 'package:flutter_braintree/flutter_braintree.dart';
   

3. 创建用户界面： 您可以使用 Flutter 创建自己的用户界面，也可以使用 Braintree 的的内置 UI。

Flutter UI 示例

信用卡

1. 创建一个信用卡请求对象：

   final request = BraintreeCreditCardRequest(
     cardNumber: '4111111111111111',
     expirationMonth: '12',
     expirationYear: '2021',
     cvv: '367',
   );
   

2. 请求 Braintree 进行密钥化：

   BraintreePaymentMethodNonce result = await Braintree.tokenizeCreditCard(
     '<Insert your tokenization key or client token here>',
     request,
   );
   print(result.nonce);
   

PayPal

1. 创建一个 PayPal 请求对象：

   final request = BraintreePayPalRequest(amount: '13.37');
   

2. 或者，对于 Vault 流程：

   final request = BraintreePayPalRequest(
     billingAgreementDescription: 'I hereby agree that flutter_braintree is great.',
   );
   

3. 启动 PayPal 请求：

   BraintreePaymentMethodNonce result = await Braintree.requestPaypalNonce(
     '<Insert your tokenization key or client token here>',
     request,
   );
   if (result != null) {
     print('Nonce: ${result.nonce}');
   } else {
     print('PayPal flow was canceled.');
   }
   

Braintree 的的原生 Drop-in 示例

1. 创建一个 drop-in 请求对象：

   final request = BraintreeDropInRequest(
     clientToken: '<Insert your client token here>',
     collectDeviceData: true,
     googlePaymentRequest: BraintreeGooglePaymentRequest(
       totalPrice: '4.20',
       currencyCode: 'USD',
       billingAddressRequired: false,
     ),
     paypalRequest: BraintreePayPalRequest(
       amount: '4.20',
       displayName: 'Example company',
     ),
   );
   

2. 启动 drop-in：

   BraintreeDropInResult result = await BraintreeDropIn.start(request);
   

3. 获取支付密钥化结果：

   if (result != null) {
     print('Nonce: ${result.paymentMethodNonce.nonce}');
   } else {
     print('Selection was canceled.');
   }
   

为了增加成功完成 3DS2 挑战的机会，可以在参考 [M]迁移至 3D Secure 2]中的指南来提供关于用户的额外信息。

var request = BraintreeDropInRequest(
  clientToken: '<Insert your client token here>',
  collectDeviceData: true,
  requestThreeDSecureVerification: true,
  email: "test@email.com",
  amount: "0,01",
  billingAddress: BraintreeBillingAddress(
    givenName: "Jill",
    surname: "Doe",
    phoneNumber: "5551234567",
    streetAddress: "555 Smith St",
    extendedAddress: "#2",
    locality: "Chicago",
    region: "IL",
    postalCode: "12345",
    countryCodeAlpha2: "US",
  ),
  cardEnabled: true,
);

更多文档，请参阅 BraintreeDropInRequest 和 BraintreeDropInResult。

示例代码