En aquest article, aprendrem a integrar “Stripe Checkout” amb React with Hooks i Node js. Tanmateix, si preferiu utilitzar Angular, aquí teniu una guia que hem creat per a això .
També us pot interessar: “Angular 12: característiques, obsoletes i migració”
Què és Stripe Checkout?
Stripe Checkout és una pàgina de pagament totalment responsiva i segura allotjada per Stripe. Us permet rebre pagaments ràpidament i eliminar la fricció de desenvolupar una pàgina de pagament compatible.
Objectiu
Avui aprendrem a:
1. Com crear un producte al vostre tauler de control de Stripe.
2. Integrar aquest producte al nostre component de pagament de React js
3. Comunicar correctament amb el nostre servidor i redirigir
Requisits previs
- Coneixements bàsics de React js i React Hooks .
- Nodejs versió 10 o posterior
- .
Crea un producte
Tanmateix, abans de començar a codificar, creem un producte de mostra que mostrarem a la nostra pàgina de pagament.
1. Crea un compte de Stripe
Nota: totes les dades i claus relacionades amb el producte es crearan en el “mode de prova” dels desenvolupadors . Les dades sensibles per a la producció s’han de desar de manera segura als fitxers .env.
- Anar al lloc web de Stripe i crea un compte.
- En crear el teu compte, se’t dirigirà a la pàgina del teu dashboard.
2. Crea un producte
Per fer-ho, fes clic a Productes enllaç al costat i fes clic al botó “Afegeix producte”. Pots omplir els detalls del producte tal com es mostra a continuació.
A més, assegura’t de desar el producte i també de copiar l’identificador de l’API del preu per a un ús posterior
Integració de Stripe Checkout
La integració del nostre producte Stripe requereix dos passos: configurar el nostre servidor de nodes i trucar a la nostra API de producte Stripe a la nostra aplicació React .
1. Crea-reacciona-aplicació
Creem el nostre projecte amb create-react-app amb l’ordre següent:
npx create-react-app stripe-react-app2. Configura un servidor Node Express
A continuació, hem de configurar el nostre servidor de nodes. Per fer-ho, instal·larem express i simultàniament . Al mateix temps, ens permetrà executar el nostre servidor de nodes i l’aplicació React alhora. npm i alhora ; npm expresso
3. Instal·la Stripe
Per utilitzar Stripe a la nostra aplicació, instal·larem tres paquets: paquets stripe , react-stripe i stripe-js .
Aquí tens la versió final del nostre fitxer package.json.
{
"name": "stripe-react-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@stripe/react-stripe-js": "^1.4.1",
"@stripe/stripe-js": "^1.17.0",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"concurrently": "^6.2.1",
"express": "^4.17.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"stripe": "^8.169.0",
"web-vitals": "^1.0.1"
},
"homepage":"http://localhost:3000/",
"proxy": "http://localhost:5000",
"scripts": {
"start-client": "react-scripts start",
"start-server": "node server.js",
"start": "concurrently "yarn start-client" "yarn start-server",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Veuràs com establim valors per al proxy i la pàgina d’inici. De la mateixa manera, també hem utilitzat simultàniament per iniciar el nostre servidor de nodes i l’aplicació de reaccionar alhora.
7. Server.js
Crea un fitxer server.js al nostre directori d’inici. Dins del nostre fitxer server.js, farem
- la iInstancia dels paquets necessaris
- Crea una ruta API: create-checkout-session. En aquesta ruta, definirem
payment_method_types, preu, quantitat i success_url i cancel_url
La versió final del fitxer server.js serà
const stripe = require('stripe')('sk_test_***************************************');
const express = require('express');
const app = express();
app.use(express.static('.'));
const YOUR_DOMAIN = 'http://localhost:3000/checkout';
app.post('/create-checkout-session', async (req, res) => {
const session = await stripe.checkout.sessions.create({
payment_method_types: [
'card'
],
line_items: [
{
// TODO: replace this with the `price` of the product you want to sell
// price: '{{PRICE_ID}}',
price: 'price_*************',
quantity: 1,
},
],
mode: 'payment',
success_url: `${YOUR_DOMAIN}?success=true`,
cancel_url: `${YOUR_DOMAIN}?canceled=true`,
});
res.redirect(303, session.url)
});
app.listen(5000, () => console.log('Running on port 5000'));
Pots trobar la teva clau secreta de l’API al teu tauler. Comença amb: sk_test . També es pot utilitzar l’identificador de preu del teu producte en aquest fitxer.
Frontend: aplicació React
En aquesta secció, construirem els nostres components frontend. La nostra interfície constarà de la nostra pàgina principal que allotjarà la targeta del producte i una pàgina de resultats que mostrarà si la compra va ser correcta o no.
8. Targeta de producte
- En primer lloc, crearem una carpeta de components dins de la carpeta src que allotjarà els nostres fitxers d’interfície.
- A continuació, crea fitxers ProductDisplay.js i Message.js . El ProductDisplay.js mostrarà la targeta del producte i el Message.js mostrarà el missatge obtingut del nostre Stripe Checkout.
export const ProductDisplay = () => (
<div className="wrapper">
<div className="product-img">
<img
src="https://cdn.pixabay.com/photo/2017/12/20/09/36/orchid-3029574_1280.jpg"
alt="Orchid Flower"
height="420"
width="327"
/>
</div>
<div className="product-info">
<div className="product-text">
<h1>Orchid Flower</h1>
<h2>POPULAR HOUSE PLANT</h2>
<p>
The Orchidaceae are a diverse and
<br />
widespread family of flowering plants,
<br />
with blooms that are often
<br />
colourful and fragrant.{" "}
</p>
</div>
<form action="/create-checkout-session" method="POST">
<div className="product-price-btn">
<p>
<span>$20</span>
</p>
<button type="submit">buy now</button>
</div>
</form>
</div>
</div>
);
ProductDisplay.jsexport const Message = ({ message }) => (
<section>
<p>{message}</p>
<a className="product-price-btn" href="/">
<button type="button">Continue</button>
</a>
</section>
);
Message.js I aquí tens el nostre fitxer App.js on es criden els dos components.
import React, { useState, useEffect } from "react";
import "./App.css";
import { ProductDisplay } from "./components/ProductDisplay";
import { Message } from "./components/Message";
export default function App() {
const [message, setMessage] = useState(");
useEffect(() => {
// Check to see if this is a redirect back from Checkout
const query = new URLSearchParams(window.location.search);
if (query.get("success")) {
setMessage(" Yay! Order placed! You will receive an email confirmation confirming your order.");
}
if (query.get("canceled")) {
setMessage(
"Order canceled -- please try again."
);
}
}, []);
return message ? <Message message={message} /> : <ProductDisplay />;
}
Estructura del projecte
Aquí tens l’estructura final del projecte:
Executa npm start per iniciar el projecte.
Aquí pots trobar un parell de números de targetes de prova proporcionats per Stripe que pots utilitzar per provar la pàgina de pagament de Stripe.
Resum
Aquí ho tens. Amb Stripe Checkout i React, es pot crear una experiència de comerç electrònic perfecta per als vostres clients.
Espero que hagis gaudit llegint aquest article. No dubtis a compartir i afegir els teus valuosos comentaris.
Sempre ens agrada conéixer les opinions dels companys desenvolupadors.
Unimedia Technology
Aquí a Unimedia Technology tenim un equip de desenvolupadors de React que us poden ajudar a desenvolupar les vostres integracions de stripe més complexes.
