Tutorial - Aprende a configurar Paypal para recibir pagos usando Node.js

Tecnología
  
Programación Web
  
Nodejs
  
Javascript
  
Bootstrap
  
Express Js
  
Desarrollo Web
  
Api Rest
    09 Febrero, 2021   Regresar el blog
Compartir:

En el día de hoy vamos a aprender a configurar paypal con la PayPal Node SDK usaremos node como lenguaje del back, Expressjs como framework y el motor de plantillas usaremos Express Handlebars

Empezaremos creando una carpeta en nuestro escritorio /node-paypal-test y activando la consola de nuestro editor de código favorito, e instalaremos las siguientes dependencias:

npm init --yes


npm i express express-handlebars paypal-rest-sdk 


npm i nodemon dotenv -D

configuramos el archivo package.json con lo siguiente:

"dev": "nodemon index.js"
"start": "node index.js"

Crearemos un archivo llamado .env que contendra nuestras variables confidenciales (PAYPAL_CLIENT_ID, PAYPAL_SECRET):

.env
PAYPAL_CLIENT_ID=tu_paypal_client_id
PAYPAL_SECRET=tu_paypal_secret

Pero antes de seguir con el código debemos obtener tanto el PAYPAL_CLIENT_ID como PAYPAL_SECRET para ello debemos ir a https://developer.paypal.com/developer/applications/ logueate y dale click en create_app


Una vez obtenido ambas llaves procedemos a crea un usarios para las pruebas en https://developer.paypal.com/developer/accounts/



Procedemos con el código necesario para recibir pagos vía paypal

index.js
require(´dotenv´).config()
const express = require(´express´)
const exphbs = require(´express-handlebars´)
const paypal = require(´paypal-rest-sdk´)
const path = require(´path´)
const app = express()
app.set(´views´, path.join(__dirname,´views´))
app.engine(´.hbs´, exphbs({
    defaultLayout: ´main´,
    layoutsDir: path.join(app.get(´views´), ´layouts´),
    partialsDir: path.join(app.get(´views´), ´partials´),
    extname: ´.hbs´
}))
app.set(´view engine´, ´.hbs´)
app.use(express.json())
app.use(express.urlencoded({extended:false}))
paypal.configure({
    ´mode´: ´sandbox´,
    ´client_id´: process.env.PAYPAL_CLIENT_ID,
    ´client_secret´: process.env.PAYPAL_SECRET
})
app.get(´/´, async (req, res) => {
    res.render(´index´)
})
app.get(´/cancel´, (req, res) => {
    res.render(´cancel´)
})
app.get(´/success´, (req, res) => {
    res.render(´success´)
})
app.post(´/create´, function(req, res){
    const {name, price} = req.body;
    //build PayPal payment request
    var payReq = JSON.stringify({
        ´intent´:´sale´,
        ´redirect_urls´:{
            ´return_url´:´http://localhost:3000/process´,
            ´cancel_url´:´http://localhost:3000/cancel´
        },
        ´payer´:{
            ´payment_method´:´paypal´
        },
        ´transactions´:[{
            ´amount´:{
                ´total´: price,
                ´currency´:´USD´
            },
            ´description´: name
        }]
    });
    paypal.payment.create(payReq, function(error, payment){
        if(error){
            console.error(error);
        } else {
            //capture HATEOAS links
            var links = {};
            payment.links.forEach(function(linkObj){
                links[linkObj.rel] = {
                    ´href´: linkObj.href,
                    ´method´: linkObj.method
                };
            })
            //if redirect url present, redirect user
            if (links.hasOwnProperty(´approval_url´)){
                res.redirect(links[´approval_url´].href);
            } else {
                console.error(´no redirect URI present´);
            }
        }
    });
});
app.get(´/process´, function(req, res){
    var paymentId = req.query.paymentId;
    var payerId = { ´payer_id´: req.query.PayerID };
    paypal.payment.execute(paymentId, payerId, function(error, payment){
        if(error){
            console.error(error);
        } else {
            if (payment.state == ´approved´){ 
                res.redirect(´/success´)
            } else { 
                res.redirect(´/cancel´)
            }
        }
    });
});
app.use(express.static(path.join(__dirname, ´public´)))
app.listen(3000, () => {
    console.log(´Server on port 3000´)
})

Procedemos a crear las vistas dentro de la carpeta views

Para este ejemplo usaremos un framework de css llamado bootstrap https://getbootstrap.com/docs/5.0/getting-started/introduction/ y para los iconos font awesome https://fontawesome.com/

views/layouts/main.hbs
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutorial - Aprende a configurar Paypal para recibir pagos usando Node.js</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <link rel="stylesheet" href="/main.css">
    <script src="/main.js" defer></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
</head>
<body>
    {{> navigation}}
    <div class="container p-4">
        {{{body}}}
    </div>
</body>
</html>

views/partials/navigation.hbs
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="/"><b>Tutorial</b> - Paypal para recibir pagos usando Node.js</a>
  </div>


views/index.hbs
<h1>Products</h1>
<div id="listProducts"></div>

views/success.hbs
<div class="pt-4  text-center"><h1>Payment completed successfully <i class="fa fa-check-circle text-success"></i></h1></div>

views/cancel.hbs
<div class="pt-4  text-center"><h1>Payment not successful <i class="fa fa-info-circle text-warning"></i></h1></div>

Ahora crearemos nuestros estilos y código del navegador (.js) personalizados, en el código de javascript usaremos fetch para traer una api gratuita de productos https://fakestoreapi.com/products

public/main.css
#listProducts div img {
    width:300px;
    height:300px;
    padding: 1em;
    object-fit: cover;
}
.card-footer{
    display:flex;
    justify-content: space-between
}
.card-body {
    height:120px;
    overflow-y: hidden
}

public/main.js
async function main() {
    const result = await fetch(´https://fakestoreapi.com/products´)
    const data = await result.json()
    const mainDiv = document.querySelector(´#listProducts´)
    const div = document.createElement(´div´)
    div.className = ´row´
    let item = ``;
    data.forEach( i => { item+=`<div class=´col-3 p-3´><div class=´card´><div class="card-title"><img  src="${i.image}" class="img-fluid" /></div><div class="card-body">${i.title}</div><div class="card-footer"><div>${i.price}  $usd</div><form action="/create" method="POST"><input type="hidden" name="price" value="${i.price}"><input type="hidden" name="name" value="${i.title}"><button class="btn btn-sm btn-success">Pay with Paypal</button>
    </form></div></div></div>` })
    div.innerHTML = item
    mainDiv.appendChild(div)  
}
main()

Con eso ultimo ya finalizamos ahora es momento de dejar algunos prints y un ejemplo en vivo para que lo vean y disfruten





Podemos ver un ejemplo en vivo haciendo click en el siguiente enlace







Y con esa amigos llegamos al final del tutorial, espero que lo hayan disfrutado y hasta la próxima!


Visita mi sitio web oficial para presupuestos y mucho más

TupaginaOnline.net

509 vistas
Compartir:


Autor
Jose Fuentes

- Web Developer -

 


0 COMENTARIO(S)
Contesta
Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *
Comentario *
Nombre *
Correo electrónico *
Sitio web

Articulos Relacionados
Articulos recientes

Desarrollos en venta

$ usd dólar 600