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


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-clivue init webpack frontend 

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


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


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


<script src=""</script>

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


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




we sould define the router too in


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.



👉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 😉




Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

React — Google Maps Example Project

Building an online multiplayer game using React Native and Firebase: Overview

3 Steps to Quickly Start with React Query

Fetching an API with “fetch()”

Setting global state with React

20 best courses to learn Vue JS on YouTube

Build FFmpeg WebAssembly version (= ffmpeg.js): Part.1 Preparation

Deploy an Angular JS Image Feed App in 3 Steps

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ahmed Amine Hachimi

Ahmed Amine Hachimi

More from Medium

Where does Nuxt.js fit in Web Development?


Render a DateTime Object in Twig

How to add any Google font in Nuxt JS project with Tailwind CSS

Vue.js Interview Challenge — #10 — Countdown Timer — Solution