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 →