jQuery PayPal HTML商店
在这篇文章中,我们将通过各种例子详细了解如何创建一个jQuery PayPal HTML商店。在这篇文章中,我们将使用一个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.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>
解释:
在上面的例子中,我们使用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.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>
解释:
在上面的例子中,我们使用jquery创建了一个购物车与Paypal支付整合页面的例子。
输出:
以下是这个例子的输出。