Stripe Payment Implementation in Flutter

To implement Stripe payment in your Flutter app, you can use the flutter_stripe package. This package provides a Flutter plugin for the Stripe SDKs for iOS and Android, allowing you to easily integrate Stripe payments into your Flutter app.

👉First goto stripe.com and singup.

👉After signup, go to this settings icon.

👉In Product settings, got to Payment Methods.

👉And make sure your Cards and In Wallet:

• Apple pay and
• Google Pay should be enable.

👉Now, go to developers tab

👉In API key section, there are two apis

• Publishable key and
• Secret Key (don’t reveal)

👉Now Let’s Install the flutter_stripe dependency in Pubspec.yaml

We’ll start with the:

• Payment Intent

then we will

• Initialize Payment Sheet

and then we will

• Display Payment Sheet

👉First, In the main method make sure you initialized widgets binding and Initialize the Stripe object with your Stripe API key: Like this Below

👉Now, Have a look at the requirements

GitHub - flutter-stripe/flutter_stripe: Flutter SDK for Stripe.

1. Use Android 5.0 (API level 21) and above
2. Use Kotlin version 1.5.0 and above
3. Using an up-to-date Android gradle build tools version

4. Using a descendant of Theme.AppCompat for your activity

5. Using FlutterFragmentActivity instead of FlutterActivity in MainActivity.kt: example

👉Payment Intent

Create paymentIntent object in Stripe.

This function takes two parameters — amount and currency - which represent the amount and currency of the payment to be made. It then creates a Map<String, dynamic> object called body, which contains the amount and currency values.

A POST request to the Stripe API’s endpoint using the http package. The request includes the Authorization header, which contains the secret key for your Stripe account, and the Content-Type header, which specifies the format of the request body.

If the request is successful, the response body is returned as a Map<String, dynamic> object. This object contains information about the newly created PaymentIntent, such as its id, status, and client_secret. The client_secret is a unique identifier that is used to confirm the payment on the client-side.

If there is an error during the request, an exception is thrown with a message that describes the error.

👉Initialize Payment Sheet

The makePayment() function is an async function that sets up and initiates the Stripe payment process. Here's what it does:

1. Calls the createPaymentIntent() function with an amount of 10000 and a currency of GBP. This function creates a new PaymentIntent object in Stripe and returns the PaymentIntent's client_secret as a string.
2. Initializes the Stripe payment sheet using the initPaymentSheet() method from the Stripe package. This method takes in a paymentSheetParameters object that contains the PaymentIntent's client_secret and other parameters such as the style and merchant display name. The await keyword is used to wait for this operation to complete before proceeding to the next step.
3. Displays the payment sheet using the displayPaymentSheet() method from the Stripe package.

👉Sets up and initiates a Stripe payment.

👉Display Payment Sheet

Displays the payment sheet to the user using the Stripe.instance.presentPaymentSheet() method from the Stripe package.

The displayPaymentSheet() function is an async function that uses a try-catch block to handle errors that may occur when displaying the payment sheet. Here's what it does:

1. Calls the presentPaymentSheet() method from the Stripe package, which displays the payment sheet to the user. The await keyword is used to wait for this operation to complete before proceeding to the next step.
2. If the payment is successful, a message is printed to the console indicating that the payment was successful.
3. If there is an error during the payment process, the error message is printed to the console.

👉GOOGLE PAY

Initializes a Google Pay object using the PaymentSheetGooglePay class from the Stripe package.

The PaymentSheetGooglePay class is a convenience class provided by Stripe to simplify the process of accepting Google Pay payments. It takes in several parameters to configure the Google Pay payment experience.

In this code, a new PaymentSheetGooglePay object is created and assigned to the variable gpay. The constructor for PaymentSheetGooglePay takes in the following parameters:

• merchantCountryCode: The two-letter ISO country code of the country where the merchant is located. In this case, it is set to "GB" for Great Britain.
• currencyCode: The three-letter ISO currency code for the currency used by the merchant. In this case, it is set to "GBP" for British Pounds.
• testEnv: A boolean value that indicates whether to use the test environment or production environment for Google Pay payments. In this case, it is set to true to use the test environment.

var gpay = PaymentSheetGooglePay(merchantCountryCode: "GB",
          currencyCode: "GBP",
          testEnv: true);

👉Add googlepay: gpay in the makePayment Method.

//STEP 2: Initialize Payment Sheet
      await Stripe.instance
          .initPaymentSheet(
          paymentSheetParameters: SetupPaymentSheetParameters(
              paymentIntentClientSecret: paymentIntent![
              'client_secret'], //Gotten from payment intent
              style: ThemeMode.light,
              merchantDisplayName: 'Abhi',
              googlePay: gpay))//ADD THIS LINE
          .then((value) {})

👉Make sure to add this line

dependencies {
  implementation 'com.google.android.gms:play-services-wallet:19.1.0'
}

👉and this line also

<meta-data
  android:name="com.google.android.gms.wallet.api.enabled"
  android:value="true" />

👉Gpay Test Card:

go to this Link

👉click on test card suit group

👉Join this group.

Now close this window, after hot restart you can see your name will be appear in the stripe Gpay sheet right above the pay button.

I hope this article was helpful to you. Thank you for taking the time to read it. Your feedback and suggestions are always welcome.

Support Me:

• Instagram
• Facebook
• GitHub
• Twitter
• Youtube