谷歌flutter

Google’s Flutter is an excellent platform and I like its capability to build robust hybrid apps the most. Flutter app development services can help entrepreneurs come up with feature-rich apps in a short time. As a Flutter app developer, I keep on exploring the possibilities of integrating innovative features and functionality in Flutter apps.

Google的Flutter是一个出色的平台,我最喜欢其构建健壮的混合应用程序的能力。 Flutter应用程序开发服务可以帮助企业家在短时间内提出功能丰富的应用程序。 作为Flutter应用程序开发人员,我一直在探索在Flutter应用程序中集成创新功能的可能性。

Recently I was searching How to integrate Google Pay using Stripe Payment Gateway in Flutter. I have also checked Stripe Official Documentation For Google Pay. But documentation is not for the Flutter Platform. So I decided to publish an article to integrate Google Pay using Stripe in Flutter.

最近,我在搜索如何使用Flutter中的Stripe Payment Gateway集成Google Pay。 我还检查了Stripe的 Google Pay 官方文档 。 但是文档不适用于Flutter平台。 因此,我决定发表一篇文章,在Flutter中使用Stripe集成Google Pay。

Stripe is the software platform for running an internet bussiness. It’s a suite of payment APIs that powers commerce for online businesses of all sizes.

Stripe是用于运行Internet商务的软件平台。 这是一套支付API,可为各种规模的在线企业提供商务支持。

Use of these platforms in this integration.

在集成中使用这些平台。

  1. Flutter for Front-end Side Development.

    用于前端开发的Flutter 。

  2. Stripe to use its Payment APIs.

    条纹使用其付款API。

  3. Firebase to deploy Cloud Function for Server-Side Development.

    Firebase部署用于服务器端开发的云功能。

Lets first make a note of the tasks we are going to do :

让我们首先记下我们要完成的任务:

  1. Use Android Studio and Visual Studio Code as an Editor.

    使用Android Studio和Visual Studio代码作为编辑器。
  2. Create a new Flutter Project named as per your choice.

    根据您的选择创建一个新的Flutter项目。
  3. Use a stripe_native plugin.

    使用stripe_native插件。

  4. Create an Account on Stripe. Just Sign up and Sign in, not required other details as we will be using the test API keys.

    在Stripe上创建一个帐户。 只需注册并登录,不需要其他详细信息,因为我们将使用测试API密钥。

  5. Create Flutter Project on Firebase Console and Upgrade your Firebase plan to Blaze Plan(Paid Plan). A paid account is the most important one.

    在Firebase控制台上创建Flutter Project,并将Firebase计划升级到Blaze Plan(付费计划)。 付费帐户是最重要的帐户。

  6. Setup the Node.js environment in your system.

    在系统中设置Node .js环境。

  7. Setup Firebase CLI to deploy Firebase Cloud Functions.

    设置Firebase CLI以部署Firebase Cloud Functions。

演示地址

Source 资源

Create a Flutter Project in your Android Studio or VS Code.

在Android Studio或VS Code中创建Flutter项目。

使用stripe_native插件 (Use stripe_native Plugin)

Add this plugin into pubspec.yaml file.

将此插件添加到pubspec.yaml文件中。

dependencies:
  flutter:
    sdk: flutter




  cupertino_icons: ^0.1.3
  stripe_native: ^1.2.3

Please run the following command

请运行以下命令

flutter pub get

扑吧获得

在条带上创建帐户 (Create Account on Stripe)

Go to Stripe Website then perform Sign up and Sign In.

转到Stripe网站,然后执行“注册并登录”。

After Creating Stripe Account Go to Dashboard.

创建Stripe Account后,转到Dashboard 。

Source 资源

Click on Get your test API keys. It gives you two API keys (Publishable Key, Secret key).

单击获取您的测试API密钥。 它为您提供了两个API密钥(可发布密钥,秘密密钥)。

Note : I have followed coding standards into this so when there is requirement to show details of particular word then its written below gist.

注意 :我已遵循此编码标准,因此当需要显示特定单词的详细信息时,请在下面的要点中编写。

Lets set this Publishable API key in your project file.

让我们在项目文件中设置此可发布API密钥。

@override
  void initState() {
    super.initState();
    StripeNative.setPublishableKey(publishableKey);
    StripeNative.setMerchantIdentifier(merchantIdentifier);
  }

publishableKey : ‘ Your Stripe Account Publishable Key which mentioned on Dashboard ’

publishableKey:'仪表板上提到的您的Stripe Account可发布密钥'

merchantIdentifier : ‘ Test ’ (As we are in test mode)

vendorIdentifier:“测试”(因为我们处于测试模式)

Note : Please use the latest version of all plugins at the time of your development.

注意:请在开发时使用所有插件的最新版本。

Also, add below plugins (Ignore if already added).

另外,添加以下插件(如果已添加,则忽略)。

dependencies:
  flutter:
    sdk: flutter


  cupertino_icons: ^0.1.3
  stripe_native: ^1.2.3
  firebase_auth: ^0.16.1
  firebase_core: ^0.4.5
  cloud_functions: ^0.5.0
  fluttertoast: ^4.0.1
  intl: ^0.16.1

We have two APIs for Charging the customers.

我们有两个用于向客户收费的API。

  1. Charges API

    收费API

  2. Payment Intent API

    付款意图API

Limitation of Charges API and Benefit of Payment Intent API :

费用限制API和付款意向API:

Charges API does not support scaling businesses or customers outside of the U.S. and Canada.

Charges API不支持扩展美国和加拿大以外的业务或客户。

Payment Intent API for more robust and global payments.

Payment Intent API,用于更强大的全球支付。

So After referring to the documentation of both APIs I have come up with this.

因此,在参考了两个API的文档之后,我想到了这一点。

It indicates to try new payments APIs and Integrations instead of old ones. So I am preferring you to use Payment Intent API instead of Charges API for charging the customers.

它指示尝试使用新的付款API和集成而不是旧的。 因此,我希望您使用Payment Intent API而非Charges API向客户收费。

So Let's do back-end part first using Node.js, Cloud Function, and Visual Studio (Only for Server Side Development).

因此,让我们首先使用Node.js,Cloud Function和Visual Studio(仅用于服务器端开发)进行后端部分。

在Firebase控制台上创建项目并获取Blaze计划 (Create Project On Firebase Console And Get Blaze plan)

After Upgrade your plan to Blaze Plan

将您的计划升级到Blaze计划后

设置Firebase CLI以实施云功能 (Setup Firebase CLI To implement Cloud Function)

Run the following commands in terminal :

在终端中运行以下命令:

npm install -g firebase-toolsfirebase init

npm install -g firebase-tools firebase init

After running the last command you will get this window in the terminal.

运行最后一条命令后,您将在终端中看到此窗口。

Choose Functions: Configure and Deploy Cloud Functions.

选择功能:配置和部署云功能。

After that please choose your project according to your project name and finish all the steps.Please install all the npm dependencies which it’s asking for. It generates some files into your functions folder.

之后,请根据您的项目名称选择您的项目,并完成所有步骤。请安装所有要求的npm依赖项。 它将一些文件生成到您的functions文件夹中。

Let's focus on the index.js file.

让我们关注index.js文件。

const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp(functions.config().firebase);


const firestore = admin.firestore();
const settings = { timestampInSnapshots: true };
firestore.settings(settings)
const stripe = require('stripe')('<Your Secret Key>');


//Create Payment
exports.createPayment = functions.region('europe-west3').https.onCall(async (data, context) => {
  try {
    //Create Payment Method
    const paymentMethod = await stripe.paymentMethods.create(
      {
        type: 'card',
        card: {
          token: data.token,
        },
      },
    );
    // If You Want to Implement Combine Process Of CreatePayment and ConfirmPayment
    //then Please Uncomment this below two lines then return status and Do not Call Below ConfirmPayment
    //method From FrontEnd Side


    //Create PaymentIntent
    const paymentIntent = await stripe.paymentIntents.create({
      amount: data.amount,
      currency: data.currency,
      // payment_method: connectedAccountPaymentMethod.id,
      // confirm: true,
      description: 'Software development',
      shipping: {
        name: 'Jenny Rosen',
        address: {
          line1: '510 Townsend St',
          postal_code: '98140',
          city: 'San Francisco',
          state: 'CA',
          country: 'US',
        },
      },
    })
    return {
      paymentIntentId: paymentIntent.id,
      paymentMethodId: paymentMethod.id,
    }
  } catch (e) {
    console.log(e);
    return {
      error : e,
      paymentIntentId: "",
      paymentMethodId: ""
    }
  }
});


//For Confirmming Payment
exports.confirmPayment = functions.region('europe-west3').https.onCall(async (data, context) => {
  try {
    const finalPayment = await stripe.paymentIntents.confirm(
      data.paymentIntentId,
      { payment_method: data.paymentMethodId });
    return {
      paymentStatus: finalPayment.status,
    }
  } catch (e) {
    console.log(e);
    return {
      error : e,
      paymentStatus : ""
    }
  }
});


//For Canceling Payment
exports.cancelPayment = functions.region('europe-west3').https.onCall(async (data, context) => {
  try{
  const cancel = await stripe.paymentIntents.cancel(
    data.paymentIntentId,
  );
  return {
    cancelStatus: cancel.status,
  }
  }catch(e){
    console.log(e);
    return {
      error : e,
      cancelStatus : ""
    }
  }
});

First seven lines from the top used for getting access to platforms.

从顶部开始的前七行用于访问平台。

Please replace<Your Secret Key> into your secret key provided on Stripe Dashboard.

请将<您的密钥>替换为Stripe仪表板上提供的密钥。

exports.createPayment , exports.confirmPayment and exports.cancelPayment indicate our Cloud functions for Stripe Payment.

Exports.createPayment,exports.confirmPaymentexports.cancelPayment指示我们用于条带支付的云功能。

stripe.paymentMethods.create

stripe.paymentMethods.create

stripe.paymentIntents.create

stripe.paymentIntents.create

stripe.paymentIntents.confirm

stripe.paymentIntents.confirm

stripe.paymentIntents.cancel

stripe.paymentIntents.cancel

You can see these three lines in the above code. It's written from API documentation of Stripe to complete our payment integration from creating Payment Method to Confirm Payment and Cancel Payment.

您可以在上面的代码中看到这三行。 它是从Stripe的API文档编写的,以完成从创建付款方式到确认付款和取消付款的付款集成。

To deploy firebase cloud functions run the following command :

要部署Firebase云功能,请运行以下命令:

firebase deploy --only functions

firebase deploy --only功能

You can see cloud functions in your firebase console.

您可以在Firebase控制台中查看云功能。

演示地址

Source 资源

Now Let’s Call this cloud functions from our Front-end side. So open your Flutter Project in Android Studio.

现在让我们从前端侧调用此云功能。 因此,在Android Studio中打开Flutter Project。

Please note the below lines if you get any error when running.

如果在运行时出现任何错误,请注意以下几行。

Ensure to be on a minSdkVersion 19 in build.gradle(app-level) file.

确保位于build.gradle(应用程序级别)文件中的minSdkVersion 19上。

make sure to have multiDexEnabled true also.

确保multiDexEnabled也为true

defaultConfig {
        applicationId "com.jp.googlepaystripe"
        minSdkVersion 19
        targetSdkVersion 28
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
        multiDexEnabled true
    }

First, make StripePaymentManager class to separate out code for calling API.

首先,使StripePaymentManager类分离出用于调用API的代码。

import 'package:cloud_functions/cloud_functions.dart';
import 'package:flutter/material.dart';
import 'package:googlepaystripe/home/model/cancel_payment_info.dart';
import 'package:googlepaystripe/home/model/confirm_payment_info.dart';
import 'package:googlepaystripe/home/model/payment_intent_info.dart';
import 'package:googlepaystripe/utils/constants/constants.dart';
import 'package:googlepaystripe/utils/progress_dialog.dart';


class StripePaymentManager {
  HttpsCallableResult paymentIntentResult,
      confirmPaymentResult,
      cancelPaymentResult;
  HttpsCallable callPaymentIntent, callConfirmPayment, callCancelPayment;
  BuildContext context;


  PaymentIntentInfo __paymentInfoFromStripe(HttpsCallableResult intentInfo) {
    return intentInfo != null
        ? PaymentIntentInfo(
            paymentIntentId: intentInfo.data[paymentIntentIdKey],
            paymentMethodId: intentInfo.data[paymentMethodIdKey])
        : null;
  }


  ConfirmPaymentInfo __confirmPaymentInfoFromStripe(
      HttpsCallableResult confirmInfo) {
    return confirmInfo != null
        ? ConfirmPaymentInfo(paymentStatus: confirmInfo.data[paymentStatusKey])
        : null;
  }


  CancelPaymentInfo __cancelPaymentInfoFromStripe(
      HttpsCallableResult cancelInfo) {
    return cancelInfo != null
        ? CancelPaymentInfo(cancelStatus: cancelInfo.data[cancelStatusKey])
        : null;
  }


  //Call Create Payment Method and Create Payment Intent Stripe API
  Future startCreatePayment(BuildContext context, double totalAmount,
      String currencyName, String token) async {
    callPaymentIntent = CloudFunctions(region: europeRegion)
        .getHttpsCallable(functionName: createPaymentMethod);
    ProgressDialogUtils.showProgressDialog(context);
    try {
      paymentIntentResult = await callPaymentIntent.call(<String, dynamic>{
        amountKey: totalAmount,
        currencyKey: currencyName.toLowerCase(),
        tokenKey: token
      });
      ProgressDialogUtils.dismissProgressDialog();
      return __paymentInfoFromStripe(paymentIntentResult);
    } on CloudFunctionsException catch (e) {
      print(e.code);
      print(e.message);
      print(e.details);
    } catch (e) {
      print(e);
    }
  }


  //Call Confirm PaymentIntent Stripe API
  Future confirmPaymentIntent(
      BuildContext context, String intentId, String methodId) async {
    callConfirmPayment = CloudFunctions(region: europeRegion)
        .getHttpsCallable(functionName: confirmPaymentMethod);
    ProgressDialogUtils.showProgressDialog(context);
    try {
      confirmPaymentResult = await callConfirmPayment.call(<String, dynamic>{
        paymentIntentIdKey: intentId,
        paymentMethodIdKey: methodId,
      });
      ProgressDialogUtils.dismissProgressDialog();
      return __confirmPaymentInfoFromStripe(confirmPaymentResult);
    } on CloudFunctionsException catch (e) {
      print(e.code);
      print(e.message);
      print(e.details);
    } catch (e) {
      print(e);
    }
  }


  //Call Cancel PaymentIntent Stripe API
  Future cancelPayment(BuildContext context, String intentId) async {
    try {
      callCancelPayment = CloudFunctions(region: europeRegion)
          .getHttpsCallable(functionName: cancelPaymentMethod);
      ProgressDialogUtils.showProgressDialog(context);
      cancelPaymentResult = await callCancelPayment.call(<String, dynamic>{
        paymentIntentIdKey: intentId,
      });
      ProgressDialogUtils.dismissProgressDialog();
      return __cancelPaymentInfoFromStripe(cancelPaymentResult);
    } on CloudFunctionsException catch (e) {
      print(e.code);
      print(e.message);
      print(e.details);
    } catch (e) {
      print(e);
    }
  }
}

europeRegion : ‘ europe-west3 ’

欧洲地区:“ europe-west3”

createPaymentMethod : ‘ createPayment ’

createPaymentMethod:'createPayment'

confirmPaymentMethod : ‘ confirmPayment ’

ConfirmPaymentMethod:“ confirmPayment”

cancelPaymentMethod : ‘cancelPayment’

cancelPaymentMethod:'cancelPayment'

amountKey : ‘ amount ’

amountKey:“金额”

currencyKey : ‘ currency ’

currencyKey:'货币'

tokenKey : ‘ token ’

tokenKey:“令牌”

paymentIntentIdKey : ‘ paymentIntentId ’

paymentIntentIdKey:“ paymentIntentId”

paymentMethodIdKey : ‘ paymentMethodId ’

paymentMethodIdKey:'paymentMethodId'

paymentStatusKey : ‘ paymentStatus ’

paymentStatusKey:“ paymentStatus”

cancelStatusKey : ‘cancelStatus’

cancelStatusKey:'cancelStatus'

Three model classes : PaymentIntentInfo , ConfirmPaymentInfo and CancelPaymentInfo.

三个模型类: PaymentIntentInfoConfirmPaymentInfoCancelPaymentInfo

class PaymentIntentInfo {
  String paymentIntentId;
  String paymentMethodId;
  PaymentIntentInfo({this.paymentIntentId, this.paymentMethodId});
}
class ConfirmPaymentInfo {
  String paymentStatus;
  ConfirmPaymentInfo({this.paymentStatus});
}
class CancelPaymentInfo {
  String cancelStatus;
  CancelPaymentInfo({this.cancelStatus});
}

Okay, now you are done with the API calling part. So you have passed half of the implementation and will complete it soon.

好的,现在您已经完成了API调用部分。 因此,您已经通过了一半的实施,并将很快完成。

演示地址

Source 资源

Now let's go to GooglePayment Screen, declare these below variables which we will use in the future.

现在,我们转到GooglePayment屏幕,声明以下这些变量,我们将在以后使用它们。

class _GooglePaymentPageState extends State<GooglePaymentPage> {
  double totalAmount = 0;
  double amount = 0;
  String currencyName = "";
  Map receipt;
  Receipt finalReceipt;
  String generatedToken = "";
  final StripePaymentManager _stripePaymentManager = StripePaymentManager();

Let’s build the Button Widget.

让我们构建Button Widget。

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.black,
          title: Text(
            googlePay,
            style: nativeTextStyle,
          ),
          centerTitle: true,
        ),
        body: Center(
          child: _buildNativeButton(),
        ));
  }


  //Native Button Widget
  Widget _buildNativeButton() {
    return Padding(
        padding: EdgeInsets.all(spacingSmall),
        child: RaisedButton(
            color: Colors.black,
            child: Text(
              googlePay,
              style: nativeTextStyle,
            ),
            onPressed: () {
              _onNativeButtonClicked();
            }));
  }

nativeTextStyle : You can define your prefer Textstyle.

nativeTextStyle:您可以定义自己喜欢的Textstyle。

spacingSmall : Any Size According to requirement.

intervalSmall:根据要求任意大小。

Now we want click event of this native button so let's go with the below code.

现在,我们要单击此本机按钮的click事件,所以让我们看下面的代码。

//Click Event Method For Google Pay Button To Start Create Payment
  _onNativeButtonClicked() async {
    currencyName = currency();
//    Below Two lines is for Example To Show How To Pass Details To receiptPayment
//    Method For Generating Token
    receipt = <String, double>{"Nice Hat": 5.00, "Used Hat": 1.50};
    finalReceipt = Receipt(receipt, "Hat Store");
    //You can pass Amount According To Your Payment
    amount = 0;
    receipt.values.forEach((element) {
      amount = amount + element;
    });
    totalAmount = amount * 100.0;
    generatedToken = await receiptPayment(finalReceipt);
    try {
      dynamic result = await _stripePaymentManager.startCreatePayment(
          context, totalAmount, currencyName, generatedToken);
      if (result is PaymentIntentInfo) {
        if (result != null) {
          confirmDialog(receipt, finalReceipt, result.paymentIntentId,
              result.paymentMethodId);
        }
      }
    } catch (e) {
      ToastUtils.showToast(e, Colors.black, Colors.white);
      return e;
    }
  }


  //To Get Locale Based Currency Name
  String currency() {
    Locale locale = Localizations.localeOf(context);
    var format = NumberFormat.simpleCurrency(locale: locale.toString());
    return format.currencyName;
  }


  //To Generate Token (Method Already Implemented in Plugin)
  Future<String> receiptPayment(Receipt finalReceipt) async {
    return await StripeNative.useReceiptNativePay(finalReceipt);
  }

Final Result After the click of Native Button.

最终结果单击本机按钮后。

You will see this error Unrecognized app. Please make sure you trust this app before proceeding, please don’t bother about it. This error indicates that the app uses ENVIRONMENT_TEST and doesn't receive real payment credentials. When you will change your environment from test mode to live mode error will be resolved.

您将看到此错误无法识别的应用程序。 在进行下一步之前 ,请确保您信任此应用 ,请不要担心。 此错误表明该应用使用ENVIRONMENT_TEST ,并且未收到实际的付款凭证。 当您将环境从测试模式更改为实时模式时,将解决错误。

According to me, we have to ask the user again that if he/she really wants to do further payment process. So I have added one AlertDialog to get confirmation from User. Please check the below gist for the Dialog feature.

根据我的说法,我们必须再次询问用户,他/她是否真的要进行进一步的付款流程。 因此,我添加了一个AlertDialog来获得User的确认。 请检查以下要点,了解“对话”功能。

//To Ask User To Confirm Payment Or Not
  confirmDialog(
      Map receipt, Receipt finalReceipt, String intentId, String methodId) {
    showDialog(
        context: context,
        barrierDismissible: false,
        builder: (BuildContext context) {
          return AlertDialog(
              title: Text(confirmDialogTitle, style: headerTextStyle),
              content: Container(
                  child:
                      Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
                Column(
                    children: finalReceipt.items.entries.map((e) {
                  totalAmount = totalAmount + e.value;
                  return Column(children: <Widget>[
                    Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Text("${e.key}", style: titleTextStyle),
                          Text("${e.value}", style: titleContentTextStyle),
                        ])
                  ]);
                }).toList()),
                Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Text("$payTo ${finalReceipt.merchantName}",
                          style: headerTextStyle),
                      Text(
                        "${finalReceipt.items.values.elementAt(0) + finalReceipt.items.values.elementAt(1)}",
                        style: titleContentTextStyle,
                      )
                    ])
              ])),
              actions: <Widget>[
                RaisedButton(
                  child: Text(cancel, style: cancelTextStyle),
                  onPressed: () {
                    Navigator.of(context).pop();
                    cancelPayment(intentId);
                  },
                ),
                RaisedButton(
                    child: Text(confirm, style: confirmTextStyle),
                    onPressed: () {
                      Navigator.of(context).pop();
                      confirmPayment(intentId, methodId);
                    })
              ]);
        });
  }

Please define your TextStyle in every Textstyle which mentioned in above gist

请在以上要点中提到的每个Textstyle中定义您的TextStyle

When the user will go with the Continue button, there is some create payment process starting in the background and after this popup will be shown.

当用户单击“继续”按钮时,将从后台开始执行一些创建付款过程,然后将显示此弹出窗口。

Let’s implement the Confirm and Cancel Payment scenario.

让我们实现“确认和取消付款”方案。

//To Confirm the payment process
  confirmPayment(String intentId, String methodId) async {
    try {
      dynamic result = await _stripePaymentManager.confirmPaymentIntent(
          context, intentId, methodId);
      if (result is ConfirmPaymentInfo) {
        if (result != null) {
          if (result.paymentStatus == paymentSuccessStatus) {
            ToastUtils.showToast(
                successPaymentStatus, Colors.black, Colors.white);
          }
        }
      }
    } catch (e) {
      ToastUtils.showToast(e, Colors.black, Colors.white);
      return e;
    }
  }


  //To cancel the payment process
  cancelPayment(String intentId) async {
    try {
      dynamic result =
          await _stripePaymentManager.cancelPayment(context, intentId);
      if (result is CancelPaymentInfo) {
        if (result != null) {
          if (result.cancelStatus == cancelStatus) {
            ToastUtils.showToast(
                cancelPaymentStatus, Colors.black, Colors.white);
          }
        }
      }
    } catch (e) {
      ToastUtils.showToast(e, Colors.black, Colors.white);
      return e;
    }
  }

paymentSuccessStatus : ‘ succeeded ’

paymentSuccessStatus:“成功”

cancelStatus : ‘ canceled ’

cancelStatus:“已取消”

successPaymentStatus : ‘ Payment Successful ’

successPaymentStatus:'付款成功'

cancelPaymentStatus : ‘ Payment Canceled ’

cancelPaymentStatus:“付款已取消”

Okay, finally you have done a great job so far. Please run the following command in the terminal.

好吧,到目前为止,您到目前为止做得很好。 请在终端中运行以下命令。

flutter run

扑动

When a user taps on the Confirm button, the final result is…

当用户点击“确认”按钮时,最终结果是…

Yeah, we did it. You can see this in your Stripe Dashboard also.

是的,我们做到了。 您也可以在“条纹仪表板”中看到它。

When a user taps on the Cancel button, the final result is…

当用户点击“取消”按钮时,最终结果是…

Yeah, we did it. You can see this in your Stripe Dashboard also.

是的,我们做到了。 您也可以在“条纹仪表板”中看到它。

演示地址

Source 资源

结论 (Conclusion)

We have done all the Implementation and Google Pay Payments using the Stripe testing section. If you want to do implement for Production purpose then you have to Activate your account by filling your business details. So After that, you can get access to Live API keys and go ahead.

我们已经使用条纹测试部分完成了所有实施和Google Pay付款。 如果您要为生产目的而实施工具,则必须通过填写业务详细信息来激活您的帐户。 因此,在那之后,您可以访问Live API密钥并继续。

So, that’s it for Google Pay using Stripe in Flutter.

因此, 使用Flutter中的Stripe的Google Pay就是这样。

You can find the whole project with clean architecture on Git Repository :

您可以在Git Repository上找到具有干净架构的整个项目:

翻译自: https://medium/swlh/accept-payments-using-google-pay-through-stripe-in-flutter-d65dfaa0091a

谷歌flutter

更多推荐

谷歌flutter_在Flutter中使用Google Pay Through Stripe接受付款