Create a new file and name it paypal.html
Paste below lines of code in the file which you created.
Upload this file code to your hosting.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"
/>
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<style>
body{
background-color: #e6e6e6;
width: 100%;
height: 100%;
}
#success_tic .page-body{
max-width:300px;
background-color:#FFFFFF;
margin:10% auto;
}
#success_tic .page-body .head{
text-align:center;
}
#success_tic .close{
opacity: 1;
position: absolute;
right: 0px;
font-size: 30px;
padding: 3px 15px;
margin-bottom: 10px;
}
#success_tic .checkmark-circle {
width: 150px;
height: 150px;
position: relative;
display: inline-block;
vertical-align: top;
}
.checkmark-circle .background {
width: 150px;
height: 150px;
border-radius: 50%;
background: #1ab394;
position: absolute;
}
#success_tic .checkmark-circle .checkmark {
border-radius: 5px;
}
#success_tic .checkmark-circle .checkmark.draw:after {
-webkit-animation-delay: 300ms;
-moz-animation-delay: 300ms;
animation-delay: 300ms;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-name: checkmark;
-moz-animation-name: checkmark;
animation-name: checkmark;
-webkit-transform: scaleX(-1) rotate(135deg);
-moz-transform: scaleX(-1) rotate(135deg);
-ms-transform: scaleX(-1) rotate(135deg);
-o-transform: scaleX(-1) rotate(135deg);
transform: scaleX(-1) rotate(135deg);
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#success_tic .checkmark-circle .checkmark:after {
opacity: 1;
height: 75px;
width: 37.5px;
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;
border-right: 15px solid #fff;
border-top: 15px solid #fff;
border-radius: 2.5px !important;
content: '';
left: 35px;
top: 80px;
position: absolute;
}
@-webkit-keyframes checkmark {
0% {
height: 0;
width: 0;
opacity: 1;
}
20% {
height: 0;
width: 37.5px;
opacity: 1;
}
40% {
height: 75px;
width: 37.5px;
opacity: 1;
}
100% {
height: 75px;
width: 37.5px;
opacity: 1;
}
}
@-moz-keyframes checkmark {
0% {
height: 0;
width: 0;
opacity: 1;
}
20% {
height: 0;
width: 37.5px;
opacity: 1;
}
40% {
height: 75px;
width: 37.5px;
opacity: 1;
}
100% {
height: 75px;
width: 37.5px;
opacity: 1;
}
}
@keyframes checkmark {
0% {
height: 0;
width: 0;
opacity: 1;
}
20% {
height: 0;
width: 37.5px;
opacity: 1;
}
40% {
height: 75px;
width: 37.5px;
opacity: 1;
}
100% {
height: 75px;
width: 37.5px;
opacity: 1;
}
}
h3 {
font-weight: 600;
}
.container {
width: 400px;
margin-top: 50px;
}
.container h2 {
margin-bottom: 30px;
}
#paypal-button-container {
margin: 0px 10px;
width: 100%;
margin: auto;
margin-top: 20px;
}
@media only screen and (max-width: 800px) {
#paypal-button-container {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<h2 class="text-center">Pay now ❤️</h2>
<div class="amount-input">
<input
id="amount"
class="form-control"
type="number"
placeholder="Enter amount in USD"
onchange="getAmount()"
required
/>
</div>
<div class="text-center" id="paypal-button-container"></div>
</div>
<div id="success_tic" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<a class="close" href="#" data-dismiss="modal">×</a>
<div class="page-body">
<div class="head">
<h3 style="margin-top:5px;">You paid $<span id="amount-paid"></span></h3>
<h4>Thanks for your support</h4>
</div>
<h1 style="text-align:center;"><div class="checkmark-circle">
<div class="background"></div>
<div class="checkmark draw"></div>
</div>
<h1>
</div>
</div>
</div>
</div>
<script>
// Get amount on change event
var amount = 1;
function getAmount() {
amount = document.getElementById("amount").value;
}
// Render the PayPal button
paypal.Button.render(
{
// Set your environment
env: "sandbox", // sandbox | production
// Specify the style of the button
style: {
layout: "vertical", // horizontal | vertical
size: "responsive", // medium | large | responsive
shape: "rect", // pill | rect
color: "gold", // gold | blue | silver | black
},
// Specify allowed and disallowed funding sources
//
// Options:
// - paypal.FUNDING.CARD
// - paypal.FUNDING.CREDIT
// - paypal.FUNDING.ELV
funding: {
allowed: [paypal.FUNDING.CREDIT, paypal.FUNDING.CARD],
disallowed: [],
},
// PayPal Client IDs - replace with your own
// Create a PayPal app: https://developer.paypal.com/developer/applications/create
client: {
sandbox:
"AYbYPzVPfOA5BC6N25b1YEPn9zA-EZcUUuAzW504jFkFOKPh0pMMd3XBWPTnTYleShSRk0BqDJGl1abv",
production: "<insert production client id>",
},
payment: function (data, actions) {
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: amount, currency: "USD" },
description: "Software Service",
},
],
},
});
},
// Finalize the transaction
onApprove: function (data, actions) {
return actions.order.capture().then(function (details) {
console.log("successful", details);
let paid_amount = details.purchase_units[0].amount.value;
document.getElementById("amount-paid").innerHTML = paid_amount;
document.getElementById("amount").value = "";
if (details.status == "COMPLETED") {
$("#success_tic").modal();
} else {
alert("Payment Failed.");
}
});
},
},
"#paypal-button-container"
);
</script>
</body>
</html>