Como integrar o PayPal Checkout em um aplicativo React

No espaço de comércio eletrônico, as soluções de pagamento digital contribuíram para um aumento significativo na receita e no crescimento geral dos negócios, permitindo e processando pagamentos internacionais com facilidade.

O PayPal oferece uma solução de pagamento digital simples e flexível para gerenciar transações online. Ao incorporar o PayPal em seus aplicativos da web, você pode garantir que os clientes tenham acesso a uma experiência de pagamento segura e contínua, o que, por sua vez, pode levar ao aumento das vendas e à confiança geral da marca.

Continue lendo para saber como integrar o PayPal em seus aplicativos React.

Configurar uma conta Sandbox do PayPal

O PayPal Sandbox é um ambiente de teste fornecido pelo PayPal para que você possa testar as integrações de pagamento em seus aplicativos. Ele oferece um ambiente simulado que inclui todos os recursos de pagamento encontrados no ambiente de produção ao vivo do PayPal.

Simplesmente, o sandbox fornece uma plataforma para testar integrações de pagamento sem a necessidade de dinheiro real.

Usando a conta sandbox, você pode acessar uma conta virtual do PayPal com fundos de teste, que permite simular vários tipos de transações e integrações de pagamento.

Para criar uma conta sandbox, acesse Console do desenvolvedor do PayPal e faça login com as credenciais da sua conta do PayPal. Em seguida, no painel do desenvolvedor, clique no botão Contas Sandbox botão.

Para processar uma transação do PayPal a partir de seu aplicativo React, você precisa de duas contas sandbox: uma conta comercial e uma conta pessoal. Essas duas contas o ajudarão a simular uma transação completa, tanto da visão do cliente quanto da visão do comerciante (empresa).

É importante testar a funcionalidade da integração de pagamento em seu aplicativo de ambas as perspectivas.

Clique no Criar uma conta botão para configurar as duas contas.

Na página de configurações da conta, crie uma de cada tipo de conta: pessoal e depois comercial. Você usará as credenciais da conta pessoal para entrar no caixa de areia do PayPal conta pessoal. Por outro lado, você usará as credenciais da conta comercial para criar um projeto no console do desenvolvedor para obter o ID do cliente do PayPal.

Como alternativa, em vez de criar novas contas, você pode usar as contas sandbox padrão fornecidas pelo PayPal para testar as integrações de pagamento.

Criar um projeto do PayPal

Na página do painel do desenvolvedor, clique no botão Aplicativos e credenciais botão e clique Criar aplicativo botão para configurar um projeto PayPal. Em seguida, preencha o nome do seu aplicativo, escolha Comerciante como o tipo de conta e selecione as credenciais para a conta comercial que você criou inicialmente.

Por fim, copie o ID do cliente do aplicativo.

Configurar o cliente React

Criar um aplicativo React, abra o public/index.html arquivo e adicione seu ID de cliente no formato mostrado abaixo na seção do elemento head.

<roteiroorigem=" https://www.paypal.com/sdk/js? client-id=seu-client-ID&currency=USD">roteiro>

A tag de script carrega o PayPal JavaScript SDK, uma biblioteca que fornece funcionalidade do lado do cliente para interagir com a API do PayPal e a disponibiliza para uso nos componentes React.

Usando as funções do SDK, você pode criar um botão de pagamento do PayPal que gerencie o fluxo de pagamento que envolve enviar detalhes de pagamento para o PayPal, autorizar o pagamento e lidar com o pagamento resposta.

Criar um componente de produto

No diretório /src, crie uma nova pasta de componentes e inclua dois arquivos: Product.js e PayPalCheckout.js.

Abra o arquivo Product.js e adicione o código abaixo:

importar Reagir, { useState } de"reagir";
importar"./produto.estilo.css";
importar"../assests/laptop.jpg";
funçãoAplicativo() {
retornar (
"Contêiner de produto">
"Conteúdo do produto">
"produtos"> 
exigir("../assests/laptop.jpg")} alt="computador portátil" />
 </div>
"desc">
 MacBook Pro</h2>



 Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Maxime mollitia, molestiae quas vel sint commodi repudiandae
 consequuntur.
 </p>

Preço: $350.00</h3>
 </div>
 </header>
 </div>
 );
}


exportarpadrão Aplicativo;

Esse código renderiza um componente de produto simples.

Criar o componente de checkout do PayPal

Adicione o seguinte código ao arquivo PayPalCheckout.js:

importar Reagir, { useRef, useEffect, useState } de"reagir";
importar Falha no pagamento de"./PaymentFailure";
importar PaymentSuccess de"./PaymentSuccess";
funçãoPayPalCheckout() {
const paypal = useRef();
const [transactionStatus, setTransactionStatus] = useState(nulo);
 useEffect(() => {
janela.paypal
 .Botões({
 criarPedido: (dados, ações, erro) => {
retornar ações.pedido.criar({
 intenção: "CAPTURAR",
 unidades_compras: [
 {
 descrição: "notebook macbook",
 quantia: {
 Código da moeda: "USD",
 valor: 350.00,
 },
 },
 ],
 });
 },
 emAprovar: assíncrono (dados, ações) => {
const ordem = aguardam ações.ordem.captura();
console.registro("sucesso", ordem);
 setTransactionStatus("sucesso");
 },
 onError: (errar) => {
console.log (erro);
 setTransactionStatus("falha");
 },
 })
 .render (paypal.current);
 }, []);
se (status da transação "sucesso") {
retornar<PaymentSuccess />;
 }
se (status da transação "falha") {
retornar<Falha no pagamento />;
 }
retornar (



</div>
 </div>
 );
}
exportarpadrão PayPalCheckout;

Este código usa três Ganchos de reação: useRef, useState e useEffect. Ele usa useRef para criar uma referência a um elemento div, que atuará como um contêiner para o botão de checkout do PayPal.

Ele usa useEffect para criar um botão PayPal com o paypal. Botões função e, em seguida, renderiza esse botão no elemento div referenciado por paypal.currenmétodo t.

O paypal. Botões A função recebe um objeto com várias propriedades:

• createOrder: Esta função retorna um objeto contendo os detalhes do pedido que o usuário criou. Os detalhes do pedido incluirão detalhes específicos do produto ou serviço, como valor, nome do produto, descrição e moeda.
• onApprove: Esta função é executada quando o pagamento é aprovado. Ele captura o pagamento e registra a mensagem de sucesso no console. Ele também define o status da transação estado para sucesso.
• onError: Esta função é executada quando o pagamento encontra um erro. Ele registra a mensagem de erro no console e define o status da transação estado para falha.

Por fim, o componente renderiza condicionalmente o PaymentSuccess ou Falha no pagamento componente dependendo do valor do status da transação estado.

Esses dois componentes serão renderizados apenas após uma transação bem-sucedida ou com falha. Vá em frente e crie dois arquivos: PaymentSuccess.js e PaymentFailure.js na pasta de componentes e adicione um componente funcional com um elemento de parágrafo que renderize o status da transação.

Atualize o componente App.js

Abra o arquivo src/App.js e adicione o código abaixo:

importar Reagir, { useState } de"reagir";
importar produtos de"./componentes/Produto";
importar PayPalCheckout de"./components/PayPalCheckout";
importar"./App.css";
funçãoAplicativo() {
const [checkout, setCheckOut] = useState(falso);
retornar (

"Aplicativo">
"Cabeçalho do aplicativo">
 {Confira? (

 ): (
"Produtos">
 className ="Confira"
 onClick={() => {
 setCheckOut(verdadeiro);
 }}
 >
 Adicionar ao carrinho e finalizar a compra
 </button>

 </div>
 )}
 </header>
 </div>
 );
}
exportarpadrão Aplicativo;

Esse código usa uma abordagem de renderização condicional para exibir o componente PayPalCheckout ou o componente Product. O gancho useState inicializa uma variável de estado chamada checkout como false, que mantém o controle do estado atual quando a página é carregada.

Inicialmente, o React renderiza o componente Product, incluindo o botão de checkout. Quando um usuário clica no botão de checkout, a função do manipulador onClick é acionada para atualizar a variável de checkout para true. Esta atualização solicita que o componente App renderize o componente PayPalCheckout.

Recursos adicionais de pagamento do PayPal

Os recursos de pagamento do PayPal, como One Touch e PayPal Credit, garantem que seus clientes possam desfrutar de um processo de pagamento simplificado, seguro, confiável e conveniente.

Embora você possa criar seu próprio serviço de processamento de pagamentos do zero, usar uma plataforma de pagamento como o PayPal é, de preferência, uma alternativa mais flexível e eficiente. Essencialmente, com uma solução de pagamento instalada, você não precisa se preocupar em gerenciar a infraestrutura necessária para configurar um serviço de pagamento personalizado.