En este artículo aprenderemos a integrar PayPal Checkout con React Hooks. Sin embargo, si prefieres Stripe, aquí está el artículo que escribimos sobre la integración de Stripe con React .
También le puede interesar: «El último proyecto de Unimedia, Zellar, ¡se pone en marcha!»
¿Qué es PayPal Checkout?
El proceso de pago de PayPal integra perfectamente el popular sistema de pagos en Internet de PayPal en su aplicación Web, aprovechando el SDK de JavaScript de PayPal.
Objetivo
Nuestro objetivo hoy es aprender las siguientes tareas:
1. Integrar PayPal Javascript SDK utilizando la envoltura de componentes PayPay React.
2. Cómo crear un producto de muestra.
3. Integrar con éxito ese producto en nuestra App React.js.
3. Redirija correctamente a la página de pago de PayPal y registre las respuestas.
Requisitos previos
- Conocimientos de React js y React Hooks.
- React 16.8 o posterior
Instalar el paquete de componentes React de PayPal CheckOut
Utilizar el SDK directo de PayPal con nuestra aplicación react puede ser una tarea ardua, razón por la cual PayPal creó el paquete react. Así que vamos a empezar por la creación de nuestra aplicación react y la instalación del paquete también.
npx create-react-app react-paypal
npm install @paypal/react-paypal-js
cd react-paypal
npm start
A continuación, obtendremos las credenciales esenciales de la página para programadores de PayPal. Después de registrarte, podrás crear una aplicación.
Haz clic en el botón «Crear aplicación» y rellena los datos necesarios. PayPal le proporcionará su ID de cliente.
A continuación, seguiremos la documentación del paquete para llamar a un botón de pago de ejemplo.
import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";
export default function App() {
return (
<PayPalScriptProvider options={{ "client-id": "test" }}>
<PayPalButtons style={{ layout: "horizontal" }} />
</PayPalScriptProvider>
);
}Introduzca su ID de cliente para obtener el botón de pago de muestra que se muestra a continuación. Recuerde que debe crear un archivo .env para las credenciales de su aplicación si se trata de una aplicación de producción.
si se trata de una aplicación de producción.
Crear una ficha de producto
A continuación, crearemos una tarjeta de producto inspirada en nuestros ejemplos de Stripe.
<div className="wrapper">
<div className="product-img">
<img
src="https://cdn.pixabay.com/photo/2021/08/15/06/54/sunflower-6546993_1280.jpg"
alt="SunFlower"
height="420"
width="327"
/>
</div>
<div className="product-info">
<div className="product-text">
<h1>Sunflower</h1>
<h2>POPULAR HOUSE PLANT</h2>
<p>
Sunflowers are usually tall annual or perennial plants.
<br />
Each "flower" is actually a
<br />
disc made up of tiny flowers,
<br />
to better attract pollinators.{" "}
</p>
</div>
<div className="product-price-btn">
<p>
<span>$20</span>
</p>
<button type="submit">
Buy now
</button>
</div>
</div>
</div>
Integrar PayPal CheckOut en React App
Para integrar el proceso de pago de PayPal en nuestra aplicación, tenemos que modificar la API proporcionada por PayPal para crear un pedido, comprobar la aprobación y los errores.
Antes de hacer eso, vamos a llamar a un par de ganchos para manejar nuestro estado esperado.
const [show, setShow] = useState(false);
const [success, setSuccess] = useState(false);
const [ErrorMessage, setErrorMessage] = useState(");
const [orderID, setOrderID] = useState(false);Llamaremos al gancho show useState cuando nuestro usuario esté listo para comprar el producto.
Crear un pedido
// creates a paypal order
const createOrder = (data, actions) => {
return actions.order
.create({
purchase_units: [
{
description: "Sunflower",
amount: {
currency_code: "USD",
value: 20,
},
},
],
// not needed if a shipping address is actually needed
application_context: {
shipping_preference: "NO_SHIPPING",
},
})
.then((orderID) => {
setOrderID(orderID);
return orderID;
});
};Aprobación del cheque
// check Approval
const onApprove = (data, actions) => {
return actions.order.capture().then(function (details) {
const { payer } = details;
setSuccess(true);
});
};Comprobar errores
//capture likely error
const onError = (data, actions) => {
setPaypalErrorMessage("An Error occured with your payment ");
};Aquí está nuestro archivo App.js en su totalidad.
import React, { useState } from "react";
import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";
import "./App.css";
export default function App() {
const [show, setShow] = useState(false);
const [success, setSuccess] = useState(false);
const [ErrorMessage, setErrorMessage] = useState(");
const [orderID, setOrderID] = useState(false);
// creates a paypal order
const createOrder = (data, actions) => {
return actions.order
.create({
purchase_units: [
{
description: "Sunflower",
amount: {
currency_code: "USD",
value: 20,
},
},
],
// not needed if a shipping address is actually needed
application_context: {
shipping_preference: "NO_SHIPPING",
},
})
.then((orderID) => {
setOrderID(orderID);
return orderID;
});
};
// check Approval
const onApprove = (data, actions) => {
return actions.order.capture().then(function (details) {
const { payer } = details;
setSuccess(true);
});
};
//capture likely error
const onError = (data, actions) => {
setErrorMessage("An Error occured with your payment ");
};
return (
<PayPalScriptProvider
options={{
"client-id":",
}}
>
<div>
<div className="wrapper">
<div className="product-img">
<img
src="https://cdn.pixabay.com/photo/2021/08/15/06/54/sunflower-6546993_1280.jpg"
alt="SunFlower"
height="420"
width="327"
/>
</div>
<div className="product-info">
<div className="product-text">
<h1>Sunflower</h1>
<h2>POPULAR HOUSE PLANT</h2>
<p>
Sunflowers are usually tall annual or perennial plants.
<br />
Each "flower" is actually a
<br />
disc made up of tiny flowers,
<br />
to better attract pollinators.{" "}
</p>
</div>
<div className="product-price-btn">
<p>
<span>$20</span>
</p>
<button type="submit" onClick={() => setShow(true)}>
Buy now
</button>
</div>
</div>
</div>
{show ? (
<PayPalButtons
style={{ layout: "vertical" }}
createOrder={createOrder}
onApprove={onApprove}
/>
) : null}
</div>
</PayPalScriptProvider>
);
}Probando nuestra aplicación PayPal CheckOut React
Para probar nuestra aplicación es necesario crear una cuenta sandbox
Sin embargo, si le resulta difícil crear uno, puede probar nuestro método useEffect + console.log , que utilizaremos para comprobar nuestro orderID y si nuestro estado de éxito cambió con éxito.
useEffect(() => {
if (success) {
alert("Payment successful!!");
}
},
[success]
);
console.log(1, orderID);
console.log(2, success);
console.log(3, ErrorMessage);Aquí puede encontrar números de tarjeta de prueba proporcionados por Stripe, que puede utilizar para probar la página de pago.
Resumen
Eso es todo por ahora. Esperamos que te hayas divertido con el tutorial. Con PayPal Checkout, crear un proceso de pago fluido para su aplicación React es una experiencia perfecta.
Puede obtener el código completo aquí como referencia.
Unimedia Technology
Aquí en Unimedia Technology tenemos un equipo de Cloud Native Developers que pueden ayudarte a desarrollar tus Aplicaciones AWS y Azure más complejas.
