Stripe Payment Getway In Flutter :
Why use online payment gateway?
Your work is fast and time saved in fast life. Whether you want to build a booking, purchase products, use alternative currencies, manage expenditures, earn rewards, event, or even an e-commerce app to process transactions you will need a payment gateway.
In this tutorial, we will explore how to integrate stripe payment gateway in flutter.
More detail read this link https://pub.flutter-io.cn/packages/stripe_payment.
Stripe payment gateway step
Step 1: Open this link https://stripe.com/en-in.
Step 2: Select the mode (Test or Live) for which you need to create the API key.
Step 3: Explore to Dashboard →API Keys → Generate Key to create a key for the chose mode.
Flutter step:
Step 1: Add dependencies in .yaml file stripe_payment
Step 2: Change minimum version in android .gradle file: minSdkVersion: 19
Step 3: Add multidex in android .gradle file
multiDexEnabled true
implementation ‘com.android.support:multidex:1.0.3’
Step 4: set public key and secret key in flutter. That file name is payment-service.dart
Stipe payment provider different payment method
- New card
- Existing card
- Native payment
- Etc.
Stripe Payment Getway In Flutter
Lib>Pages
existing-cards.dart
import 'package:flutter/material.dart';
import 'package:flutter_credit_card/credit_card_widget.dart';
import 'package:flutter_stripe_payments/services/payment-service.dart';
import 'package:stripe_payment/stripe_payment.dart';
import 'package:progress_dialog/progress_dialog.dart';
class ExistingCardsPage extends StatefulWidget {
ExistingCardsPage({Key key}) : super(key: key);
@override
ExistingCardsPageState createState() => ExistingCardsPageState();
}
class ExistingCardsPageState extends State<ExistingCardsPage> {
List cards = [
{
'cardNumber': '4242424242424242',
'expiryDate': '04/24',
'cardHolderName': 'Muhammad Ahsan Ayaz',
'cvvCode': '424',
'showBackView': false
},
{
'cardNumber': '5555555566554444',
'expiryDate': '04/23',
'cardHolderName': 'Tracer',
'cvvCode': '123',
'showBackView': false
}
];
payViaExistingCard(BuildContext context, card) async {
ProgressDialog dialog = new ProgressDialog(context);
dialog.style(message: 'Please wait...');
await dialog.show();
var expiryArr = card['expiryDate'].split('/');
CreditCard stripeCard = CreditCard(
number: card['cardNumber'],
expMonth: int.parse(expiryArr[0]),
expYear: int.parse(expiryArr[1]),
);
var response = await StripeService.payViaExistingCard(
amount: '2500', currency: 'USD', card: stripeCard);
await dialog.hide();
Scaffold.of(context)
.showSnackBar(SnackBar(
content: Text(response.message),
duration: new Duration(milliseconds: 1200),
))
.closed
.then((_) {
Navigator.pop(context);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Choose existing card')),
body: Container(
padding: EdgeInsets.all(20),
child: ListView.builder(
itemCount: cards.length,
itemBuilder: (BuildContext context, int index) {
var card = cards[index];
return InkWell(
onTap: () {
payViaExistingCard(context, card);
},
child: CreditCardWidget(
cardNumber: card['cardNumber'],
expiryDate: card['expiryDate'],
cardHolderName: card['cardHolderName'],
cvvCode: card['cvvCode'],
showBackView: false));
})));
}
}
home.dart
import 'package:flutter/material.dart';
import 'package:flutter_stripe_payments/services/payment-service.dart';
import 'package:progress_dialog/progress_dialog.dart';
class HomePage extends StatefulWidget {
HomePage({Key key}) : super(key: key);
@override
HomePageState createState() => HomePageState();
}
class HomePageState extends State<HomePage> {
onItemPress(BuildContext context, int index) async {
switch (index) {
case 0:
payViaNewCard(context);
break;
case 1:
Navigator.pushNamed(context, '/existing-cards');
break;
}
}
payViaNewCard(BuildContext context) async {
ProgressDialog dialog = new ProgressDialog(context);
dialog.style(message: 'Please wait...');
await dialog.show();
var response =
await StripeService.payWithNewCard(amount: '15000', currency: 'USD');
await dialog.hide();
Scaffold.of(context).showSnackBar(SnackBar(
content: Text(response.message),
duration: new Duration(
milliseconds: response.success == true ? 1200 : 3000)));
}
@override
void initState() {
super.initState();
StripeService.init();
}
@override
Widget build(BuildContext context) {
ThemeData theme = Theme.of(context);
return Scaffold(
appBar: AppBar(
title: Text('Home'),
),
body: Container(
padding: EdgeInsets.all(20),
child: ListView.separated(
itemBuilder: (context, index) {
Icon icon;
Text text;
switch (index) {
case 0:
icon = Icon(Icons.add_circle, color: theme.primaryColor);
text = Text('Pay via new card');
break;
case 1:
icon = Icon(Icons.credit_card, color: theme.primaryColor);
text = Text('Pay via existing card');
break;
}
return InkWell(
onTap: () {
onItemPress(context, index);
},
child: ListTile(title: text, leading: icon));
},
separatorBuilder: (context, index) =>
Divider(color: theme.primaryColor),
itemCount: 2)));
}
}
Lib>services
payment-service.dart
import 'dart:convert';
import 'package:flutter/services.dart';
import 'package:http/http.dart' as http;
import 'package:stripe_payment/stripe_payment.dart';
class StripeTransactionResponse {
String message;
bool success;
StripeTransactionResponse({this.message, this.success});
}
class StripeService {
static String apiBase = 'https://api.stripe.com/v1';
static String paymentApiUrl = '${StripeService.apiBase}/payment_intents';
static String secret = 'secret key';
static Map<String, String> headers = {
'Authorization': 'Bearer ${StripeService.secret}',
'Content-Type': 'application/x-www-form-urlencoded'
};
static init() {
StripePayment.setOptions(StripeOptions(
publishableKey: "publish key",
merchantId: "Test",
androidPayMode: 'test'));
}
static Future<StripeTransactionResponse> payViaExistingCard(
{String amount, String currency, CreditCard card}) async {
try {
var paymentMethod = await StripePayment.createPaymentMethod(
PaymentMethodRequest(card: card));
var paymentIntent =
await StripeService.createPaymentIntent(amount, currency);
var response = await StripePayment.confirmPaymentIntent(PaymentIntent(
clientSecret: paymentIntent['client_secret'],
paymentMethodId: paymentMethod.id));
if (response.status == 'succeeded') {
return new StripeTransactionResponse(
message: 'Transaction successful', success: true);
} else {
return new StripeTransactionResponse(
message: 'Transaction failed', success: false);
}
} on PlatformException catch (err) {
return StripeService.getPlatformExceptionErrorResult(err);
} catch (err) {
return new StripeTransactionResponse(
message: 'Transaction failed: ${err.toString()}', success: false);
}
}
static Future<StripeTransactionResponse> payWithNewCard(
{String amount, String currency}) async {
try {
var paymentMethod = await StripePayment.paymentRequestWithCardForm(
CardFormPaymentRequest());
var paymentIntent =
await StripeService.createPaymentIntent(amount, currency);
var response = await StripePayment.confirmPaymentIntent(PaymentIntent(
clientSecret: paymentIntent['client_secret'],
paymentMethodId: paymentMethod.id));
if (response.status == 'succeeded') {
return new StripeTransactionResponse(
message: 'Transaction successful', success: true);
} else {
return new StripeTransactionResponse(
message: 'Transaction failed', success: false);
}
} on PlatformException catch (err) {
return StripeService.getPlatformExceptionErrorResult(err);
} catch (err) {
return new StripeTransactionResponse(
message: 'Transaction failed: ${err.toString()}', success: false);
}
}
static getPlatformExceptionErrorResult(err) {
String message = 'Something went wrong';
if (err.code == 'cancelled') {
message = 'Transaction cancelled';
}
return new StripeTransactionResponse(message: message, success: false);
}
static Future<Map<String, dynamic>> createPaymentIntent(
String amount, String currency) async {
try {
Map<String, dynamic> body = {
'amount': amount,
'currency': currency,
'payment_method_types[]': 'card'
};
var response = await http.post(StripeService.paymentApiUrl,
body: body, headers: StripeService.headers);
return jsonDecode(response.body);
} catch (err) {
print('err charging user: ${err.toString()}');
}
return null;
}
}
main.dart
import 'package:flutter/material.dart';
import 'package:flutter_stripe_payments/pages/existing-cards.dart';
import 'package:flutter_stripe_payments/pages/home.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'flutter stripe payment getway',
theme: ThemeData(
primarySwatch: Colors.deepOrange,
),
initialRoute: '/home',
routes: {
'/home': (context) => HomePage(),
'/existing-cards': (context) => ExistingCardsPage()
});
}
}
pubspec.yaml
name: flutter_stripe_payments
description: A new Flutter project.
version: 1.0.0+1
environment:
sdk: ">=2.1.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
flutter_credit_card:
stripe_payment:
http:
progress_dialog:
cupertino_icons:
dev_dependencies:
flutter_test:
sdk: flutter
flutter:
uses-material-design: true
this is the best and simple way to develop stripe payment getway in flutter
The flutter tutorial is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application
For more information about Flutter. visit www.fluttertutorial.in
