Explorando o Stripe Flutter SDK

O Stripe é um processador de pagamento popular que torna mais fácil para os desenvolvedores integrar métodos de pagamento em aplicativos móveis. Com um forte foco em UX e segurança, Stripe sacudiu a indústria de e-commerce com sua popularidade entre compradores e desenvolvedores.

Pouco depois de Stripe lançar um SDK para React Native , o Stripe Flutter SDK foi introduzido, com base na funcionalidade do Stripe API . Neste tutorial, vamos explorar o Stripe Flutter SDK instalando-o e integrando-o em um aplicativo de exemplo.

Para acompanhar este tutorial, você precisará:

Flutter instalado em sua máquina Conhecimento básico de Flutter Familiaridade com Dart Xcode ou Android Studio instalado em sua máquina iOS Simulator ou um emulador Android para testar um editor de código, isto é, código VS

Vamos começar!

O Stripe Flutter SDK

Vamos dar uma olhada em alguns dos recursos do Stripe que iremos integrar em nosso aplicativo Flutter usando o Stripe Flutter SDK.

Opções de pagamento

O Stripe ganhou notoriedade pela primeira vez por simplificar as transações internacionais em aplicativos ao oferecer suporte a várias moedas. Atualmente, o Stripe oferece suporte a muitos tipos de pagamentos eletrônicos.

Por exemplo, você pode integrar facilmente carteiras como Apple Pay e Google Pay em seu aplicativo Flutter. Da mesma forma, o Stripe oferece suporte aos cartões de crédito e débito mais populares, bem como métodos de compra agora, pagamento posterior, como Klarna e Afterpay.

É simples transferir fundos entre contas bancárias usando métodos como redirecionamentos e vouchers. O Stripe oferece uma programação de pagamentos que facilita a adição de informações de sua própria conta bancária e o recebimento de pagamentos feitos por meio de seu aplicativo móvel.

IU integrada

O Stripe fornece uma IU nativa para aceitar pagamentos com segurança em aplicativos Android e iOS. Da mesma forma, o SDK é fornecido com uma IU predefinida para aceitar pagamentos no Google Pay e Apple Pay. No entanto, você pode criar facilmente seu próprio formulário de pagamento personalizado no Stripe, se desejar.

Com o portal de pagamento integrado do Stripe, você pode configurar compras únicas ou assinaturas de preço fixo.

Segurança

Stripe mantém seu foco na segurança, enviando informações de pagamento confidenciais para seu próprio servidor em vez do servidor de back-end do host, simplificando a coleta de dados e mantendo a conformidade com a segurança de informações de cartão de pagamento (PCI) padrões.

Além disso, Stripe executa autenticação 3D Secure para cumprir com a Strong Customer Authentication , protegendo as informações mais importantes de seus usuários.

Primeiros passos com Stripe

Se você não tem uma conta Stripe, primeiro crie uma nova . Você precisará obter sua chave de acesso pessoal em sua conta. Vá para a seção Desenvolvedor e olhe em Chaves de API , conforme visto na captura de tela abaixo:

Criação de um aplicativo Flutter Stripe

Com as chaves de acesso pessoais no lugar, vamos configurar um novo projeto Flutter e instalar o pacote Stripe Flutter SDK.

Navegue até seu diretório de trabalho e adicione o código abaixo para inicializar um novo projeto Flutter:

flutter create stripe_app

Quando a inicialização for concluída, abra o emulador do Android ou o simulador do iOS. Navegue até a pasta stripe_app e execute o aplicativo com o comando abaixo:

cd stripe_app && flutter run

Seu aplicativo deve ser semelhante à captura de tela abaixo:

Em seguida, vamos instale o Stripe Flutter SDK e comece a construir nosso projeto. Navegue até seu diretório e copie e cole o código abaixo em seu terminal:

dart pub add flutter_stripe

Requisitos de instalação

Para evitar problemas de compatibilidade, você deve configurar seu projeto para corresponder ao necessário especificações abaixo.

Android

Para um sistema operacional Android, você precisará do seguinte:

Android v5.0 (API de nível 21) ou superior Kotlin v1.5.0 ou superior Um descendente de Theme.AppCompact para sua atividade FlutterFragmentActivity em MainActivity.kt em vez de FlutterActivity

iOS

O Stripe Flutter SDK é compatível com aplicativos direcionados ao iOS 11 e superior.

Para evitar erros de compilação, navegue até as configurações do iOS e encontre a chave publicável stripePublishableKey proj ou Runner.xcworkspastripe. Defina o destino de implantação do aplicativo como 12.0:

Construindo a tela de pagamento

Para se comunicar com a API Stripe de seu aplicativo Flutter, copie stripePublishableKey no painel do Stripe, navegue até a pasta lib e crie um novo arquivo chamado env. dardo e adicionar o código abaixo:

const stripePublishableKey=”your_publishable_key”;

As constantes stripePublishableKey contêm o valor da sua chave. A seguir, vamos configurar o pagamento com cartão para nosso aplicativo e adicionar botões para Apple Pay e Google Pay.

Adicionar pagamento com cartão

A opção de pagamento mais popular no Stripe é um cartão de crédito ou débito. Para construir uma entrada de cartão básica, navegue até a pasta lib e atualize o código principal. dardo com o código abaixo:

//main.dart import’package: flutter/material.dart’; import’package: flutter_stripe/flutter_stripe.dart’; import’package: stripe_app/.env.dart’; void main () async {WidgetsFlutterBinding.ensureInitialized ();//definir a chave publicável para Stripe-isso é obrigatório Stripe.publishableKey=stripePublishableKey; runApp (App ()); } class App extends StatelessWidget {const App ({Key key}): super (key: key); @override Widget build (BuildContext context) {return MaterialApp (debugShowCheckedModeBanner: false, title:”FLutter tripe”, theme: ThemeData (primaryColor: Colors.green,), home: PaymentScreen (),); }}//classe payment_screen.dart PaymentScreen extends StatelessWidget {@override Widget build (BuildContext context) {return Scaffold (appBar: AppBar (), body: Column (children: [CardField (onCardChanged: (card) {print (card); },), TextButton (onPressed: () async {//criar a forma de pagamento final paymentMethod=await Stripe.instance.createPaymentMethod (PaymentMethodParams.card ());}, child: Text (‘pay’),)],), ); }}

No bloco de código acima, importamos o Flutter Stripe SDK e o arquivo.env.dart. Em seguida, inicializamos o Stripe com o StripePublishableKey que criamos anteriormente. PaymentScreen retorna um andaime para o campo de entrada de pagamento e o botão.

Neste ponto, seu aplicativo deve ser semelhante à captura de tela abaixo:

Apple Pay plugin

O SDK é fornecido com suporte integrado para plug-ins pagos, incluindo Apple Pay e Google Pay. O trecho de código abaixo cria um botão Apple Pay:

//main.dart import’package: flutter/material.dart’; import’package: flutter_stripe/flutter_stripe.dart’; import’package: stripe_app/.env.dart’; void main () async {WidgetsFlutterBinding.ensureInitialized ();//definir a chave publicável para Stripe-isso é obrigatório Stripe.publishableKey=stripePublishableKey; runApp (App ()); } class App extends StatelessWidget {const App ({Key key}): super (key: key); @override Widget build (BuildContext context) {return MaterialApp (debugShowCheckedModeBanner: false, title:”FLutter tripe”, theme: ThemeData (primaryColor: Colors.green,), home: ApplePay (),); }} classe ApplePay estende StatefulWidget {@override _ApplePayState createState ()=> _ApplePayState (); } classe _ApplePayState estende State {@override void initState () {Stripe.instance.isApplePaySupported.addListener (atualização); super.initState (); } @override void dispose () {Stripe.instance.isApplePaySupported.removeListener (atualização); super.dispose (); } void update () {setState (() {}); } @override Widget build (BuildContext context) {return Scaffold (appBar: AppBar (), body: Column (children: [if (Stripe.instance.isApplePaySupported.value) Padding (padding: EdgeInsets.all (16), child: ApplePayButton (onPressed: _handlePayPress,),) else Padding (padding: EdgeInsets.symmetric (horizontal: 16), child: Text (‘Apple Pay não está disponível neste dispositivo’),),],),); }} Future _handlePayPress () async {try {} catch (e) {}}

A classe ApplePay retorna um andaime do botão e uma função _handlePayPress que é disparada cada vez que o botão é pressionado. Lembre-se de que o Stripe Flutter SDK é fornecido com APIs Dart que tratam de eventos e respostas. No entanto, você pode criar manipuladores de eventos personalizados como fizemos com o método _handlePayPress.

Agora, seu aplicativo deve se parecer com a seguinte captura de tela:

Plug-in Google Pay

Antes de criar o botão do Google Pay, vamos instalar o pacote flutter pay:

flutter pub add pay

Quando a instalação for concluída, substitua o código em main.dart pelo código abaixo para criar o botão do Google Pay:

//main.dart import’package: flutter/material.dart’; import’package: flutter_stripe/flutter_stripe.dart’; import’package: pay/pay.dart’; import’package: stripe_app/.env.dart’; import’package: pay/pay.dart’como pagamento; const _paymentItems=[pay.PaymentItem (label:’Total’, valor:’108,99′, status: pay.PaymentItemStatus.final_price,)]; void main () async {WidgetsFlutterBinding.ensureInitialized ();//definir a chave publicável para Stripe-isso é obrigatório Stripe.publishableKey=stripePublishableKey; runApp (App ()); } class App extends StatelessWidget {const App ({Key key}): super (key: key); @override Widget build (BuildContext context) {return MaterialApp (debugShowCheckedModeBanner: false, title:”FLutter tripe”, theme: ThemeData (primaryColor: Colors.green,), home: GooglePay (),); }} classe GooglePay estende StatefulWidget {@override _GooglePayState createState ()=> _GooglePayState (); } classe _GooglePayState extends State {@override void initState () {Stripe.instance.isApplePaySupported.addListener (update); super.initState (); } @override void dispose () {Stripe.instance.isApplePaySupported.removeListener (atualização); super.dispose (); } void update () {setState (() {}); } @override Widget build (BuildContext context) {return Scaffold (appBar: AppBar (), body: Column (children: [if (Stripe.instance.isApplePaySupported.value) Padding (padding: EdgeInsets.all (16), filho: GooglePayButton (paymentConfigurationAsset:’google_pay_payment_profile.json’, paymentItems: _paymentItems, style: GooglePayButtonStyle.black, type: GooglePayButtonType.pay, margin: const EdgeInsets.only (top: 16), onPaymentResult: onGooglePayResult (childProcessadorCirndcularIresultado: CirndcularIresultador: CirndcularIresultator: Cirndcular ),), onPressed: () async {}),) else Padding (padding: EdgeInsets.symmetric (horizontal: 16), child: Text (‘Apple Pay não está disponível neste dispositivo’),), ],),); }} Future onGooglePayResult (paymentResult) async {try {} catch (e) {}}

No código acima, importamos o pacote de pagamento que instalamos anteriormente, criamos uma constante _paymentItems para manter nossos detalhes de pagamento, em seguida, defina o valor de paymentItems no GoogleButton como _paymentItems.

Adicionar ativos ao seu aplicativo requer a criação de uma nova seção. Crie uma nova pasta chamada assets no diretório raiz do seu projeto e, em seguida, crie um novo arquivo chamado google_pay_payment_profile.json. Por fim, habilite ativos em pubspec.yaml. Observe que paymentConfigurationAsset é obrigatório:

Stripe consulta e operações de resposta

O Stripe Flutter SDK tem funções que são chamadas para consultas específicas e operações de resposta ao enviar e receber dados por meio da API Stripe.

fetchPaymentIntentClientSecret: retorna um segredo do cliente do back-end confirmApplePayPayment : confirma o pagamento da Apple confirmPaymentMethod: confirma o método de pagamento exigindo clientSecret e detalhes de pagamento

Conclusão

O Stripe Flutter SDK é um pacote fácil e seguro para integração e aceitação de pagamentos em seu aplicativo Flutter. Neste tutorial, exploramos os recursos e capacidades do Stripe, aprendendo o que o torna uma escolha popular para desenvolvedores. Cobrimos as etapas necessárias para configurar um aplicativo Flutter com Stripe e, em seguida, adicionamos o pagamento com cartão de débito e botões para Apple Pay e Google Pay.

O Stripe Flutter SDK é uma boa escolha sempre que você precisar adicionar opções de pagamento em um aplicativo móvel. Espero que tenha gostado deste tutorial!