En aquest article, aprendrem a integrar PayPal Checkout amb React Hooks. Tanmateix, si preferiu Stripe, aquí teniu l’article sobre la integració de Stripe amb React que hem escrit.
També us pot interessar: “L’últim projecte d’Unimedia, Zellar, es posa en marxa!”
Què és PayPal Checkout?
PayPal Checkout integra perfectament el popular sistema de pagaments en línia de PayPal a la vostra aplicació web, aprofitant l’ SDK de JavaScript de PayPal .
Objectiu
El nostre objectiu avui és aprendre les tasques següents:
1. Integrar l’SDK de JavaScript de PayPal mitjançant l’ embolcall de components PayPay React.
2. Com crear un producte de mostra.
3. Integrar amb èxit aquest producte a la nostra aplicació React.js.
3. Redirigir correctament a la pàgina de pagament de PayPal i enregistra les respostes.
Requisits previs
- Coneixements de React js i React Hooks.
- .
Instal·leu el paquet de components PayPal CheckOut React
Utilitzar l’SDK directe de PayPal amb la nostra aplicació react pot ser una tasca, per això PayPal va crear el paquet react. Així que comencem creant la nostra aplicació react i instal·lant també el paquet.
npx create-react-app react-paypal
npm install @paypal/react-paypal-js
cd react-paypal
npm start
A continuació, obtindrem les credencials essencials de la pàgina de desenvolupadors de PayPal . Després de registrar-te, podràs crear una aplicació.
Feu clic al botó ” crear aplicació ” i ompliu els detalls necessaris. PayPal us proporcionarà el vostre ID de client .
A continuació, seguirem la documentació del paquet per trucar a un botó de compra de mostra.
import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";
export default function App() {
return (
<PayPalScriptProvider options={{ "client-id": "test" }}>
<PayPalButtons style={{ layout: "horizontal" }} />
</PayPalScriptProvider>
);
}Ompliu el vostre identificador de client per obtenir el botó de compra de mostra que es mostra a continuació. Recordeu que hauríeu de crear un fitxer .env per a les credencials de l’aplicació si es tracta d’una aplicació de producció.
.
Crea una targeta de producte
A continuació, crearem una targeta de producte inspirada en els nostres exemples 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>
Integreu PayPal CheckOut a l’aplicació React
Per integrar el pagament de PayPal a la nostra aplicació, hem d’ajustar l’API proporcionada per PayPal per crear una comanda, comprovar l’aprovació i els errors.
Abans de fer-ho, trucem a un parell de ganxos per gestionar el nostre estat esperat.
const [show, setShow] = useState(false);
const [success, setSuccess] = useState(false);
const [ErrorMessage, setErrorMessage] = useState(");
const [orderID, setOrderID] = useState(false);Direm l’ espectacle useState Hook quan el nostre usuari estigui preparat per comprar el producte.
Crear una comanda
// 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;
});
};Comprovar l’aprovació
// check Approval
const onApprove = (data, actions) => {
return actions.order.capture().then(function (details) {
const { payer } = details;
setSuccess(true);
});
};Comprovar els errors
//capture likely error
const onError = (data, actions) => {
setPaypalErrorMessage("An Error occured with your payment ");
};Aquí teniu el nostre fitxer App.js sencer.
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>
);
}Provant la nostra aplicació PayPal CheckOut React
Per provar la nostra aplicació, cal que creeu un compte de sandbox
Tanmateix, si us costa crear-ne un, podeu provar el nostre mètode useEffect + console.log , que utilitzarem per comprovar el nostre ID de comanda i si el nostre estat d’èxit ha canviat correctament.
useEffect(() => {
if (success) {
alert("Payment successful!!");
}
},
[success]
);
console.log(1, orderID);
console.log(2, success);
console.log(3, ErrorMessage);Podeu trobar els números de targeta de prova proporcionats per Stripe aquí , que podeu utilitzar per provar la pàgina de pagament.
Resum
Això és tot per ara. Esperem que us divertiu fent el tutorial. Amb PayPal Checkout, crear un procés de pagament fluid per a la vostra aplicació React és una experiència perfecta.
Podeu obtenir el codi complet aquí com a referència.
Unimedia Technology
Aquí a Unimedia Technology tenim un equip de desenvolupadors nadius al núvol que us poden ajudar a desenvolupar les vostres aplicacions AWS i Azure més complexes.
