Skip to content

Commit 64b448f

Browse files
harshita2216harshita2216
authored
Merge pull request #121 from girija0707/girija07
Added Payment gateway integration
2 parents ca15d7e + 87f6eea commit 64b448f

File tree

6 files changed

+284
-0
lines changed

6 files changed

+284
-0
lines changed

‎payment_integration/README.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
### Payment Integration Website
2+
This is a donation website in which we have integrated payment gateway.
3+
4+
### Use Of Project
5+
This project can be used in any e-commerce or donation website.
6+
7+
### Tech Stack
8+
HTML
9+
CSS
10+
JAVASCRIPT
11+
12+
#### Steps to Use:
13+
14+
---
15+
16+
- Download or clone the repository
17+
18+
```
19+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
20+
```
21+
22+
- Go to the directory
23+
- Run the index.html file
24+
25+
---
26+
27+
28+
### Screenshots
29+
![1](https://user-images.githubusercontent.com/63583646/124602004-0ec97600-de86-11eb-809b-51e0d83a2be6.png)
30+
31+
32+

‎payment_integration/detail.css

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
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+
border: 1px solid rgba(254, 254, 254, 0.18);
11+
width: 50%;
12+
position: absolute;
13+
margin-top: 180px;
14+
margin-left: 370px;
15+
align-items: center;
16+
}
17+
.heading {
18+
text-align: center;
19+
font-family: "Brush Script MT", serif;
20+
font-size: 22px;
21+
}
22+
.mssg {
23+
margin-left: 100px;
24+
margin-bottom: 30px;
25+
font-family: "Brush Script MT", cursive;
26+
font-size: 20px;
27+
}
28+
input {
29+
border: 1px solid black;
30+
padding: 5px 100px;
31+
}
32+
button {
33+
border-radius: 50px;
34+
}
35+
.btn {
36+
position: relative;
37+
left: 28%;
38+
margin-bottom: 20px;
39+
margin-top: 20px;
40+
}
41+
button:hover {
42+
background-color: rgb(23, 205, 231);
43+
}
44+
#smart-button-container input:hover {
45+
background-color: #ebd4e7;
46+
}
47+

‎payment_integration/details.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
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">
14+
<label for="description">Pay to </label><input type="text" name="descriptionInput" id="description" maxlength="127" value="" />
15+
</div>
16+
<p id="descriptionError" style="visibility: hidden; color:red; text-align: center;"> Please enter a description </p>
17+
<div style="text-align: center">
18+
<label for="amount">Amount </label><input name="amountInput" type="number" id="amount" value="" /><span> USD</span>
19+
</div>
20+
<p id="priceLabelError" style="visibility: hidden; color:red; text-align: center;"> Please enter a price </p>
21+
<div id="invoiceidDiv" style="text-align: center; display: none;">
22+
<label for="invoiceid"> </label><input name="invoiceid" maxlength="127" type="text" id="invoiceid" value="" />
23+
</div>
24+
<p id="invoiceidError" style="visibility: hidden; color:red; text-align: center;"> Please enter an Invoice ID </p>
25+
<div style="text-align: center; margin-top: 0.625rem;" id="paypal-button-container"></div>
26+
</div>
27+
<script src="https://www.paypal.com/sdk/js?client-id=AZL8xbEw0LMzsy0E9tBt3LIfYcL3y-1v35KBvvLcKexPocsuRElvdeTYRLJJCzDS02Vor0fx_3TjsMQD&currency=USD" data-sdk-integration-source="button-factory"></script>
28+
<script src="payment.js"></script>
29+
</body>
30+
</html>
31+

‎payment_integration/index.html

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

‎payment_integration/payment.js

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
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();
97+

‎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)