🔱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.

PreviousRevenuecat (In-App-Purchases)NextMonorepos

Last updated