Paypal checkout workflow with vue js and sails js

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 

once the project is created we replace the content of helloworld component with this code

src/component/HelloWorld.vue

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

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

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

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
$ sails new backend --no-frontend 

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

api/controllers/PaymentController.js

api/services/PaypalService.js

we sould define the router too in

config/routes.js

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

• LinkedIn
• Twitter
• Github

👉Don’t forget to clap if you like the post and star ⭐️ the repo in Github if you find it useful ,Thanks for reading

cheers 😉