Integração do Flutter Stripe Super Fácil
Flutter é uma estrutura de desenvolvimento de aplicativos móveis de código aberto que permite aos desenvolvedores criar aplicativos móveis de alto desempenho e visualmente impressionantes para plataformas Android e iOS. O Stripe, por outro lado, é uma plataforma de processamento de pagamentos online que ajuda as empresas a aceitar pagamentos online com segurança e facilidade.
Neste artigo, veremos o processo de integração do Stripe ao Flutter.
Pré-requisitos
Antes de mergulharmos no processo de integração, existem alguns pré-requisitos que você precisa cumprir:
- Um ambiente de desenvolvimento Flutter configurado em seu sistema
- Uma conta
Stripecom chaves de API - Conhecimento básico da linguagem de programação Flutter e Dart
Etapa 1: adicionar dependências
A primeira etapa é adicionar os pacotes Stripe e http como dependências em seu aplicativo Flutter. Você pode fazer isso adicionando as seguintes linhas no arquivo pubspec.yaml:
dependencies: flutter_stripe: ^9.2.2 http: ^0.13.6
Após adicionar as dependências, execute o comando “flutter pub get” para baixá-las e instalá-las.
Etapa 2: configurar chaves de API Stripe
Para configurar as chaves de API do Stripe, navegue até o painel do Stripe e localize a seção de chaves de API. Você precisará das chaves pública e secreta para a integração. Copie as chaves e salve-as em algum lugar seguro, pois você precisará delas posteriormente no processo de integração.
Se você não tem uma conta stripe, não se preocupe, é grátis, você pode se inscrever facilmente.
OU estou compartilhando com você as chaves de API de teste que você pode usar para praticar. Se você estiver integrando o stripe para o seu cliente, ele fornecerá as chaves publicáveis e secretas para esse processo.
Stripe Test Credentials:
Publishable Key: pk_test_TYooMQauvdEDq54NiTphI7jx
Secret Key: sk_test_4eC39HqLyjWDarjtT1zdp7dc
Etapa 3: definir a chave publicável
Primeiro, você deve definir a chave publicável usada para identificar a conta na plataforma Stripe. Você pode configurá-lo em seu arquivo main.dart passando uma chave publicável para ele conforme fornecido abaixo.
void main() async {
WidgetsFlutterBinding.ensureInitialized();
Stripe.publishableKey = 'pk_test_TYooMQauvdEDq54NiTphI7jx';
await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
runApp(MyAppView());
}
Etapa 4: Faça um Pagamento Stripe
Deixe-me explicar o código por partes 😃 Primeiro, crie uma variável com o tipo de dados Map como esta fora da função em qualquer lugar;
Map<String, dynamic>? paymentIntent;
paymentIntent = await createPaymentIntent(double.parse(amount).toInt().toString(), 'AED');
Neste, o que estou fazendo é apenas criar uma intenção de pagamento chamando o método createPaymentIntent, que recebe dois parâmetros posicionais, um é o valor que você deseja verificar e o segundo é a moeda. Este createPaymentIntent não é uma função interna que estou criando abaixo como;
Esta é a solicitação de postagem que leva o cabeçalho com sua chave secreta e o corpo como Mapa com seu valor e moeda. Se você ver no corpo, estamos calculando o valor chamando a função,
calculateAmount(String amount) {
final calculatedAmount = (int.parse(amount)) * 100;
return calculatedAmount.toString();
}Estamos fazendo isso porque o stripe aceita pagamento em centavos.
Após a decodificação você terá uma resposta que retornará ao Intent de pagamento onde foi chamado. Agora vamos criar uma instância stripe para processamento posterior como;
await Stripe.instance
.initPaymentSheet(
paymentSheetParameters: SetupPaymentSheetParameters(
paymentIntentClientSecret: paymentIntent!['client_secret'],
// applePay: const PaymentSheetApplePay(merchantCountryCode: '+92',),
// googlePay: const PaymentSheetGooglePay(testEnv: true, currencyCode: "US", merchantCountryCode: "+92"),
merchantDisplayName: 'Customer Name',
),
)
.then((value) {});Este pedaço de código está apenas criando uma instância stripe, passando a intenção de pagamento que você acabou de criar.
Portanto, a função completa ficará assim;
Future<void> makePayment(BuildContext context, String amount) async {
try {
paymentIntent = await createPaymentIntent(double.parse(amount).toInt().toString(), 'AED');
//Payment Sheet
await Stripe.instance
.initPaymentSheet(
paymentSheetParameters: SetupPaymentSheetParameters(
paymentIntentClientSecret: paymentIntent!['client_secret'],
// applePay: const PaymentSheetApplePay(merchantCountryCode: '+92',),
// googlePay: const PaymentSheetGooglePay(testEnv: true, currencyCode: "US", merchantCountryCode: "+92"),
merchantDisplayName: 'Mouaz User',
),
)
.then((value) {});
///now finally display payment sheeet
displayPaymentSheet(context, amount);
} catch (e, s) {
log('exception:$e$s');
}
}Em seguida, chama o displayPaymentSheet(contexto, valor); que apresentará o processo de pagamento stripe e mostrará sucesso se o pagamento for concluído.
displayPaymentSheet(BuildContext context, String amount) async {
try {
await Stripe.instance.presentPaymentSheet().then((value) async {
showCustomSnackBar(title: 'Success', message: 'Payment Successful');
paymentIntent = null;
}).onError((error, stackTrace) {
log('Error is:--->$error $stackTrace');
});
} on StripeException catch (e) {
log('Error is:---> $e');
} catch (e) {
log('$e');
}
}Etapa 5: Forma de pagamento por chamada
Agora você só precisa projetar qualquer botão e, ao pressionar, basta chamar a função como;
makePayment(context, '125');
Estrondo! 🤩 Você integrou com sucesso o stripe em seu aplicativo flutter. Você pode ver como é fácil.
Estou compartilhando com você o arquivo com todas as funções escritas nele para que você possa entendê-lo facilmente. Se tiver alguma dificuldade pode entrar em contato.
// Please import all the necessary librarues and functions
class StripeController {
String publishableKey = 'pk_test_TYooMQauvdEDq54NiTphI7jx';
String secretKey = 'sk_test_4eC39HqLyjWDarjtT1zdp7dc';
Map<String, dynamic>? paymentIntent;
Future<void> makePayment(BuildContext context, String amount) async {
try {
paymentIntent = await createPaymentIntent(double.parse(amount).toInt().toString(), 'AED');
//Payment Sheet
await Stripe.instance
.initPaymentSheet(
paymentSheetParameters: SetupPaymentSheetParameters(
paymentIntentClientSecret: paymentIntent!['client_secret'],
// applePay: const PaymentSheetApplePay(merchantCountryCode: '+92',),
// googlePay: const PaymentSheetGooglePay(testEnv: true, currencyCode: "US", merchantCountryCode: "+92"),
merchantDisplayName: 'Mouaz User',
),
)
.then((value) {});
///now finally display payment sheeet
displayPaymentSheet(context, amount);
} catch (e, s) {
log('exception:$e$s');
}
}
// Future<Map<String, dynamic>>
createPaymentIntent(String amount, String currency) async {
try {
Map<String, dynamic> body = {'amount': calculateAmount(amount), 'currency': currency, 'payment_method_types[]': 'card'};
var response = await http.post(
Uri.parse('https://api.stripe.com/v1/payment_intents'),
headers: {'Authorization': 'Bearer $secretKey', 'Content-Type': 'application/x-www-form-urlencoded'},
body: body,
);
// ignore: avoid_print
print('Payment Intent Body->>> ${response.body.toString()}');
return jsonDecode(response.body);
} catch (err) {
// ignore: avoid_print
print('err charging user: ${err.toString()}');
}
}
calculateAmount(String amount) {
final calculatedAmount = (int.parse(amount)) * 100;
return calculatedAmount.toString();
}
displayPaymentSheet(BuildContext context, String amount) async {
try {
await Stripe.instance.presentPaymentSheet().then((value) async {
showCustomSnackBar(title: 'Success', message: 'Payment Successful');
await orderController.createOrder(amount);
paymentIntent = null;
}).onError((error, stackTrace) {
log('Error is:--->$error $stackTrace');
});
} on StripeException catch (e) {
log('Error is:---> $e');
showDialog(context: context, builder: (_) => const AlertDialog(content: Text("Cancelled ")));
} catch (e) {
log('$e');
}
}
}
Obrigado!
Bom aprendizado ☺️
Não deixe de conhecer meus Ebooks de Flutter/Dart
