Como integrar os pagamentos do PayPal ao React Native

Para callbacks, vamos criar funções e adicioná-las como adereços ao PayPalButton . Primeiro, vamos adicionar onApprove . Esta função é chamada quando um pedido é aprovado pelo PayPal.

Para criar uma função assíncrona _onApprove :

 função assíncrona _onApprove (dados, ações) { deixar ordem=esperar por actions.order.capture (); console.log (pedido); ordem de devolução; }

Aqui, a palavra-chave await é usada para buscar os detalhes do pedido. Em seguida, console.log os detalhes do pedido.

Adicione também esta função aos props PayPalButton :

  _createOrder (dados, ações)} onApprove={(dados, ações)=> _onApprove (dados, ações)}
/>

Além disso, adicionaremos as propriedades onCancel e onError para obter retornos de chamada se o usuário cancelar um pagamento ou se houver algum erro no final do PayPal. Vamos criar apenas uma função de chamada e usá-la em ambos os adereços:

 function _onError (err) { console.log (errar);
}

Seu código de botão do PayPal deve ser semelhante a este:

  _createOrder (dados, ações)} onApprove={(dados, ações)=> _onApprove (dados, ações)} onCancel={()=> _onError ("Cancelado")} onError={(err)=> _onError (err)}
/>

Após essas adições, seu arquivo App.js deve ser parecido com este:

 import React from"react";
importar ReactDOM de"react-dom";
import"./App.css";
const PayPalButton=window.paypal.Buttons.driver ("react", {React, ReactDOM});
function App () { function _createOrder (dados, ações) { return actions.order.create ({ compra_unidades: [ { resultar: { valor:"1", }, }, ], }); } função assíncrona _onApprove (dados, ações) { deixar pedido=esperar por actions.order.capture (); console.log (pedido); ordem de devolução; } function _onError (err) { console.log (errar); } Retorna ( 
  _createOrder (dados, ações)} onApprove={(dados, ações)=> _onApprove (dados, ações)} onCancel={()=> _onError ("Cancelado")} onError={(err)=> _onError (err)} /> 
 );
}
exportar aplicativo padrão;

Tudo o que estamos fazendo é criar uma solicitação de pagamento de $ 1,00 do usuário e registrá-la para ver o resultado.

Para testar seu gateway de pagamento, basta clicar no botão PayPal, inserir as credenciais do usuário (ou seja, o e-mail e a senha da etapa um) e efetuar o pagamento.

Depois que o pagamento for feito, você será redirecionado para a página do aplicativo. Abra o console do desenvolvedor clicando com o botão direito, inspecione o elemento e vá para a guia do console. Você verá o resultado do pagamento fictício que acabou de fazer:

Configuração do Firebase Hosting

Como estamos usando o Firebase para hospedar nosso aplicativo da web React, comece inscrevendo-se em uma conta Firebase .

Depois de criar uma conta, clique em Adicionar projeto e defina um nome de projeto:

Você pode escolher se deseja ativar ou desativar a análise:

Agora que você criou seu projeto Firebase, clique em Continuar .

Para configurar a hospedagem, vá para a guia de hospedagem na barra lateral e clique no botão Começar .

Abra uma janela de terminal e instale firebase-tools em seu sistema:

 $ npm install-g firebase-tools

Faça login usando sua conta do firebase para que você possa se conectar facilmente com o projeto a partir da janela do terminal:

 $ firebase login

Use sua conta para autorizar o login. Depois de fazer login, vá para o diretório do projeto my-paypal-web e digite o seguinte comando:

 $ firebase init

Use as setas do teclado para navegar até Hosting . Pressione a barra de espaço para selecionar e retornar/inserir para continuar.

Como já criamos um projeto, selecionaremos Usar e projeto existente :

Next, select the project we created from the list and hit return/enter.

On the next step, enter the following configs:

===Hosting Setup Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. Se você
have a build process for your assets, use your build's output directory. ? What do you want to use as your public directory? construir
? Configure as a single-page app (rewrite all urls to/index.html)? sim
? Set up automatic builds and deploys with GitHub? Não

After you’ve done that, you’ll see a success message at the bottom:

✔ Wrote build/index.html i Writing configuration info to firebase.json...
i Writing project information to.firebaserc... ✔ Firebase initialization complete!

To push your web app live, enter following commands:

$ yarn build

After the build is complete, enter:

$ firebase deploy

You’ll see a result with the hosting URL:

===Deploying to'my-pay-web'... i deploying hosting
i hosting[my-pay-web]: beginning deploy...
i hosting[my-pay-web]: found 18 files in build
✔ hosting[my-pay-web]: file upload complete
i hosting[my-pay-web]: finalizing version...
✔ hosting[my-pay-web]: version finalized
i hosting[my-pay-web]: releasing new version...
✔ hosting[my-pay-web]: release complete ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/my-pay-web/overview
Hosting URL: https://my-pay-web.web.app

You can just copy the hosting URL and paste it in your preferred browser. Here’s what mine looks like:

https://my-pay-web.web.app

Building the basic WebView in React Native

If you have prior experience working with React Native, that’s a plus. If not, the official docs offer a guide to setting up your environment and installing the app. If you haven’t done that already, just go to the project directory and use the following command to install the WebView module for React Native:

yarn add react-native-webview

Next, connect you device using USB and enter the following command:

npx react-native run-android

After you’ve successfully installed the app on your device or emulator, open up the App.js file. Delete the default extra code and import the WebView module:

import { WebView } from'react-native-webview';

To initialize the payment gateway from React Native, we’ll create a button to show the web view in a modal and get a response from WebView. We’ll also create a useState() hook to show and hide the WebView.

const [showGateway, setShowGateway]=useState(false);

Button:

  setShowGateway(true)}> Pay Using PayPal 

Button styles:

 btnCon: { height: 45, width:'70%', elevation: 1, backgroundColor:'#00457C', borderRadius: 3, }, btn: { flex: 1, alignItems:'center', justifyContent:'center', }, btnTxt: { color:'#fff', fontSize: 18, },

Button output:

Now, import the Modal component from react-native and create the modal with a basic web view showing google.com.

Modal and WebView:

{showGateway ? (  setShowGateway(false)} onRequestClose={()=> setShowGateway(false)} animationType={"fade"} transparent>    setShowGateway(false)}>    PayPal GateWay         ): null}

We’re using from react-native-vector-icons and ActivityIndicator from react-native.

Modal and WebView output:

Now, we’ll show/hide the ActivityIndicator after the page has loaded to get a callback from WebView. If the page has loaded, we’ll add following hooks and props:

const [prog, setProg]=useState(false);
const [progClr, setProgClr]=useState('#000');

Props for WebView:

onLoadStart={()=> { setProg(true); setProgClr('#000');
}}
onLoadProgress={()=> { setProg(true); setProgClr('#00457C');
}}
onLoadEnd={()=> { setProg(false);
}}
onLoad={()=> { setProg(false);
}}

Just for extra UX, this code changes the color of ActivityIndicator according to the progress of the page.

Your App.js file should now look something like this:

import React, {useState} from'react';
import { SafeAreaView, StyleSheet, Text, View, TouchableOpacity, Modal, ActivityIndicator,
} from'react-native';
import {WebView} from'react-native-webview';
import Feather from'react-native-vector-icons/Feather'; const App=()=> { const [showGateway, setShowGateway]=useState(false); const [prog, setProg]=useState(false); const [progClr, setProgClr]=useState('#000'); Retorna (     setShowGateway(true)}> Pay Using PayPal    {showGateway ? (  setShowGateway(false)} onRequestClose={()=> setShowGateway(false)} animationType={"fade"} transparent>    setShowGateway(false)}>    PayPal GateWay       { setProg(true); setProgClr('#000'); }} onLoadProgress={()=> { setProg(true); setProgClr('#00457C'); }} onLoadEnd={()=> { setProg(false); }} onLoad={()=> { setProg(false); }} />   ): null}  );
};
const styles=StyleSheet.create({ container: { flex: 1, alignItems:'center', justifyContent:'center', backgroundColor:'#fff', }, btnCon: { height: 45, width:'70%', elevation: 1, backgroundColor:'#00457C', borderRadius: 3, }, btn: { flex: 1, alignItems:'center', justifyContent:'center', }, btnTxt: { color:'#fff', fontSize: 18, }, webViewCon: { position:'absolute', top: 0, left: 0, right: 0, bottom: 0, }, wbHead: { flexDirection:'row', alignItems:'center', backgroundColor:'#f9f9f9', zIndex: 25, elevation: 2, },
});
exportar aplicativo padrão;

Connecting the PayPal interface to a React Native app using WebView

To receive data from the WebView page to our React Native app, we’ll use onMessage prop. We also need to add some code to our web app to send the required data. The window.ReactNativeWebView.postMessage method is used to send data from WebView to our React Native app.

After making to required change your _onApprove and _onError functions, your code should look like this:

async function _onApprove(data, actions) { let order=await actions.order.capture(); console.log(order); window.ReactNativeWebView && window.ReactNativeWebView.postMessage(JSON.stringify(order)); return order;
}
function _onError(err) { console.log(err); let errObj={ err: err, status:"FAILED", }; window.ReactNativeWebView && window.ReactNativeWebView.postMessage(JSON.stringify(errObj));
}

We’re using JSON.stringify because postMessage can only accept string arguments.

Remember to build the web app and deploy it to Firebase:

$ yarn build
$ firebase deploy

To get the data on the React Native side, we’ll use onMessage. Create the following function and add it to the onMessage prop:

function onMessage(e) { let data=e.nativeEvent.data; setShowGateway(false); console.log(data); }

Add the onMessage prop and set the source uri to the URI of you web app:

Now it’s time to test the payment gateway. At this point, we’re logging the result from postMessage in the React Native app.

Click Pay Using PayPal to reveal the payment page. Enter your credentials and make payment:

After the payment is made successfully (or unsuccessfully), you’ll see the result printed in the console:

You can alert the users about the status of the payment they just made by adding an alert in the onMessage function:

function onMessage(e) { ... let payment=JSON.parse(data); if (payment.status==='COMPLETED') { alert('PAYMENT MADE SUCCESSFULLY!'); } senão { alert('PAYMENT FAILED. PLEASE TRY AGAIN.'); }
}

Here’s the output:

The full code is as follows.

App.js (React my-paypal-web):

 import React from"react";
import ReactDOM from"react-dom";
import"./App.css";
const PayPalButton=window.paypal.Buttons.driver("react", { React, ReactDOM });
function App () { function _createOrder(data, actions) { return actions.order.create({ purchase_units: [ { amount: { value:"1", }, }, ], }); } async function _onApprove(data, actions) { let order=await actions.order.capture(); console.log(order); window.ReactNativeWebView && window.ReactNativeWebView.postMessage(JSON.stringify(order)); return order; } function _onError(err) { console.log(err); let errObj={ err: err, status:"FAILED", }; window.ReactNativeWebView && window.ReactNativeWebView.postMessage(JSON.stringify(errObj)); } Retorna ( 
  _createOrder(data, actions)} onApprove={(data, actions)=> _onApprove(data, actions)} onCancel={()=> _onError("CANCELED")} onError={(err)=> _onError("ERROE")} /> 
 );
}
exportar aplicativo padrão;

App.js (React Native myPayPalApp):

import React, {useState} from'react';
import { SafeAreaView, StyleSheet, Text, View, TouchableOpacity, Modal, ActivityIndicator,
} from'react-native';
import {WebView} from'react-native-webview';
import Feather from'react-native-vector-icons/Feather';
const App=()=> { const [showGateway, setShowGateway]=useState(false); const [prog, setProg]=useState(false); const [progClr, setProgClr]=useState('#000'); function onMessage(e) { let data=e.nativeEvent.data; setShowGateway(false); console.log(data); let payment=JSON.parse(data); if (payment.status==='COMPLETED') { alert('PAYMENT MADE SUCCESSFULLY!'); } senão { alert('PAYMENT FAILED. PLEASE TRY AGAIN.'); } } Retorna (     setShowGateway(true)}> Pay Using PayPal    {showGateway ? (  setShowGateway(false)} onRequestClose={()=> setShowGateway(false)} animationType={'fade'} transparent>    setShowGateway(false)}>    PayPal GateWay       { setProg(true); setProgClr('#000'); }} onLoadProgress={()=> { setProg(true); setProgClr('#00457C'); }} onLoadEnd={()=> { setProg(false); }} onLoad={()=> { setProg(false); }} onMessage={onMessage} />   ): null}  );
};
const styles=StyleSheet.create({ container: { flex: 1, alignItems:'center', justifyContent:'center', backgroundColor:'#fff', }, btnCon: { height: 45, width:'70%', elevation: 1, backgroundColor:'#00457C', borderRadius: 3, }, btn: { flex: 1, alignItems:'center', justifyContent:'center', }, btnTxt: { color:'#fff', fontSize: 18, }, webViewCon: { position:'absolute', top: 0, left: 0, right: 0, bottom: 0, }, wbHead: { flexDirection:'row', alignItems:'center', backgroundColor:'#f9f9f9', zIndex: 25, elevation: 2, },
});
exportar aplicativo padrão;

Conclusão

If you’ve made it this far, congratulations — you’ve successfully set up your test payment gateway for React Native using PayPal. Although the code above should suffice for the basic payment system, you can change it according to your own needs. You can also refer to the official PayPal guide for further reference.

The post How to integrate PayPal payments with React Native appeared first on LogRocket Blog.