Google有料とアップルは、フラッタのストライプを使用して支払う

たくさんのスイッチングパッケージの後に、gradleを設定し、PODをインストールして動作させます.私は最終的にGoogleが有料図書館の導入でこの戦いに終止符を打つのを見てうれしいです.名前としては、本当に簡単でまっすぐに、まだ私はインターネット上のいくつかのリソースが不足しているので、本当に素晴らしい何かを開発に焦点を当てることができるように短い時間でそのような機能を実装するのに役立つリソースを必要があります.
私は非常に単純な行のペースト束をコピーすることができますし、それを動作させる非常にシンプルにしています.
まず第一に、あなたは以下を必要とします

ストライプアカウントと発行可能キー

ストライプを有効にしてから証明書をアップロードhere

グーグルマーチャントアカウントhere

さあ始めましょう.

構成

アップルペイ
そして、以下のJSONファイルはあなたの資産ファイルとして/assets/apple_pay.json フォルダ

{
  "provider": "apple_pay",
  "data": {
    "merchantIdentifier": "<Merchant ID from developer.apple.com>",
    "displayName": "<Display Name>",
    "merchantCapabilities": [
      "3DS",
      "debit",
      "credit"
    ],
    "supportedNetworks": [
      "amex",
      "visa",
      "discover",
      "masterCard"
    ],
    "countryCode": "FR", // Country code
    "currencyCode": "EUR", // Currency code
    "requiredBillingContactFields": null, 
    "requiredShippingContactFields": null
  }
}

グーグルペイ
そして、以下のJSONファイルはあなたの資産ファイルとして/assets/google_pay.json フォルダ

{
  "provider": "google_pay",
  "data": {
    "environment": "TEST",
    "apiVersion": 2,
    "apiVersionMinor": 0,
    "allowedPaymentMethods": [
      {
        "type": "CARD",
        "tokenizationSpecification": {
          "type": "PAYMENT_GATEWAY",
          "parameters": {
            "gateway": "stripe",
            "stripe:version": "2020-08-27",
            "stripe:publishableKey": "<stripe publishable key, eg pk_.......>"
          }
        },
        "parameters": {
          "allowedCardNetworks": [
            "VISA",
            "MASTERCARD"
          ],
          "allowedAuthMethods": [
            "PAN_ONLY",
            "CRYPTOGRAM_3DS"
          ],
          "billingAddressRequired": false
        }
      }
    ],
    "merchantInfo": {
      "merchantId": "<Merchant ID from pay.google.com/business>",
      "merchantName": "<Display Name>"
    },
    "transactionInfo": {
      "countryCode": "FR",
      "currencyCode": "EUR"
    }
  }
}

フラッターコード

パッケージのインストール
インサイド・ユアpubspec.yaml ファイル追加

pay: 1.0.3 # Latest one at the time of writing

パッケージの初期化
あなたのコードベースのどこかで、あなたがちょうど加えた資産から上記のJSONファイルでパッケージを最初に有効にします.

Pay _pay = Pay.withAssets(["google_pay.json","apple_pay.json"]);

有効性チェック
したら、パッケージを有効にすると、今すぐあなたの支払いサービスの可用性をチェックすることができます.利用できるプロバイダの配列を維持するためにリンクします.

    List<PayProvider> availableProviders = [];
    PayProvider.values.forEach((e) async {
      bool canPay = await _pay.userCanPay(e);
      if (canPay) availableProviders.add(e);
    });

表示アップルボタンを表示

オプション1(最も速い)(この1つまたは他のいずれか、私は2番目の1つを好む)
あなたは直接支払いを行うように開始するウィジェット上のすべてを書くことによって支払いを直接処理することができます提供されるネイティブの有料ボタンを使用することができます.

グーグル有料ボタン

  if(availableProviders.contains(PayProvider.google_pay))
    GooglePayButton(
      paymentConfigurationAsset: "google_pay.json",
      onPaymentResult: (Map data){
        print(data);
      },
      paymentItems: [ // You can have multiple items on your payment
        PaymentItem(
          amount: "100", // Your amount
          label: "AwesomeProduct", // Your amount title
          status: pay.PaymentItemStatus.final_price, // Status of the payment
          type: pay.PaymentItemType.total, // Type of the payment
        )
      ],
    )

アップルペイ

  if(availableProviders.contains(PayProvider.apple_pay))
    ApplePayButton(
      paymentConfigurationAsset: "apple_pay.json",
      onPaymentResult: (Map data){
        print(data);
      },
      paymentItems: [ // You can have multiple items on your payment
        PaymentItem(
          amount: "100", // Your amount
          label: "AwesomeProduct", // Your amount title
          status: pay.PaymentItemStatus.final_price, // Status of the payment
          type: pay.PaymentItemType.total, // Type of the payment
        )
      ],
    )

オプション2(最高、IMO)
ビジネスコードとUIコードを分離する場合は、これはあなたのためのものです.ウィジェットを使用する代わりに、任意のウィジェットを使用することができますApple Pay or Google Pay )

    Map<String, dynamic> data = await _pay.showPaymentSelector(
      provider: provider // Can be supported provider (PayProvider.apple_pay, PayProvider.google_pay),
      paymentItems: [
        PaymentItem(
          label: "Awesome Product",
          amount: "100",
          type: PaymentItemType.item,
          status: PaymentItemStatus.final_price,
        ),
      ],
    );

オプションのいずれかの後、あなたはMap data . それがマップであり、型付けされた値でない理由は、すべてのプロバイダーが複数のプロバイダーをサポートするように、独自のパターンでレスポンスを返します.パッケージは、パッケージを可能な限り生のようにするためにマップするようにしています.
応答から、あなたが必要とするすべては、以下の通りでなければならないトークンです

String tokenToBeSentToCloud = data["token"];

サーバ側
ユーザーのカードに実際にチャージする
あなたがトークンを持っているならば、あなたは現在、支払いを処理するために、バックエンド・コード(フラッター(推薦されない)であることもできます)を持つ必要があります.私はノードを使用しています.JSサーバーは、モバイルからトークンを使用して支払いを処理する.

パッケージのインストールnpm install stripe or yarn add stripe
パッケージの初期化

export const stripe = new Stripe("<stripe_secret_key>", {
    apiVersion: "2020-08-27"
});

充電する

    const paymentMethod = await stripe.paymentMethods.create({
        type: "card",
        card: {
            token: "<token from pay package>"
        }
    })

    await stripe.paymentIntents.create({
        amount: 10000, // Amount in cents, can be different from what you presented on the pay dialog on mobiel
        currency: "EUR", // Currentcy
        capture_method: "automatic", // 
        customer: "<Optional, if you have customer on stripe>",
        payment_method: paymentMethod.id,
        receipt_email: "<If you want to send reciept in email>,
        statement_descriptor: "<Statement Label(max 22 chars)>",
        confirm: true, // True charges the card instantly
        description: "Product description"
    })

Voila、あなただけのユーザーを充電します.
今、あなたはストライプで行うことができます他のクールなものがあります.チェックアウト・ストライプdocumentation より多くの機能.