jQuery PayPal HTML Shop

In this article, we will understand the how to create a jQuery PayPal HTML Shop in detail with the help of various examples. In this we will use a PayPal lightweight jQuery plugin that make it easier to create custom, security PayPal payment buttons for your e-commerce websites.

Example 1:

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of jQuery Paypal HTML Shop </title>  
        <meta name = "description"/>  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src =  
"https://code.jquery.com/jquery-3.5.1.min.js">  
        </script>               
        <script src =  
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>          
<style>
* { box-sizing: border-box; }
html {
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #333 ), color-stop(100%,black));
    background: -webkit-radial-gradient(center, ellipse cover, #333 0%, black 100%);    
    height: 100%;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
}
body {
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #333 ), color-stop(100%,black));
    background: -webkit-radial-gradient(center, ellipse cover, #333 0%, black 100%); 
    height: 100%;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
}
h1 {
  position: relative;
  color: #FFF;
  font-weight: 100;
  font-size: 40px;
  padding: 0;
  margin: 0;
  text-align: center;
  line-height: 1;
  text-shadow: 0 0 10px #ff006c, 0 0 20px #ff006c, 0 0 30px #ff006c, 0 0 40px #ff417d, 0 0 70px #ff417d, 0 0 80px #ff417d, 0 0 100px #ff417d, 0 0 150px #ff417d;
}
h2 {
  font-weight: 200;
  font-size: 20px;
  padding: 0;
  margin: 0;
  line-height: 1;
  color: black;
  letter-spacing: 2px;
  text-align: center;
}
.wrap {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, .6);
  background-image: linear-gradient(rgba(0, 0, 0, .1), rgba(150, 150, 150, .4));
  display: flex;
  justify-content: center; 
  align-items: center;
}
.credit-card {
  margin-top: 125px;
  height: 260px;
  width: 400px;
  border-radius: 15px;
  background: linear-gradient(100deg, #0195D4, #1B3588);
  color: white;
}
.nav {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  background-color: white;
  width: 100%;
  justify-content: space-around;
  padding: 0;
  border-bottom: solid darkred 4px;
  z-index: 3;
}
.nav span {
  display: flex; 
align-items: center;
  font-family: 'Raleway', sans-serif;
}
.nav h2 {
  display: flex; 
align-items: center;
  font-family: 'Raleway', sans-serif;
}
.nav i {
  margin: 10px 20px;
}
.nav h2:hover {
  font-weight: 900;
}
.nav h2 {
  font-size: 1.4em;
  align-self: center;
}
.nav span:hover {
  color: #001a66;
  cursor: pointer;
}
.nav h2:hover {
  color: #001a66;
  cursor: pointer;
}
.checkout { margin-right: 25px; }
.save { padding: 0 0 0px 20px; }
.leg1 {
  background-color: #253b80;
}
.moon1 {
  background-color: #253b80;
}
.leg2 {
  background-color: #179bd7;
}
.moon2 {
  background-color: #179bd7;
}
.leg1 {
  height: 85px;
  width: 25px;
  border-radius: 3px;
  transform: rotate(10deg);
}
.leg2 {
  height: 85px;
  width: 25px;
  border-radius: 3px;
  transform: rotate(10deg);
}
.moon1 {
  height: 70px;
  width: 80px;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 100%;
  border-top-left-radius: 50%;
  border-top-right-radius: 100%;
  transform: rotate(10deg);
}
.moon2 {
  height: 70px;
  width: 80px;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 100%;
  border-top-left-radius: 50%;
  border-top-right-radius: 100%;
  transform: rotate(10deg);
}
.leg1 {
  position: absolute;
  margin: -50px 0 0 -5px;
}
.leg2 {
  position: absolute;
  margin: -50px 0 0 -5px;
}
.letter2 { opacity: .7;
  position: absolute;
  margin: 21.4px; 
}
.letter1 { opacity:.9;
  position: absolute;
}
.brand-logo {
  margin: 25px 75px 0 0;
}
.red {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background-color: #ED1C24;
}
.gold {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background-color: #F7941E;
  margin-left: -10px;
}
.mixer {
  display: flex;
  position: absolute;
  margin-left: 35px;
  margin-top: 30px;
}
.mastercard h5 {
  font-family: 'Changa One', cursive;
  font-size: .75em;
  text-shadow: 1px 1px blue;
  margin-left: -67px;
  margin-top: 13px;
  z-index: 1;
}
input::placeholder {
  color: white;
  letter-spacing: 4px;
  font-family: 'Nova Mono', monospace;
}
#account-number {
  color: white;
  border: none;
  background-color: inherit;
  text-align: center;
  font-size: 1.5em;
  width: 92%;
  margin: 0 auto;
  letter-spacing: 4px;
  padding-bottom: 5px;
    z-index: 1;
}
#expiration-date {
  color: white;
  border: none;
  background-color: inherit;
  text-align: center;
  font-size: 1.1em;
  width: 66px;
  margin: 0 auto;
  letter-spacing: 3px;
  padding-bottom: 5px;
}
input.customer {
  font-size: 1.2;
  width: 192px; 
  color: white;
  border: none;
  text-align: center;
  background-color: inherit; 
  margin: 0 auto;
  letter-spacing: 1px;
  padding-bottom: 5px;
}
.small-text {
  font-family: 'Dosis', sans-serif;
  text-transform: uppercase;
  font-size: .5em;
}
.first-four {
 letter-spacing: 1px;
}
.debit { font-size: .8em; transform: scale(1.2,1); }
.brand-id, .debit { font-family: 'Contrail One', cursive; }
.brand-id { font-size: 1.2em; }
.stretch { letter-spacing: -1px;
transform: scale(1.5,1);
}
.first-row { padding-top: 25px;
  margin: 0 auto;
  width: 75%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.second-row {
  display: flex; 
  justify-content: center; 
  align-items: center; 
}
.third-row {
  display: flex;
  justify-content: center;
  margin-top: 75px;
}
.fourth-row {
  margin: 0 auto;
  width: 70%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 3px 0;
}
.fifth-row {
  display: flex;
  justify-content: center;
}
.valid-thru { display: flex; flex-direction: column; justify-content: center; padding: 0 5px; z-index: 1; }
.date { z-index: 1; font-family: 'Nova Mono', monospace; }
.sixth-row { display: flex; justify-content: flex-start; margin-top: 5px; }
.name { margin: 0 25px; }
.mastercard { padding: 0 10px;  margin: -50px 0 20px 15px; }
@media (max-width:500px) {
  .nav span { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; 
     margin: 0 auto; padding: 0; }
  .nav { display: flex; justify-content: space-between; margin: 0 auto; padding: 0; text-align: center; }
}
</style>
<body>
<div class = "nav"> 
  <h1> Example </h1>  
  <h2> Jquery Paypal HTML Shop </h2>
    <span class = "cart"> 
   <i class = "fa fa-shopping-cart fa-3x"> </i> 
<h6> Return to Cart </h6> </span> <span class="save">
   <h6> Save This Card </h6> </span>
    <span class = "checkout"> <i class = "fa fa-check-square-o fa-3x"> </i> <h6> Proceed to Checkout </h6> </span>
  </div>
<div class = "wrap">
  <div class = "credit-card">
    <div class = "first-row">
      <div class = "brand-id">
        <h6 class = "stretch"> PayPal </h6> </div>
      <div class = "prepaid small-text">
        <h6> prepaid </h6> </div>
    </div>
    <div class = "second-row">
      <div class = "brand-logo">
        <span class = "letter2">
            <div class = "moon2"> </div>
            <div class = "leg2"> </div>
        </span>
        <span class = "letter1">
            <div class = "moon1"> </div>
            <div class = "leg1"> </div>
       </span>
      </div>
    </div>
    <div class = "third-row">
      <input type = "text" placeholder = "5412 7512 3456 7890" id = "account-number" size = "17" maxlength = "19">
    </div>
    <div class = "fourth-row">
      <h6 class = "first-four small-text"> </h6>
      <h4 class = "debit"> Debit </h4>
    </div>
    <div class = "fifth-row">
      <div class = "valid-thru small-text">
        <h6> VALID </h6>
        <h6> THRU </h6> </div>
      <div class = "date">
        <input type = "text" placeholder = "12/17" id = "expiration-date" size = "4" maxlength = "5"> </div>
    </div>
    <div class = "sixth-row">
      <div class = "name"> <input type = "text" placeholder = "PAYPAL CUSTOMER" class = "customer" size = "25" maxlength = "25" > </div>
      <div class = "mastercard">
        <div class = "mixer">
          <div class = "red"> </div>
          <div class = "gold"> </div>
          <h5> Mastercard </h5>
        </div>
      </div>
    </div>
</div> 
</div>
<script>
$(document).ready(function() {
  $(".credit-card").mouseenter(function() {
    $(this).css({
      "box-shadow": "0px 4px 50px 0px rgba(0,0,0, 1)",
      "transition": "5s"
    });
  });
  $(".credit-card").mouseleave(function() {
    $(this).css({
      "box-shadow": "0px 0px 0px 0px rgba(0,0,0, 1)",
      "transition": "5s"
    });
  });  
});
</script>
</body>
</html>

Explanation:

In the above example we created an example of Paypal Payment page using jquery.

Output:

Following is the output of this example.

Example 2:

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of jQuery Paypal HTML Shop </title>  
        <meta name = "description"/>  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src =  
"https://code.jquery.com/jquery-3.5.1.min.js">  
        </script>               
        <script src =  
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>          
<style>
html {
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #333 ), color-stop(100%,black));
    background: -webkit-radial-gradient(center, ellipse cover, #333 0%, black 100%);    
    height: 100%;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
}
body {
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #333 ), color-stop(100%,black));
    background: -webkit-radial-gradient(center, ellipse cover, #333 0%, black 100%); 
    height: 100%;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
}
h1 {
  position: relative;
  color: #FFF;
  font-weight: 100;
  font-size: 40px;
  padding: 0;
  margin: 0;
  text-align: center;
  line-height: 1;
  text-shadow: 0 0 10px #ff006c, 0 0 20px #ff006c, 0 0 30px #ff006c, 0 0 40px #ff417d, 0 0 70px #ff417d, 0 0 80px #ff417d, 0 0 100px #ff417d, 0 0 150px #ff417d;
}
h2 {
  font-weight: 200;
  font-size: 20px;
  padding: 0;
  margin: 0;
  line-height: 1;
  color: black;
  letter-spacing: 2px;
  text-align: center;
}
.product-name {
font-weight: 700;
text-decoration: underline;
}
.product-price {
font-style: oblique;
font-family: cursive;
}
.cart_item_price {
font-style: oblique;
font-family: cursive;
}
.product-img {
max-width: 140px;
margin: 0 auto;
}
.card {
border: 1px dashed grey;
}
.btn:disabled {
opacity: 0.5;
}
h4 {
font-family: cursive;
}
.cart_item_name {
font-weight: 700;
}
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(192, 192, 192, 0.1);
font-family: cursive;
font-size: xx-large;
cursor: wait;
letter-spacing: 0.05em;
text-shadow: 4px 4px 0px #d5d5d5, 7px 7px 0px rgba(0, 0, 0, 0.2);
}
.paypal {
display: none;
}
</style>
  <body>
  <h1> Example </h1>  
  <h2> Jquery Paypal HTML Shop </h2>
    <div class = "container">
      <div class = "row">
        <div class = "col-sm-12 col-md-12 col-lg-6 col-xs-12">
          <h4 class = "badge-pill badge-light mt-3 mb-3 p-2 text-center"> Products </h4>
          <div class = "row">
            <div class = "col-sm-6 col-md-6 col-lg-6 col-xs-6">
              <div class = "shadow-sm card mb-3 product">
                <div class = "card-body">
                  <h5 class = "card-title text-info bold product-name"> Water Bootle </h5>
                  <p class = "card-text text-success product-price"> 200 Rs. </p>
                  <button class = "btn badge badge-pill badge-secondary mt-2 float-right" type = "button"
                    data-action = "add-to-cart"> Add to cart </button>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-md-6 col-lg-6 col-xs-6">
              <div class="shadow-sm card mb-3 product">
                <div class="card-body">
                  <h5 class="card-title text-info product-name">Phone Protector</h5>
                  <p class="card-text text-success product-price">300 Rs.</p>
                  <button class="btn badge badge-pill badge-secondary mt-2 float-right" type="button"
                  data-action="add-to-cart">Add to cart</button>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-6 col-md-6 col-lg-6 col-xs-6">
              <div class="shadow-sm card mb-3 product">
                <div class="card-body">
                  <h5 class="card-title text-info product-name">Boat Micro USB</h5>
                  <p class="card-text text-success product-price">200 Rs.</p>
                  <button class="btn badge badge-pill badge-secondary mt-2 float-right" type="button" 
                  data-action="add-to-cart">Add to cart</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-12 col-md-12 col-lg-6 col-xs-12">
          <h4 class="badge-pill badge-light mt-3 mb-3 p-2 text-center">Cart</h4>
          <div class="cart"></div>
        </div>
      </div>
    </div>
<script>
"use strict";                        
let cart = [];
let cartTotal = 0;
const cartDom = document.querySelector(".cart");
const addtocartbtnDom = document.querySelectorAll('[data-action="add-to-cart"]');
addtocartbtnDom.forEach(addtocartbtnDom => {
  addtocartbtnDom.addEventListener("click", () => {
    const productDom = addtocartbtnDom.parentNode.parentNode;
    const product = {
      img: productDom.querySelector(".product-img").getAttribute("src"),
      name: productDom.querySelector(".product-name").innerText,
      price: productDom.querySelector(".product-price").innerText,
      quantity: 1
   };
const IsinCart = cart.filter(cartItem => cartItem.name === product.name).length > 0;
if (IsinCart === false) {
  cartDom.insertAdjacentHTML("beforeend",`
  <div class="d-flex flex-row shadow-sm card cart-items mt-2 mb-3 animated flipInX">
    <div class="p-2">
        <img src="${product.img}" alt="${product.name}" style="max-width: 50px;"/>
    </div>
    <div class="p-2 mt-3">
        <p class="text-info cart_item_name">${product.name}</p>
    </div>
    <div class="p-2 mt-3">
        <p class="text-success cart_item_price">${product.price}</p>
    </div>
    <div class="p-2 mt-3 ml-auto">
        <button class="btn badge badge-secondary" type="button" data-action="increase-item">+
    </div>
    <div class="p-2 mt-3">
      <p class="text-success cart_item_quantity">${product.quantity}</p>
    </div>
    <div class="p-2 mt-3">
      <button class="btn badge badge-info" type="button" data-action="decrease-item">?
    </div>
    <div class="p-2 mt-3">
      <button class="btn badge badge-danger" type="button" data-action="remove-item">�
    </div>
  </div> `);
  if(document.querySelector('.cart-footer') === null){
    cartDom.insertAdjacentHTML("afterend",  `
      <div class="d-flex flex-row shadow-sm card cart-footer mt-2 mb-3 animated flipInX">
        <div class="p-2">
          <button class="btn badge-danger" type="button" data-action="clear-cart">Clear Cart
        </div>
        <div class="p-2 ml-auto">
          <button class="btn badge-dark" type="button" data-action="check-out">Pay <span class="pay"></span> 
            ?
        </div>
      </div>`); }
    addtocartbtnDom.innerText = "In cart";
    addtocartbtnDom.disabled = true;
    cart.push(product);
    const cartItemsDom = cartDom.querySelectorAll(".cart-items");
    cartItemsDom.forEach(cartItemDom => {
    if (cartItemDom.querySelector(".cart_item_name").innerText === product.name) {
      cartTotal += parseInt(cartItemDom.querySelector(".cart_item_quantity").innerText) 
       parseInt(cartItemDom.querySelector(".cart_item_price").innerText);
      document.querySelector('.pay').innerText = cartTotal + " Rs.";
      cartItemDom.querySelector('[data-action="increase-item"]').addEventListener("click", () => {
        cart.forEach(cartItem => {
          if (cartItem.name === product.name) {
            cartItemDom.querySelector(".cart_item_quantity").innerText = ++cartItem.quantity;
            cartItemDom.querySelector(".cart_item_price").innerText = parseInt(cartItem.quantity) 
            parseInt(cartItem.price) + " Rs.";
            cartTotal += parseInt(cartItem.price)
            document.querySelector('.pay').innerText = cartTotal + " Rs.";
          }
        });
      });
      cartItemDom.querySelector('[data-action="decrease-item"]').addEventListener("click", () => {
        cart.forEach(cartItem => {
          if (cartItem.name === product.name) {
            if (cartItem.quantity > 1) {
              cartItemDom.querySelector(".cart_item_quantity").innerText = --cartItem.quantity;
              cartItemDom.querySelector(".cart_item_price").innerText = parseInt(cartItem.quantity) *
              parseInt(cartItem.price) + " Rs.";
              cartTotal -= parseInt(cartItem.price)
              document.querySelector('.pay').innerText = cartTotal + " Rs.";
            }   }
        });
      });
      cartItemDom.querySelector('[data-action="remove-item"]').addEventListener("click", () => {
        cart.forEach(cartItem => {
          if (cartItem.name === product.name) {
              cartTotal -= parseInt(cartItemDom.querySelector(".cart_item_price").innerText);
              document.querySelector('.pay').innerText = cartTotal + " Rs.";
              cartItemDom.remove();
              cart = cart.filter(cartItem => cartItem.name !== product.name);
              addtocartbtnDom.innerText = "Add to cart";
              addtocartbtnDom.disabled = false;
          }
          if(cart.length < 1){
            document.querySelector('.cart-footer').remove();
          }
        });
      });
      document.querySelector('[data-action="clear-cart"]').addEventListener("click" , () => {
        cartItemDom.remove();
        cart = [];
        cartTotal = 0;
        if(document.querySelector('.cart-footer') !== null){
          document.querySelector('.cart-footer').remove();
        }
        addtocartbtnDom.innerText = "Add to cart";
        addtocartbtnDom.disabled = false;
      });
      document.querySelector('[data-action="check-out"]').addEventListener("click" , () => {
        if(document.getElementById('paypal-form') === null){
          checkOut();
        }
      });    }
  }); }
});
});
function checkOut() {
  let paypalHTMLForm = `
  <form id="paypal-form" action="https://www.paypal.com/cgi-bin/webscr" method="post" >
    <input type="hidden" name="cmd" value="_cart">
    <input type="hidden" name="upload" value="1">
    <input type="hidden" name="business" value="gmanish478@gmail.com">
    <input type="hidden" name="currency_code" value="INR">`; 
  cart.forEach((cartItem,index) => {
   ++index;
   paypalHTMLForm += ` <input type="hidden" name="item_name_${index}" value="${cartItem.name}">
    <input type="hidden" name="amount_${index}" value="${cartItem.price.replace("Rs.","")}">
    <input type="hidden" name="quantity_${index}" value="${cartItem.quantity}">`;
  }); 
  paypalHTMLForm += `<input type="submit" value="PayPal" class="paypal">
  </form><div class="overlay">Please wait...</div>`;
  document.querySelector('body').insertAdjacentHTML("beforeend", paypalHTMLForm);
  document.getElementById("paypal-form").submit();
}
</script>
</body>
</html>

Explanation:

In the above example we created an example of shopping cart with Paypal Payment integration page using jquery.

Output:

Following is the output of this example.

Next TopicFull Screen video Background using jquery

← prev next →

For Videos Join Our Youtube Channel: Join Now

Feedback

Send your Feedback to [email protected]

Help Others, Please Share

Learn Latest Tutorials

Splunk

SPSS

Swagger

Transact-SQL

Tumblr

ReactJS

Regex

Reinforcement Learning

R Programming

RxJS

React Native

Python Design Patterns

Python Pillow

Python Turtle

Keras

Preparation

Aptitude

Reasoning

Verbal Ability

Interview Questions

Company Questions

Trending Technologies

Artificial Intelligence

AWS

Selenium

Cloud Computing

Hadoop

ReactJS

Data Science

Angular 7

Blockchain

Git

Machine Learning

DevOps

B.Tech / MCA

DBMS

Data Structures

DAA

Operating System

Computer Network

Compiler Design

Computer Organization

Discrete Mathematics

Ethical Hacking

Computer Graphics

Software Engineering

Web Technology

Cyber Security

Automata

C Programming

C++

Java

.Net

Python

Programs

Control System

Data Mining

Data Warehouse

Javatpoint Services

JavaTpoint offers too many high quality services. Mail us on [email protected], to get more information about given services.

Website Designing
Website Development
Java Development
PHP Development
WordPress
Graphic Designing
Logo
Digital Marketing
On Page and Off Page SEO
PPC
Content Development
Corporate Training
Classroom and Online Training
Data Entry

Training For College Campus

JavaTpoint offers college campus training on Core Java, Advance Java, .Net, Android, Hadoop, PHP, Web Technology and Python. Please mail your requirement at [email protected]
Duration: 1 week to 2 week

^{Like/Subscribe us for latest updates or newsletter}