Paypal checkout workflow with vue js and sails js

Paypal checkout workflow with vue js and sails js

  • 2018-10-17 02:52 AM
  • 249

through this post we will see the workflow of Paypal checkout with validation in the backend by using vue js in the frontend and sails js in the backend i will try to explain each step as much as i can but i assumes that you at least have some working knowledge of javascript

we need first to create a REST application in paypal developer https://developer.paypal.com/developer/applications/

demo

this is the application we will try to build by the end of this tutorial

Step1 : client side

generate a new vue js project using vue cli

make sure first that you have vue-cli installed globally

npm install --global vue-cli
vue init webpack frontend 

src/component/HelloWorld.vue

<template>
 <div class="container">
    <div class="jumbotron">
      <h1>Hello, There </h1>
      <p>Welcome to Paypal checkout Demo </p>
      <div class="input-group">
        <span class="input-group-addon">$</span>
        <input type="number" class="form-control" v-model="amount" aria-label="Amount (to the nearest dollar)">
        <span class="input-group-addon">.00</span>
      </div>
      <br><br><br>
     <paypal :amount="amount"></paypal>
    </div>
 </div>
</template>
<script>
 import Paypal from './Paypal'
export default {
  name: 'HelloWorld',
  data () {
    return {
      amount:10
    }
  },
   components: {
            'paypal': Paypal
        }, 
}
</script>

this code contain the layout of the home page and it makes use of another component witch we will create right now the PayPal button component

in src/component/Paypal.vue

<template>
<div>
  <div id="paypal-button-container"></div>
  <div v-if="success" class="alert alert-success">
     <strong>Success!</strong> Payment successfuly done
  </div>
  <div v-if="error" class="alert alert-danger">
     <strong>Ooops!</strong>  something went wrong
  </div>
</div>
</template>

we add the template tag first a Paypal button and two messages one for success payment and the other if something went wrong

inside the script tag we have to initiate a paypal object in mounted

src/component/Paypal.vue

let  client = {
sandbox:'your paypal sendbox client id ',
}
let  payment = (data, actions) => {
// Make a call to the REST api to create the payment
    return actions.payment.create({
     payment: {
        transactions: [
              {
              amount: { total:this.amount, currency: 'USD' }
              } 
         ]
      }
    });
}
let  onAuthorize = (data) => {
   var data = {
   paymentID: data.paymentID,
   payerID: data.payerID,
   amount:this.amount
    };
   this.sendDataPaypal({data:data}).then(() => {
         this.success=true // to display the success message 
    }).catch(err=>{
         this.error=true  // to display  the error message 
     });
}
paypal.Button.render({
env: 'sandbox', // sandbox | production
commit: true,
client,
payment,
onAuthorize
}, '#paypal-button-container');
}

if you notice in that code we make use of a PayPal object to render the button

is not defined yet we need to import the paypal CDN

add this script in the index.html file

./index.html

<script src="https://www.paypalobjects.com/api/checkout.js"</script>

in mounted we used a sendDataPaypal method witch we will define now in methods

src/component/Paypal.vue

methods:{
 sendDataPaypal ( data) {
  return new Promise((resolve, reject) => {
     axios.post('http://localhost:1337/checkoutpaypal',data)
     .then(res =>
       return resolve()
      }).catch((err) => {
         return reject(err)
      })
})
}
},

this method makes an http call using axios and sends the paypal data to the server side the paymentID ,payerID , amount so we can validate the payment in the server side

Step2 : Server side

generate a new sails js project

make sure first that you have sails installed globally

$ npm install sails -g

now we can generate a payment api

$ sails generate api payment

this command will create a model file and a controller file

in the model we define the attributes of a payment

api/model/payment.js

module.exports = {

  attributes: {
    amount:{
      type: 'integer'
    },
    email:{
      type: 'string'
    },
    first_name:{
      type: 'string'
    },
    last_name:{
      type: 'string'
    }
  }
};

_api/controllers/_PaymentController.js

module.exports = {
   checkoutPaypal(req,res){
     console.log(req.body)
      var execute_payment_json = {
        "payer_id": req.body.data.payerID,  
      };
      const payment ={}
      payment.amount=req.body.data.amount
      const paymentID=req.body.data.paymentID
        PaypalService.paymentPaypal(paymentID,execute_payment_json,payment,(err,result)=>{
              if(err) res.negotiate(err)
              res.ok(result)              
         });

    },
	
};

api/services/PaypalService.js

const paypal = require('paypal-rest-sdk')  
paypal.configure({
      mode: 'sandbox', // Sandbox or live
      client_id: 'paypal-client-id',
      client_secret: 'paypal-secret'
    });
module.exports = {
    paymentPaypal(paymentID,execute_payment_json,payment,cb){
  
            paypal.payment.execute(paymentID,execute_payment_json,(error, paymentLog)=> {
              if (error) {
                    return cb(error)
              }
              else{
                    //the logic after  successful payment  here just save the payment in a databse 
                    payment.email=paymentLog.payer.payer_info.email
                    payment.first_name=paymentLog.payer.payer_info.first_name
                    payment.last_name=paymentLog.payer.payer_info.last_name
                    console.log(payment)
                    Payment.create(payment).exec((err, result) => {
                              cb(null,'done')     
                    })
               }
            })
    }
}

we sould define the router too in

config/routes.js

module.exports.routes = {


     'POST /checkoutpaypal':'PaymentController.checkoutPaypal',


};

in the controller we receive the data from the client side and we pass it to a service PaypalService in this service we require paypal-rest-sdk module we need first to install this module by npm

npm install --save paypal-rest-sdk 

and we execute the payment when the payment is successfully executed we save the payment in the database

You can find the final code here.

links

Recommended Courses:

Vue JS 2 - The Complete Guide (incl. Vuex)

Vue JS 2.0 - Mastering Web Apps

Learn Vue 1 JS introduction to simple reactive JavaScript

Vue JS Essentials with Vuex and Vue Router