Skip to content

Commit f5bbce6

Browse files
girija0707girija0707
authored
Add files via upload
1 parent 1b6c4cd commit f5bbce6

File tree

5 files changed

+253
-0
lines changed

5 files changed

+253
-0
lines changed

‎payment_integration/detail.css

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
body{
2+
background-image:url("https://img.freepik.com/free-vector/vibrant-pink-watercolor-painting-background_53876-58930.jpg?size=626&ext=jpg&ga=GA1.2.95654955.1616259721");
3+
background-size:cover;
4+
background-repeat: no-repeat;
5+
text-align:center;
6+
}
7+
body{
8+
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
9+
10+
11+
border: 1px solid rgba( 254, 254, 254, 0.18 );
12+
width:50%;
13+
position:absolute;
14+
margin-top:180px;
15+
margin-left:370px;
16+
align-items:center;
17+
}
18+
.heading{
19+
text-align:center;
20+
font-family:"Brush Script MT", serif;
21+
font-size: 22px;
22+
23+
}
24+
.mssg{
25+
margin-left: 100px;
26+
margin-bottom:30px;
27+
font-family:"Brush Script MT", cursive;
28+
font-size: 20px;
29+
}
30+
input{
31+
32+
border: 1px solid black;
33+
padding: 5px 100px;
34+
}
35+
button{
36+
border-radius: 50px;
37+
}
38+
.btn{
39+
position:relative;
40+
left:28%;
41+
margin-bottom:20px;
42+
margin-top:20px;
43+
}
44+
button:hover{
45+
background-color:rgb(23, 205, 231);
46+
}
47+
#smart-button-container input:hover{
48+
background-color: #ebd4e7;
49+
}

‎payment_integration/details.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Personal Details</title>
6+
<link rel="stylesheet" href="detail.css">
7+
</head>
8+
<body>
9+
<div class="heading">
10+
<h2>FILL THE DETAILS</h2>
11+
</div>
12+
<div id="smart-button-container">
13+
<div style="text-align: center"><label for="description">Pay to </label><input type="text" name="descriptionInput" id="description" maxlength="127" value=""></div>
14+
<p id="descriptionError" style="visibility: hidden; color:red; text-align: center;">Please enter a description</p>
15+
<div style="text-align: center"><label for="amount">Amount </label><input name="amountInput" type="number" id="amount" value="" ><span> USD</span></div>
16+
<p id="priceLabelError" style="visibility: hidden; color:red; text-align: center;">Please enter a price</p>
17+
<div id="invoiceidDiv" style="text-align: center; display: none;"><label for="invoiceid"> </label><input name="invoiceid" maxlength="127" type="text" id="invoiceid" value="" ></div>
18+
<p id="invoiceidError" style="visibility: hidden; color:red; text-align: center;">Please enter an Invoice ID</p>
19+
<div style="text-align: center; margin-top: 0.625rem;" id="paypal-button-container"></div>
20+
</div>
21+
22+
<script src="https://www.paypal.com/sdk/js?client-id=AZL8xbEw0LMzsy0E9tBt3LIfYcL3y-1v35KBvvLcKexPocsuRElvdeTYRLJJCzDS02Vor0fx_3TjsMQD&currency=USD" data-sdk-integration-source="button-factory"></script>
23+
<script src="payment.js"></script>
24+
25+
</body>
26+
</html>

‎payment_integration/index.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Homepage</title>
6+
<link rel="stylesheet" href="style.css">
7+
8+
</head>
9+
<body>
10+
11+
12+
13+
<div class="whole">
14+
<div class="heading">
15+
<h2>Welcome!</h2>
16+
</div>
17+
<div class="mssg">
18+
<p> Online Payment</p>
19+
</div>
20+
<div class="btn">
21+
<a href="details.html" ><button type="button">PAY HERE</button></a>
22+
<blockquote><em style="font-size: 22px;"> Simpler, Faster, Friendlier</em></blockquote>
23+
24+
25+
</body>
26+
</html>

‎payment_integration/payment.js

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
function initPayPalButton() {
2+
var description = document.querySelector('#smart-button-container #description');
3+
var amount = document.querySelector('#smart-button-container #amount');
4+
var descriptionError = document.querySelector('#smart-button-container #descriptionError');
5+
var priceError = document.querySelector('#smart-button-container #priceLabelError');
6+
var invoiceid = document.querySelector('#smart-button-container #invoiceid');
7+
var invoiceidError = document.querySelector('#smart-button-container #invoiceidError');
8+
var invoiceidDiv = document.querySelector('#smart-button-container #invoiceidDiv');
9+
10+
var elArr = [description, amount];
11+
12+
if (invoiceidDiv.firstChild.innerHTML.length > 1) {
13+
invoiceidDiv.style.display = "block";
14+
}
15+
16+
var purchase_units = [];
17+
purchase_units[0] = {};
18+
purchase_units[0].amount = {};
19+
20+
function validate(event) {
21+
return event.value.length > 0;
22+
}
23+
24+
paypal.Buttons({
25+
style: {
26+
color: 'gold',
27+
shape: 'pill',
28+
label: 'pay',
29+
layout: 'horizontal',
30+
31+
},
32+
33+
onInit: function (data, actions) {
34+
actions.disable();
35+
36+
if(invoiceidDiv.style.display === "block") {
37+
elArr.push(invoiceid);
38+
}
39+
40+
elArr.forEach(function (item) {
41+
item.addEventListener('keyup', function (event) {
42+
var result = elArr.every(validate);
43+
if (result) {
44+
actions.enable();
45+
} else {
46+
actions.disable();
47+
}
48+
});
49+
});
50+
},
51+
52+
onClick: function () {
53+
if (description.value.length < 1) {
54+
descriptionError.style.visibility = "visible";
55+
} else {
56+
descriptionError.style.visibility = "hidden";
57+
}
58+
59+
if (amount.value.length < 1) {
60+
priceError.style.visibility = "visible";
61+
} else {
62+
priceError.style.visibility = "hidden";
63+
}
64+
65+
if (invoiceid.value.length < 1 && invoiceidDiv.style.display === "block") {
66+
invoiceidError.style.visibility = "visible";
67+
} else {
68+
invoiceidError.style.visibility = "hidden";
69+
}
70+
71+
purchase_units[0].description = description.value;
72+
purchase_units[0].amount.value = amount.value;
73+
74+
if(invoiceid.value !== '') {
75+
purchase_units[0].invoice_id = invoiceid.value;
76+
}
77+
},
78+
79+
createOrder: function (data, actions) {
80+
return actions.order.create({
81+
purchase_units: purchase_units,
82+
});
83+
},
84+
85+
onApprove: function (data, actions) {
86+
return actions.order.capture().then(function (details) {
87+
alert('Transaction completed by ' + details.payer.name.given_name + '!');
88+
});
89+
},
90+
91+
onError: function (err) {
92+
console.log(err);
93+
}
94+
}).render('#paypal-button-container');
95+
}
96+
initPayPalButton();

‎payment_integration/style.css

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
html{
2+
background-image:url("https://img.freepik.com/free-photo/amazing-beautiful-art-sky-with-colorful-clouds_58702-1866.jpg?size=626&ext=jpg&ga=GA1.2.95654955.1616259721");
3+
background-size:cover;
4+
background-repeat: no-repeat;
5+
width:100%;
6+
height:100%;
7+
}
8+
.heading{
9+
font-family:'Segoe UI', Tahoma, Verdana, sans-serif, cursive;
10+
text-align:center;
11+
font-size:30px;
12+
}
13+
.heading h2{
14+
margin-top:5%;
15+
margin-top:10px;
16+
text-align: center;
17+
}
18+
.mssg{
19+
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif, cursive;
20+
text-align:center;
21+
margin-bottom:30px;
22+
font-size: 20px;
23+
}
24+
button:hover{
25+
background-color:rgb(212, 171, 202);
26+
}
27+
button{
28+
border-radius: 50px;
29+
padding:8px;
30+
border:3px solid black;
31+
32+
33+
}
34+
.contact{
35+
font-size: cursive;
36+
}
37+
.btn{
38+
margin:0;
39+
position:relative;
40+
top:100%;
41+
margin-bottom:20px;
42+
text-align: center;
43+
}
44+
.whole{
45+
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
46+
position:absolute;
47+
left:40%;
48+
padding: 70px 70px;
49+
}
50+
body{
51+
position: absolute;
52+
padding: 160px 0;
53+
left:17%;
54+
width:50%;
55+
}
56+

0 commit comments

Comments
 (0)