Paypal checkout workflow with vue js and sails js
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
Suggest:
☞ JavaScript Programming Tutorial Full Course for Beginners
☞ Learn JavaScript - Become a Zero to Hero
☞ Javascript Project Tutorial: Budget App
☞ E-Commerce JavaScript Tutorial - Shopping Cart from Scratch