🔱Stripe Payments

Como usar os pagamentos via stripe na sua aplicação.

Integração do Stripe na aplicação Flutter

Este guia fornece instruções passo a passo sobre como integrar o Stripe como forma de pagamento em sua aplicação Flutter. Há duas abordagens distintas descritas aqui: uma utilizando apenas a biblioteca flutter_stripe e outra utilizando um link de pagamento junto com webview_flutter.

Integração do Stripe utilizando a biblioteca flutter_stripe

Pré-requisitos

Certifique-se de ter as seguintes dependências instaladas em sua aplicação Flutter:

• flutter_stripe: Uma biblioteca Flutter para integração com o Stripe. Para adicioná-la ao seu projeto, inclua flutter_stripe como uma dependência em seu arquivo pubspec.yaml e execute o comando flutter pub get para baixá-la.

Passo 1: Configuração

1. Importe a biblioteca flutter_stripe em seu arquivo Dart:

   import 'package:flutter_stripe/flutter_stripe.dart';

2. No início do seu aplicativo, antes de chamar runApp(), inicialize o Stripe fornecendo sua chave de API:

   void main() {
     Stripe.publishableKey = 'SUA_CHAVE_DE_API';
     runApp(MyApp());
   }

Passo 2: Obtenção dos dados de pagamento do backend

1. No backend da sua aplicação, certifique-se de estar implementada a lógica para obter os dados necessários para a integração com o Stripe, como customerId, paymentIntentClientSecret e customerEphemeralKey.

Passo 3: Processamento do pagamento

1. Na sua store, obtenha os dados de pagamento do backend:

   @action
   Future makePayment({required int planId, required BuildContext context}) async {
     try {
       paymentLoading = true;
   
       var paymentIntentData = await await  GetIt.I.get<IGetPaymentIntentUsecase>()();
   
       await Stripe.instance.initPaymentSheet(
         paymentSheetParameters: SetupPaymentSheetParameters(
           // ...
           customerId: paymentIntentData.customerId,
           paymentIntentClientSecret: paymentIntentData.paymentIntentClientSecret,
           customerEphemeralKeySecret: paymentIntentData.customerEphemeralKey,
           // ...
         ),
       );
   
       return await displayCardPaymentSheet(context: context);
     } catch (e, s) {
       printException("makePayment.PaymentStore", e, s);
       return false;
     } finally {
       paymentLoading = false;
     }
   }

Passo 4: Exibição do formulário de pagamento

1. Na função displayCardPaymentSheet(), você pode usar o método Stripe.instance.presentPaymentSheet() para exibir o formulário de pagamento do Stripe:

   @action
   Future displayCardPaymentSheet({required BuildContext context}) async {
     try {
       await Stripe.instance.presentPaymentSheet();
     } on Exception catch (e) {
       if (e is StripeException) {
         print("Error from Stripe: ${e.error.localizedMessage}");
         print(e);
   
         customErrorHelper(context, e: e);
       } else {
         print("Unforeseen error: $e");
         customErrorHelper(context, e: e);
       }
   
       return false;
     } catch (e, s) {
       printException("displayCardPaymentSheet.PaymentStore", e, s);
       return false;
     }
   }

2. Certifique-se de tratar os erros adequadamente no caso de falha no processamento do pagamento.

Essa é a abordagem utilizando a biblioteca flutter_stripe para integrar o Stripe em sua aplicação Flutter. Lembre-se de seguir as práticas recomendadas do Stripe para garantir a segurança e a conformidade nas transações de pagamento.

Consulte a documentação do flutter_stripe para obter mais informações sobre suas funcionalidades e opções de personalização.

Integração do Stripe utilizando um link de pagamento e webview_flutter

Pré-requisitos

Certifique-se de ter as seguintes dependências instaladas em sua aplicação Flutter:

• webview_flutter: Uma biblioteca Flutter para exibir páginas web dentro do seu aplicativo. Para adicioná-la ao seu projeto, inclua webview_flutter como uma dependência em seu arquivo pubspec.yaml e execute o comando flutter pub get para baixá-la.

Passo 1: Obtenção do link de pagamento do backend

1. No backend da sua aplicação, certifique-se de estar implementada a lógica para obter o link de pagamento do Stripe.

Passo 2: Criação da view de pagamento

1. Crie um dialog box para exibir o link de pagamento em um WebView:

   class PaymentDialog extends StatefulWidget {
     const PaymentDialog({Key? key, required this.url}) : super(key: key);
   
     final String url;
   
     @override
     State<PaymentDialog> createState() => _PaymentDialogState();
   }
   
   class _PaymentDialogState extends State<PaymentDialog> {
     late WebViewController _controller;
     final  Set<Factory<OneSequenceGestureRecognizer>> gestureRecognizers = {Factory(() =>  EagerGestureRecognizer())};
   
     @override
     void initState() {
       super.initState();
       _controller = WebViewController();
       ..clearCache()
       ..runJavaScript(widget.url)
       ..setJavaScriptMode(JavaScriptMode.unrestricted)
       ..setNavigationDelegate(
           NavigationDelegate(
    	       onProgress: (int progress) {},
    	       onPageStarted: (String url) {},
    	       onPageFinished: (_) {},
    	       onWebResourceError: (WebResourceError error) {},
    	       onUrlChange: (change) {
    		       // Substitua as urls de sucesso e cancelamento de acordo com o que 
    		       // estiver configurado no backend
    		       switch (change.url) {
    			       case  "https://example.com/success":
    				       Navigator.pop(context, true);
    				       break;
    					case  "https://example.com/cancel":
    						Navigator.pop(context, false);
    						break;
    					default:
    				}
    			},
    		),
    	)
    	..loadRequest(Uri.parse(widget.url));
     }
   
     @override
     Widget build(BuildContext context) {
       return Container(
         height: MediaQuery.of(context).size.height * 0.85,
         decoration: BoxDecoration(
           color: CustomColors.white,
           borderRadius: const BorderRadius.only(
             topLeft: Radius.circular(24),
             topRight: Radius.circular(24),
           ),
         ),
         child: Padding(
           padding: const EdgeInsets.all(40),
           child: WebView(
             controller: _controller,
             gestureRecognizers: gestureRecognizers,
           ),
         ),
       );
     }
   }

2. Certifique-se de ajustar as URLs de sucesso e cancelamento conforme necessário.

Passo 3: Exibição da view de pagamento

1. Quando estiver pronto para exibir o formulário de pagamento, crie e exiba a dialog box de pagamento:

   void showPaymentDialog(String paymentUrl) {
     showDialog(
       context: context,
       builder: (context) => PaymentDialog(url: paymentUrl),
     ).then((result) {
       if (result != null) {
         // Lógica para lidar com o resultado do pagamento
       }
     });
   }

Essa é a abordagem utilizando um link de pagamento junto com webview_flutter para integrar o Stripe em sua aplicação Flutter. Certifique-se de ajustar o código para se adequar à sua implementação específica.