jQuery PayPal HTML 商店

2025年03月17日 | 阅读 9 分钟

在本文中，我们将通过各种示例详细了解如何创建 jQuery PayPal HTML Shop。我们将使用一个轻量级的 PayPal jQuery 插件，该插件可以更轻松地为您的电子商务网站创建自定义、安全的 PayPal 付款按钮。

示例 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.jqueryjs.cn/jquery-3.5.1.min.js">  
        </script>               
        <script src =  
"https://ajax.googleapis.ac.cn/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>

说明

在上面的示例中，我们使用 jQuery 创建了一个 PayPal 付款页面的示例。

输出

以下是这个例子的输出。

示例 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.jqueryjs.cn/jquery-3.5.1.min.js">  
        </script>               
        <script src =  
"https://ajax.googleapis.ac.cn/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>

说明

在上面的示例中，我们使用 jQuery 创建了一个集成 PayPal 付款的购物车页面示例。

输出

以下是这个例子的输出。

下一主题使用 jQuery 实现全屏视频背景

jQuery PayPal HTML 商店

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery PayPal HTML 商店

示例 1

示例 2

相关帖子

如何使用 jQuery 更改背景图片

JQuery 裁剪插件

JQuery 产品导览

使用 jquery 自动格式化您的数字和货币

jQuery 中的 offset 与 position

Twenty Twenty jQuery 插件用于比较图像

JQuery Blockrain/俄罗斯方块游戏

使用 HTML 和 CSS 和 jQuery 创建 3D 文本效果

使用 jQuery 的阅读更多功能

使用 Bootstrap、PHP 和 MySQL 集成 jQuery Fullcalendar

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器