10
Dec

Flutter Stripe Payment

0

 Flutter Stripe Payment:

In this tutorial, we are going to learn a Stripe payment gateway integration with a flutter app. Stripe is a payment gateway used to make payments online. Stripe has lots of useful features such as recurring payments, escrow accounts, and real-time credit card number validation using Luhn’s algorithm. Stripe also provides SCA compliant APIs and Payment Intents so it makes your work very simple. Stripe Collect chargeable tokens from users’ Card Input and Apple & Google Pay.

Flutter Stripe Payment supports the following features:

  • canMakeNativePayPayments()
  • deviceSupportsNativePay()
  • potentiallyAvailableNativePayNetworks()
  • completeNativePayRequest()
  • cancelNativePayRequest()

Card Form:

  • paymentRequestWithCardForm()

Card Params Object:

  • createTokenWithCard()

Bank Account Params Object:

  • createTokenWithBankAccount()

Create Source Object With Params:

  • createSourceWithParams()

Using Stripe Payment credentials in Flutter App:

  • Create a Stripe account and project
  • Retrieve a publishable key from the Stripe dashboard and use them in flutter app to integrate flutter app with Stripe payment gateway.

Requirements to create Flutter Stripe payment gateway integration:

  • Requires AndroidX

Include support in android/gradle.properties

 

android.useAndroidX=true
android.enableJetifier=true

Follow the below steps to implement Flutter Stripe payment gateway integration:

Add the dependency package:

adding the dependency package to pubspec.yaml file. use the below code to add dependency package. After adding the dependency package run the get package method to import all the required files to the app. 

dependencies:
stripe_payment: ^1.0.6

Install the package:

You can install the package from the command line using the below code with Flutter as shown.

$ flutter pub get

Importing the Package:

After Adding the dependency package to the pubspec.yaml file , you can now import the package into the dart code by using the below code. without adding the dependency packge to the pubspec.yaml file if you import it will show package not found an error.

import 'package:stripe_payment/stripe_payment.dart';

Example code to use Stripe code in Flutter app as shown below:

RaisedButton(
child: Text("Create Source"),
onPressed: () {
StripePayment.createSourceWithParams(SourceParams(
type: 'ideal',
amount: 1099,
currency: 'eur',
returnURL: 'example://stripe-redirect',
)).then((source) {
_scaffoldKey.currentState.showSnackBar(SnackBar(content: Text('Received ${source.sourceId}')));
setState(() {
_source = source;
});
}).catchError(setError);
},
),
Divider(),
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);
},
),
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);
},
),
Divider(),
RaisedButton(
child: Text("Create Payment Method with Card"),
onPressed: () {
StripePayment.createPaymentMethod(
PaymentMethodRequest(
card: testCard,
),
).then((paymentMethod) {
_scaffoldKey.currentState.showSnackBar(SnackBar(content: Text('Received ${paymentMethod.id}')));
setState(() {
_paymentMethod = paymentMethod;
});
}).catchError(setError);
},
),
RaisedButton(
child: Text("Create Payment Method with existing token"),
onPressed: _paymentToken == null
? null
: () {
StripePayment.createPaymentMethod(
PaymentMethodRequest(
card: CreditCard(
token: _paymentToken.tokenId,
),
),
).then((paymentMethod) {
_scaffoldKey.currentState.showSnackBar(SnackBar(content: Text('Received ${paymentMethod.id}')));
setState(() {
_paymentMethod = paymentMethod;
});
}).catchError(setError);
},
),
Divider(),
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);
},
),
RaisedButton(
child: Text("Authenticate Payment Intent"),
onPressed: _currentSecret == null
? null
: () {
StripePayment.authenticatePaymentIntent(clientSecret: _currentSecret).then((paymentIntent) {
_scaffoldKey.currentState
.showSnackBar(SnackBar(content: Text('Received ${paymentIntent.paymentIntentId}')));
setState(() {
_paymentIntent = paymentIntent;
});
}).catchError(setError);
},
),
Divider(),
RaisedButton(
child: Text("Native payment"),
onPressed: () {
StripePayment.paymentRequestWithNativePay(
androidPayOptions: AndroidPayPaymentRequest(
total_price: "1.20",
currency_code: "EUR",
),
applePayOptions: ApplePayPaymentOptions(
countryCode: 'DE',
currencyCode: 'EUR',
items: [
ApplePayItem(
label: 'Test',
amount: '13',
)
],
),
).then((token) {
setState(() {
_scaffoldKey.currentState.showSnackBar(SnackBar(content: Text('Received ${token.tokenId}')));
_paymentToken = token;
});
}).catchError(setError);
},
),
RaisedButton(
child: Text("Complete Native Payment"),
onPressed: () {
StripePayment.completeNativePayRequest().then((_) {
_scaffoldKey.currentState.showSnackBar(SnackBar(content: Text('Completed successfully')));
}).catchError(setError);
},
),

Complete example code for Flutter Stripe Payment gateway Integration with flutter app:

main.dart

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:stripe_payment/stripe_payment.dart';
import 'dart:io';

void main() {
runApp(new MyApp());
}

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State {
Token _paymentToken;
PaymentMethod _paymentMethod;
String _error;
final String _currentSecret = null; //set this yourself, e.g using curl
PaymentIntentResult _paymentIntent;
Source _source;

ScrollController _controller = ScrollController();

final CreditCard testCard = CreditCard(
number: '4000002760003184',
expMonth: 12,
expYear: 21,
);

GlobalKey _scaffoldKey = GlobalKey();

@override
initState() {
super.initState();

StripePayment.setOptions(
StripeOptions(publishableKey: "pk_test_aSaULNS8cJU6Tvo20VAXy6rp", merchantId: "Test", androidPayMode: 'test'));
}

void setError(dynamic error) {
_scaffoldKey.currentState.showSnackBar(SnackBar(content: Text(error.toString())));
setState(() {
_error = error.toString();
});
}

@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
key: _scaffoldKey,
appBar: new AppBar(
title: new Text('Plugin example app'),
actions: [
IconButton(
icon: Icon(Icons.clear),
onPressed: () {
setState(() {
_source = null;
_paymentIntent = null;
_paymentMethod = null;
_paymentToken = null;
});
},
)
],
),
body: ListView(
controller: _controller,
padding: const EdgeInsets.all(20),
children: [
RaisedButton(
child: Text("Create Source"),
onPressed: () {
StripePayment.createSourceWithParams(SourceParams(
type: 'ideal',
amount: 1099,
currency: 'eur',
returnURL: 'example://stripe-redirect',
)).then((source) {
_scaffoldKey.currentState.showSnackBar(SnackBar(content: Text('Received ${source.sourceId}')));
setState(() {
_source = source;
});
}).catchError(setError);
},
),
Divider(),
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);
},
),
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);
},
),
Divider(),
RaisedButton(
child: Text("Create Payment Method with Card"),
onPressed: () {
StripePayment.createPaymentMethod(
PaymentMethodRequest(
card: testCard,
),
).then((paymentMethod) {
_scaffoldKey.currentState.showSnackBar(SnackBar(content: Text('Received ${paymentMethod.id}')));
setState(() {
_paymentMethod = paymentMethod;
});
}).catchError(setError);
},
),
RaisedButton(
child: Text("Create Payment Method with existing token"),
onPressed: _paymentToken == null
? null
: () {
StripePayment.createPaymentMethod(
PaymentMethodRequest(
card: CreditCard(
token: _paymentToken.tokenId,
),
),
).then((paymentMethod) {
_scaffoldKey.currentState.showSnackBar(SnackBar(content: Text('Received ${paymentMethod.id}')));
setState(() {
_paymentMethod = paymentMethod;
});
}).catchError(setError);
},
),
Divider(),
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);
},
),
RaisedButton(
child: Text("Authenticate Payment Intent"),
onPressed: _currentSecret == null
? null
: () {
StripePayment.authenticatePaymentIntent(clientSecret: _currentSecret).then((paymentIntent) {
_scaffoldKey.currentState
.showSnackBar(SnackBar(content: Text('Received ${paymentIntent.paymentIntentId}')));
setState(() {
_paymentIntent = paymentIntent;
});
}).catchError(setError);
},
),
Divider(),
RaisedButton(
child: Text("Native payment"),
onPressed: () {
if (Platform.isIOS) {
_controller.jumpTo(450);
}
StripePayment.paymentRequestWithNativePay(
androidPayOptions: AndroidPayPaymentRequest(
total_price: "1.20",
currency_code: "EUR",
),
applePayOptions: ApplePayPaymentOptions(
countryCode: 'DE',
currencyCode: 'EUR',
items: [
ApplePayItem(
label: 'Test',
amount: '13',
)
],
),
).then((token) {
setState(() {
_scaffoldKey.currentState.showSnackBar(SnackBar(content: Text('Received ${token.tokenId}')));
_paymentToken = token;
});
}).catchError(setError);
},
),
RaisedButton(
child: Text("Complete Native Payment"),
onPressed: () {
StripePayment.completeNativePayRequest().then((_) {
_scaffoldKey.currentState.showSnackBar(SnackBar(content: Text('Completed successfully')));
}).catchError(setError);
},
),
Divider(),
Text('Current source:'),
Text(
JsonEncoder.withIndent(' ').convert(_source?.toJson() ?? {}),
style: TextStyle(fontFamily: "Monospace"),
),
Divider(),
Text('Current token:'),
Text(
JsonEncoder.withIndent(' ').convert(_paymentToken?.toJson() ?? {}),
style: TextStyle(fontFamily: "Monospace"),
),
Divider(),
Text('Current payment method:'),
Text(
JsonEncoder.withIndent(' ').convert(_paymentMethod?.toJson() ?? {}),
style: TextStyle(fontFamily: "Monospace"),
),
Divider(),
Text('Current payment intent:'),
Text(
JsonEncoder.withIndent(' ').convert(_paymentIntent?.toJson() ?? {}),
style: TextStyle(fontFamily: "Monospace"),
),
Divider(),
Text('Current error: $_error'),
],
),
),
);
}
}

Congratulations You Have Learned Flutter Stripe Payment gateway integration….!!!

If It Is Helpful Share It With Your Friends….!!!

Leave a Reply

Categories