Cómo integrar PayPal Checkout en una aplicación React

En el espacio del comercio electrónico, las soluciones de pago digital han contribuido a un aumento significativo de los ingresos y al crecimiento general de las empresas al permitir y procesar pagos transfronterizos con facilidad.

PayPal ofrece una solución de pago digital simple y flexible para administrar transacciones en línea. Al incorporar PayPal en sus aplicaciones web, puede asegurarse de que los clientes accedan a una experiencia de pago segura y sin inconvenientes que, a su vez, puede generar mayores ventas y confianza general en la marca.

Siga leyendo para saber cómo integrar PayPal en sus aplicaciones React.

Configurar una cuenta de zona de pruebas de PayPal

PayPal Sandbox es un entorno de prueba proporcionado por PayPal para que pueda probar integraciones de pago dentro de sus aplicaciones. Ofrece un entorno simulado que incluye todas las funciones de pago que se encuentran en el entorno de producción en vivo de PayPal.

Simplemente, el sandbox proporciona una plataforma para probar integraciones de pago sin necesidad de dinero real.

Usando la cuenta sandbox, puede acceder a una cuenta virtual de PayPal con fondos de prueba, lo que le permite simular varios tipos de transacciones e integraciones de pago.

Para crear una cuenta sandbox, diríjase a Consola para desarrolladores de PayPal e inicie sesión con las credenciales de su cuenta de PayPal. A continuación, en el panel del desarrollador, haga clic en el Cuentas Sandbox botón.

Para procesar una transacción de PayPal desde su aplicación React, necesita dos cuentas de espacio aislado: una cuenta comercial y una cuenta personal. Estas dos cuentas lo ayudarán a simular una transacción completa, tanto desde el punto de vista de un cliente como desde el punto de vista de un comerciante (negocio).

Es importante probar la funcionalidad de la integración de pagos en su aplicación desde ambas perspectivas.

Clickea en el Crear una cuenta botón para configurar las dos cuentas.

En la página de configuración de la cuenta, cree uno de cada tipo de cuenta: personal y luego comercial. Utilizará las credenciales de la cuenta personal para iniciar sesión en caja de arena de paypal cuenta personal. Por otro lado, usará las credenciales de la cuenta comercial para crear un proyecto en la consola del desarrollador para obtener la ID de cliente de PayPal.

Alternativamente, en lugar de crear nuevas cuentas, puede usar las cuentas de pruebas predeterminadas proporcionadas por PayPal para probar las integraciones de pago.

Crear un proyecto de PayPal

En la página del panel del desarrollador, haga clic en el Aplicaciones y credenciales botón y haga clic Crear aplicación botón para configurar un proyecto de PayPal. Luego, complete el nombre de su aplicación, elija Comerciante como tipo de cuenta y seleccione las credenciales para la cuenta comercial que creó inicialmente.

Finalmente, copie el ID de cliente de la aplicación.

Configurar el cliente React

Crear una aplicación Reaccionar, abre el público/index.html y agregue su ID de cliente en el formato que se muestra a continuación en la sección del elemento principal.

<guionorigen=" https://www.paypal.com/sdk/js? ID-cliente=tu-ID-cliente&moneda=USD">guion>

La etiqueta de secuencia de comandos carga el SDK de JavaScript de PayPal, una biblioteca que proporciona funcionalidad del lado del cliente para interactuar con la API de PayPal y lo pone a disposición para su uso en los componentes de React.

Con las funciones del SDK, puede crear un botón de pago de PayPal que maneje el flujo de pago que implica enviar detalles de pago a PayPal, autorizar el pago y manejar el pago respuesta.

Crear un componente de producto

En el directorio /src, cree una nueva carpeta de componentes y agregue dos archivos: Product.js y PayPalCheckout.js.

Abra el archivo Product.js y agregue el siguiente código:

importar Reaccionar, { estado de uso } de"reaccionar";
importar"./producto.estilo.css";
importar"../valores/laptop.jpg";
funciónaplicación() {
devolver (
"Producto-contenedor">
"Producto-contenido">
"producto"> 
requerir("../valores/laptop.jpg")} alt="computadora 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>

Precio: $350.00</h3>
 </div>
 </header>
 </div>
 );
}


exportarpor defecto aplicación;

Este código representa un componente de producto simple.

Crear el componente de pago de PayPal

Agregue el siguiente código al archivo PayPalCheckout.js:

importar Reaccionar, { useRef, useEffect, useState } de"reaccionar";
importar Fallo de pago de"./Pago fallido";
importar Pago exitoso de"./Pago exitoso";
funciónPayPalPagar() {
constante paypal = usarRef();
constante [estado de transacción, establecer estado de transacción] = usar estado (nulo);
 usarEfecto(() => {
ventana.paypal
 .Botones({
 crear orden: (datos, acciones, errar) => {
devolver acciones.pedir.crear({
 intención: "CAPTURA",
 unidades_de_compra: [
 {
 descripción: "Ordenador portátil MacBook",
 cantidad: {
 código de moneda: "DÓLAR ESTADOUNIDENSE",
 valor: 350.00,
 },
 },
 ],
 });
 },
 enAprobar: asíncrono (datos, acciones) => {
constante orden = esperar acciones.pedir.capturar();
consola.registro("éxito", orden);
 setTransactionStatus("éxito");
 },
 onError: (errar) => {
consola.log (error);
 setTransactionStatus("falla");
 },
 })
 .render (paypal.actual);
 }, []);
si (estado de la transacción "éxito") {
devolver<Pago exitoso />;
 }
si (estado de la transacción "falla") {
devolver<Fallo de pago />;
 }
devolver (



</div>
 </div>
 );
}
exportarpor defecto Pago de PayPal;

Este código utiliza tres Ganchos de reacción: useRef, useState y useEffect. Utiliza useRef para crear una referencia a un elemento div, que actuará como un contenedor para el botón de pago de PayPal.

Utiliza useEffect para crear un botón de PayPal con el pago Botones y luego muestra ese botón en el elemento div al que hace referencia paypal.currenmétodo t.

El pago Botones función toma un objeto con varias propiedades:

• createOrder: esta función devuelve un objeto que contiene los detalles del pedido que ha creado el usuario. Los detalles del pedido incluirán los detalles específicos del producto o servicio, como la cantidad, el nombre del producto, la descripción y la moneda.
• onApprove: esta función se ejecuta cuando se aprueba el pago. Captura el pago y registra el mensaje de éxito en la consola. También establece la estado de la transacción estado a éxito.
• onError: esta función se ejecuta cuando el pago encuentra un error. Registra el mensaje de error en la consola y establece el estado de la transacción estado a falla.

Finalmente, el componente representa condicionalmente el Pago exitoso o Fallo de pago componente dependiendo del valor de la estado de la transacción estado.

Estos dos componentes solo se procesarán después de una transacción exitosa o fallida. Continúe y cree dos archivos: PagoÉxito.js y PagoFallo.js en la carpeta de componentes y agregue un componente funcional con un elemento de párrafo que represente el estado de la transacción.

Actualice el componente App.js

Abra el archivo src/App.js y agregue el siguiente código:

importar Reaccionar, { estado de uso } de"reaccionar";
importar Producto de"./componentes/Producto";
importar PayPalPagar de"./componentes/PayPalCheckout";
importar"./Aplicación.css";
funciónaplicación() {
constante [checkout, setCheckOut] = useState(FALSO);
devolver (

"Aplicación">
"Encabezado de la aplicación">
 {¿verificar? (

 ): (
"Producto">
 nombreclase="verificar"
 al hacer clic = {() => {
 setCheckOut(verdadero);
 }}
 >
 Agregar al carrito y pagar
 </button>

 </div>
 )}
 </header>
 </div>
 );
}
exportarpor defecto aplicación;

Este código utiliza un enfoque de representación condicional para mostrar el componente PayPalCheckout o el componente Producto. El enlace useState inicializa una variable de estado llamada checkout como falsa, que realiza un seguimiento del estado actual cuando se carga la página.

Inicialmente, React representa el componente Producto, incluido el botón de pago. Cuando un usuario hace clic en el botón de pago, la función del controlador onClick se activa para actualizar la variable de pago a verdadero. Esta actualización solicita al componente de la aplicación que represente el componente PayPalCheckout en su lugar.

Funciones adicionales de pago de PayPal

Las funciones de pago de PayPal, como One Touch y PayPal Credit, garantizan que sus clientes puedan disfrutar de un proceso de pago optimizado que es seguro, confiable y conveniente.

Si bien puede crear su propio servicio de procesamiento de pagos desde cero, usar una plataforma de pago como PayPal es preferiblemente una alternativa más flexible y eficiente. Básicamente, con una solución de pago implementada, no necesita preocuparse por administrar la infraestructura necesaria para configurar un servicio de pago personalizado.