Explorando o novo Stripe React Native SDK

A seguir, vamos nos livrar do código React Native padrão do App.js . Atualize o arquivo App.js com o código abaixo:

/** * Amostra de aplicativo nativo React * https://github.com/facebook/react-native * * @format * @flow strict-local */
import React from'react';
import { SafeAreaView, StyleSheet,
} de'react-native'; const App=()=> { Retorna (   );
};
estilos const=StyleSheet.create ({
});
exportar aplicativo padrão;

Se você executar o aplicativo, deverá ver uma tela em branco semelhante a esta abaixo:

Construindo a tela de pagamento

Agora que instalamos o SDK com sucesso, vamos continuar criando nossa primeira tela de pagamento.

Construindo um componente de cartão

Para começar, crie uma nova pasta chamada telas no diretório raiz do seu aplicativo React Native.

Navegue até a pasta e crie um novo arquivo chamado paymentScreen.js e cole o código abaixo:

 import React, {useState} de"react";
import { CardField, CardFieldInput, useStripe, } de'@ stripe/stripe-react-native'; exportar tela de pagamento padrão=()=> { const [cartão, setCard]=useState (CardFieldInput.Details | null); const {confirmPayment, handleCardAction}=useStripe () Retorna(  { setCard (cardDetails); }} onFocus={(focusField)=> { console.log ('focusField', focusField); }} /> ) }

A seguir, vamos importar o paymentScreen.js para a raiz do nosso projeto.

Abra App.js e atualize seu código para se parecer com o seguinte:

/** * Amostra de aplicativo nativo React * https://github.com/facebook/react-native * * @format * @flow strict-local */
import React from'react';
import { SafeAreaView, StyleSheet,
} de'react-native';
importar {StripeProvider} de'@ stripe/stripe-react-native';
importar PaymentScreen de"./screens/paymentScreen";
const App=()=> { const publishableKey="pk_test_AtN3VLAFhzbLNqf3Y9z50iNQ"; Retorna (    );
};
estilos const=StyleSheet.create ({
});
exportar aplicativo padrão;

Vamos executar nosso aplicativo para testar o que construímos até agora. Execute npx react-native run-ios para executar uma compilação para iOS.

Você provavelmente encontrará um erro símbolos indefinidos para a arquitetura x86_64 , mas não entre em pânico! Para corrigir o erro, siga as etapas abaixo:

 LIBRARY_SEARCH_PATHS=(
remover:"\"$ (TOOLCHAIN_DIR)/usr/lib/swift/$ (PLATFORM_NAME) \"",
remover:"\"$ (TOOLCHAIN_DIR)/usr/lib/swift-5.0/$ (PLATFORM_NAME) \"", "\"$ (herdado) \"",
);

Abra seu projeto no Xcode e crie um novo arquivo Swift ( Arquivo > Novo > Arquivo > rápido ). Nomeie o arquivo com qualquer coisa (por exemplo, Fix.swift ) e selecione criar um cabeçalho de ponte quando solicitado pelo Xcode.

Execute npx react-native run-ios novamente e o erro deve ser corrigido. Se você for bem-sucedido, seu aplicativo deve se parecer com a imagem abaixo após o carregamento:

Acabamos de criar um componente de cartão simples que envia os detalhes do cartão diretamente para o servidor Stripe para validação em tempo real e, subsequentemente, armazena o estado do componente.

IU pré-construída (etapa única)

Este recurso é uma combinação de todas as etapas envolvidas na aceitação de pagamento no Stripe usando detalhes de cartão de crédito. Essa integração requer um endpoint que se comunique com a API Stripe de seu servidor.

Criando o endpoint

Para configurar um servidor para se comunicar com o Stripe do React Native, precisamos inicializar um novo aplicativo node.js com install express body-parser e dotenv .

Crie uma nova pasta chamada server , navegue até a pasta, execute npm init-y e siga as instruções para criar um novo aplicativo Node. Em seguida, execute npm i express body-parser dotenv .

Finalmente, crie um arquivo server.js no nível raiz da pasta do servidor e cole o código abaixo no arquivo:

 require ("dotenv"). config ();
const express=require ("express");
const app=express ();
const {resolve}=requer ("caminho");
const stripe=require ("stripe") (process.env.secret_key);//https://stripe.com/docs/keys#obtain-api-keys
app.use (express.static ("."));
app.use (express.json ());
//Um ​​endpoint para seu checkout
app.post ("/checkout", assíncrono (req, res)=> { //Crie ou recupere o objeto Stripe Customer associado ao seu usuário. deixar cliente=aguardar stripe.customers.create ();//Este exemplo apenas cria um novo cliente a cada vez //Cria uma chave efêmera para o cliente; isso permite que o aplicativo exiba métodos de pagamento salvos e salve novos const ephemeralKey=await stripe.ephemeralKeys.create ( {cliente: cliente.id}, {apiVersion:'2020-08-27'} ); //Crie um PaymentIntent com o valor do pagamento, moeda e cliente const paymentIntent=await stripe.paymentIntents.create ({ montante: 973, moeda:"usd", cliente: cliente.id }); //Envie as chaves do objeto para o cliente res.send ({ publishableKey: process.env.publishable_key,//https://stripe.com/docs/keys#obtain-api-keys paymentIntent: paymentIntent.client_secret, cliente: cliente.id, ephemeralKey: ephemeralKey.secret });
}); app.listen (process.env.PORT, ()=> console.log (`Servidor de nó ouvindo na porta $ {process.env.PORT}!`)
);

Não se esqueça de criar um arquivo .env com o código abaixo:

 secret_key=Your_Secret_Key
PORTA=8000

Em seguida, atualize o paymentScreen.js com o código abaixo para adicionar um botão de checkout ao aplicativo:

 import React, {useState, useEffect} de"react";
import {StyleSheet, Button, View} from'react-native';
import { CardField, CardFieldInput, useStripe,
} de'@ stripe/stripe-react-native'; exportar tela de pagamento padrão=()=> { const [cartão, setCard]=useState (CardFieldInput.Details | null); const {confirmPayment, handleCardAction}=useStripe () const API_URL="http://localhost: 8000"; const {initPaymentSheet, presentPaymentSheet}=useStripe (); const [carregando, setLoading]=useState (false); const fetchPaymentSheetParams=async ()=> { const response=await fetch (`$ {API_URL}/checkout`, { método:'POST', cabeçalhos: { 'Content-Type':'application/json', }, }); const {paymentIntent, ephemeralKey, customer}=await response.json (); Retorna { paymentIntent, ephemeralKey, cliente, }; }; const initializePaymentSheet=async ()=> { const { paymentIntent, ephemeralKey, cliente, }=aguarda fetchPaymentSheetParams (); const {erro}=espera initPaymentSheet ({ customerId: cliente, customerEphemeralKeySecret: ephemeralKey, paymentIntentClientSecret: paymentIntent, }); if (! erro) { setLoading (true); } }; const openPaymentSheet=async ()=> { const {erro}=espera presentPaymentSheet ({clientSecret}); if (erro) { Alert.alert (`Código do erro: $ {error.code}`, error.message); } senão { Alert.alert ('Sucesso','Seu pedido foi confirmado!'); } }; useEffect (()=> { initializePaymentSheet (); }, []); Retorna (   { setCard (cardDetails); }} onFocus={(focusField)=> { console.log ('focusField', focusField); }} />   )
}
estilos const=StyleSheet.create ({ container: { flex: 1, preenchimento: 20, marginHorizontal: 10, marginVertical: 10, }, botão: { backgroundColor:'# 00aeef', borderColor:'red', borderWidth: 5, borderRadius: 15 }
})

Como visto acima, crie um projeto node.js separado e configure o servidor com a porta 8000. Em React Native, envie uma solicitação para o endpoint /checkout no servidor. Assim que a solicitação for bem-sucedida, o initializePaymentSheet será chamado usando o gancho useEffect .

Durante este processo, o botão permanece desativado até que uma resposta seja recebida do back end. Observe que seu servidor de back-end deve estar instalado e funcionando pelo tempo que você pretende se comunicar com ele.

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

Conclusão

O Stripe React Native SDK da Stripe é muito fácil de implementar. Com suporte para UIs pré-construídas (incluindo planos para suporte futuro para mais UIs pré-construídas) e opções de pagamento, está se tornando o favorito dos desenvolvedores.

A postagem Explorando o novo Stripe React Native SDK apareceu primeiro no LogRocket Blog .