Flutterexperts

Today we use mobile devices, not only for sending messages or receiving calls but also for ordering products or services and paying for them. Paying with a smartphone is easier than ever. Whether you want to build a booking, purchase products, use alternative currencies, manage expenditures, earn rewards, events, or even an e-commerce app to process transactions you will need a payment gateway.

In this article, we will explore a Stripe payment gateway integration with a flutter app. We will show a small demo program to integrate into your flutter app.

Table of Content :

Stripe Payment — Introduction

Generate API Key

Features

Implementation — Setup Configuration

Code Implement

Conclusion

---

---

Strip Payment :

Stripe is a payment gateway used to make payments on the web. Stripe has heaps of valuable highlights, for example, repeating installments, escrow records, and ongoing charge card number approval utilizing Luhn’s algorithm. With the presentation of SCA rules in the UK, Stripe additionally gives SCA agreeable APIs and Payment Intents, so it makes your work exceptionally straightforward. Stripe Collect chargeable tokens from clients’ Card Input and Apple and Google pay.

How to Generate API Key :

1. Sign in to your Dashboard with suitable credentials.
2. Select the mode (Test or Live) for which you need to create the API key
3. Explore to Dashboard →API Keys → Generate Key to create a key for the chose mode.

Note: You need to produce separate API Keys for the test and live modes. No cash is deducted from your record in test mode.

Flutter Stripe Payment Features :

• canMakeNativePayPayments
• deviceSupportsNativePay
• potentiallyAvailableNativePayNetworks
• completeNativePayRequest
• cancelNativePayRequest

Implementation :

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies:

stripe_payment: ^latest version

Step 2: Import

import 'package:stripe_payment/stripe_payment.dart';

Step 3: Run flutter packages get in the root directory of your app.

Step 4: Minimum Version Requirement

Change in your android/app/buld.gradle file.

minSdkVersion 19
compileSdkVersion 28

Step 5: Enable MultiDex

Enable MultiDex in the app/build. Gradle file.

android {
    compileSdkVersion 28

.....
    defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "com.example.flutterstripepaymentdemo"
        minSdkVersion 19
        targetSdkVersion 28
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
        multiDexEnabled true

   }
}

Add multidex dependencies

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'com.android.support:multidex:1.0.3'

}

Step 6:Enable AndriodX

Add this to your gradle. properties file:

org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true

How to implement code in dart file:

You need to implement it in your code respectively:

Setup Options

We will be to login/sign up for an account in Stripe and change to Test mode. We will be furnished with a secret key and a publishable key. Our Flutter application is connected with the stripe account utilizing the publishable key, and the merchant Id gave by Stripe.

For this, we need to add the stripe_payment package to our project. Adhere to the directions on the installation page of the project.

Presently, we should set up the association in the initState() strategy for your widget or before starting the checkout process.

@override
initState() {
  super.initState();
  StripePayment.setOptions(
      StripeOptions(        
         publishableKey:"YOUR_PUBLISHABLE_KEY"
          merchantId: "YOUR_MERCHANT_ID"
          androidPayMode: 'test'
));
}

The above code connects the application with your Stripe account, and therefore, all payments made by this app will be received in your account, which you can keep track of in the Stripe dashboard.

Create Source -:

• createSourceWithParams.
• Make a Stripe account and project.
• Recover a publishable key from the Stripe dashboard and use them in the flutter application to incorporate the flutter application with the Stripe installment gateway.

RaisedButton(
  child: Text("Create Source"),
  onPressed: () {
    StripePayment.createSourceWithParams(SourceParams(
      type: 'ideal',
      amount: 2102,
      currency: 'eur',
      returnURL: 'example://stripe-redirect',
    )).then((source) {
      _scaffoldKey.currentState.showSnackBar(SnackBar(content: Text('Received ${source.sourceId}')));
      setState(() {
        _source = source;
      });
    }).catchError(setError);
  },
),

When you press the RaisedButton, then navigate to the stripe test payment page in your browser for payment authorization, and they will show your Payment Source object as well.

CreateToken With Card Form -:

In this method, you will be save your card details for your payments.

RaisedButton(
  child: Text("Create Token with Card Form"),
  onPressed: () {
    StripePayment.paymentRequestWithCardForm(CardFormPaymentRequest()).then((paymentMethod) {
      _scaffoldKey.currentState.showSnackBar(SnackBar(content: Text('Received ${paymentMethod.id}')));
      setState(() {
        _paymentMethod = paymentMethod;
      });
    }).catchError(setError);
  },
),

when you press the Raised Button, then show a card pop up to save your card details. When you save your card, you then received your payment id and showed your current payment method.

CreateToken With Card -:

We will make a test card for demo purpose

final CreditCard testCard = CreditCard(
  number: '4111111111111111',
  expMonth: 08,
  expYear: 22,
);

when you press Raised Button, then they will show a test card detail with the card Id, country code, and received token id.

RaisedButton(
  child: Text("Create Token with Card"),
  onPressed: () {
    StripePayment.createTokenWithCard(
      testCard,
    ).then((token) {
      _scaffoldKey.currentState.showSnackBar(SnackBar(content: Text('Received ${token.tokenId}')));
      setState(() {
        _paymentToken = token;
      });
    }).catchError(setError);
  },
),

Confirm payment Intent -:

In this payment, you will add your secret key from stripe account.

RaisedButton(
  child: Text("Confirm Payment Intent"),
  onPressed: _paymentMethod == null || _currentSecret == null
      ? null
      : () {
    StripePayment.confirmPaymentIntent(
      PaymentIntent(
        clientSecret: _currentSecret,
        paymentMethodId: _paymentMethod.id,
      ),
    ).then((paymentIntent) {
      _scaffoldKey.currentState
          .showSnackBar(SnackBar(content: Text('Received ${paymentIntent.paymentIntentId}')));
      setState(() {
        _paymentIntent = paymentIntent;
      });
    }).catchError(setError);
  },
),

Native Payment -:

Add merchant id for native payments, and this is for Andriod pay and Apple pay both.

RaisedButton(
  child: Text("Native payment"),
  onPressed: () {
    if (Platform.isIOS) {
      _controller.jumpTo(450);
    }
    StripePayment.paymentRequestWithNativePay(
      androidPayOptions: AndroidPayPaymentRequest(
        totalPrice: "2.40",
        currencyCode: "EUR",
      ),
      applePayOptions: ApplePayPaymentOptions(
        countryCode: 'DE',
        currencyCode: 'EUR',
        items: [
          ApplePayItem(
            label: 'Test',
            amount: '27',
          )
        ],
      ),
    ).then((token) {
      setState(() {
        _scaffoldKey.currentState.showSnackBar(SnackBar(content: Text('Received ${token.tokenId}')));
        _paymentToken = token;
      });
    }).catchError(setError);
  },
),

Code File :

https://gist.github.com/ShaiqAhmedkhan/6f43e03c0d4301ed68e9916f0cfb7251#file-payment-dart

Conclusion:

This article would serve as an Exploratory article for Stripe Payment in Flutter and its working using Flutter.

I hope this blog will provide you with sufficient information in Trying up Stripe Payment in Flutter in your flutter projects. This is a demo example that will integrate Stripe payment in a flutter. We will describe all basic points, and you will use in your flutter application for payment purpose, So please try it.

❤ ❤ Thanks for reading this article ❤❤

---

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

find the source code of the Flutter Stripe Payment Demo:

flutter-devs/Flutter-StripePaymnet-Demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com

---

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

---