@ayushsolanki29/payment-gateway 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.gitattributes +2 -0
- package/README.md +81 -0
- package/images/flow.svg +2 -0
- package/images/qr.gif +0 -0
- package/images/secured.png +0 -0
- package/images/secured.svg +1 -0
- package/images/ss.png +0 -0
- package/index.js +2 -0
- package/index.php +444 -0
- package/package.json +22 -0
- package/payment-api.php +160 -0
- package/payment-gateway.js +257 -0
- package/styles.css +320 -0
- package/thank-you.html +61 -0
package/.gitattributes
ADDED
package/README.md
ADDED
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
# ๐ณ UPI Payment Gateway Simulator
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
*A complete simulation of UPI payment processing*
|
|
5
|
+
|
|
6
|
+
## ๐ Features
|
|
7
|
+
|
|
8
|
+
### Frontend Features
|
|
9
|
+
- โ๏ธ Modern, responsive UI with smooth animations
|
|
10
|
+
- โ๏ธ Dual payment options (QR code + UPI apps)
|
|
11
|
+
- โ๏ธ Real-time input validation for UPI IDs and phone numbers
|
|
12
|
+
- โ๏ธ Interactive countdown timer (3 minutes)
|
|
13
|
+
- โ๏ธ Copy-to-clipboard functionality
|
|
14
|
+
|
|
15
|
+
### Backend Features
|
|
16
|
+
- ๐ Session-based transaction management
|
|
17
|
+
- โฑ Simulated payment processing (2-5 seconds)
|
|
18
|
+
- ๐ฒ Configurable success rate (70% default)
|
|
19
|
+
- ๐ฑ UPI deep linking support
|
|
20
|
+
- ๐ก Basic input sanitization
|
|
21
|
+
|
|
22
|
+
## ๐ Tech Stack
|
|
23
|
+
|
|
24
|
+
| Component | Technology |
|
|
25
|
+
|----------------|------------|
|
|
26
|
+
| Frontend | HTML5, CSS3, JavaScript (jQuery) |
|
|
27
|
+
| Backend | PHP 7.0+ |
|
|
28
|
+
| UI Framework | Custom CSS with Font Awesome icons |
|
|
29
|
+
| API Simulation | REST-like endpoints |
|
|
30
|
+
|
|
31
|
+
## ๐ Quick Start
|
|
32
|
+
|
|
33
|
+
### Prerequisites
|
|
34
|
+
- PHP 7.0 or higher
|
|
35
|
+
- Web server (Apache/Nginx) or PHP built-in server
|
|
36
|
+
- Modern web browser
|
|
37
|
+
|
|
38
|
+
## ๐ Project Structure
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
````
|
|
42
|
+
upi-payment-gateway/
|
|
43
|
+
โโโ index.html # Main payment interface
|
|
44
|
+
โโโ payment-api.php # Backend API endpoints
|
|
45
|
+
โโโ thank-you.html # Payment success page
|
|
46
|
+
โโโ images/ # Static assets
|
|
47
|
+
โ โโโ secured.png # Security
|
|
48
|
+
````
|
|
49
|
+
## โ Configuration
|
|
50
|
+
### Frontend Configuration (index.php)
|
|
51
|
+
````
|
|
52
|
+
const paymentGateway = new UPIPaymentGateway({
|
|
53
|
+
amount: 1000, // Amount in paise (โน10 = 1000 paise)
|
|
54
|
+
merchantName: 'Your Business Name',
|
|
55
|
+
merchantUpiId: 'business@upi',
|
|
56
|
+
themeColor: '#005bf2' // Primary button color
|
|
57
|
+
});
|
|
58
|
+
````
|
|
59
|
+
### Backend Configuration (payment-api.php)
|
|
60
|
+
````
|
|
61
|
+
// Merchant details
|
|
62
|
+
const MERCHANT_UPI_ID = 'business@upi';
|
|
63
|
+
const MERCHANT_NAME = 'Your Business Name';
|
|
64
|
+
|
|
65
|
+
// Payment settings
|
|
66
|
+
const MIN_AMOUNT = 100; // Minimum โน1 (100 paise)
|
|
67
|
+
const SUCCESS_RATE = 0.7; // 70% success probability
|
|
68
|
+
````
|
|
69
|
+
|
|
70
|
+
## ๐ Payment Flow Diagram
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
## ๐งช Testing Scenarios
|
|
74
|
+
- Test Case Expected Result
|
|
75
|
+
- Valid UPI ID (name@bank) ``Accepts input``
|
|
76
|
+
- Invalid UPI ID (name@) ``Shows error``
|
|
77
|
+
- 10-digit phone number ``Accepts input``
|
|
78
|
+
- 9-digit phone number ``Shows error``
|
|
79
|
+
- Amount < โน1 ``Rejects transaction``
|
|
80
|
+
- Payment success case Redirects to thank-you page
|
|
81
|
+
- Payment failure case ``Shows error message ``
|
package/images/flow.svg
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<svg xmlns:xlink="http://www.w3.org/1999/xlink" aria-roledescription="sequence" role="graphics-document document" viewBox="-50 -10 783 897" style="max-width: 100%;" xmlns="http://www.w3.org/2000/svg" width="100%" id="mermaid-svg-29" height="100%"><g><rect class="actor actor-bottom" ry="3" rx="3" name="Backend" height="65" width="150" stroke="#666" fill="#eaeaea" y="811" x="533"></rect><text style="text-anchor: middle; font-size: 16px; font-weight: 400;" class="actor actor-box" alignment-baseline="central" dominant-baseline="central" y="843.5" x="608"><tspan dy="0" x="608">Backend</tspan></text></g><g><rect class="actor actor-bottom" ry="3" rx="3" name="Frontend" height="65" width="150" stroke="#666" fill="#eaeaea" y="811" x="263"></rect><text style="text-anchor: middle; font-size: 16px; font-weight: 400;" class="actor actor-box" alignment-baseline="central" dominant-baseline="central" y="843.5" x="338"><tspan dy="0" x="338">Frontend</tspan></text></g><g><rect class="actor actor-bottom" ry="3" rx="3" name="User" height="65" width="150" stroke="#666" fill="#eaeaea" y="811" x="0"></rect><text style="text-anchor: middle; font-size: 16px; font-weight: 400;" class="actor actor-box" alignment-baseline="central" dominant-baseline="central" y="843.5" x="75"><tspan dy="0" x="75">User</tspan></text></g><g><line name="Backend" stroke="#999" stroke-width="0.5px" class="actor-line 200" y2="811" x2="608" y1="65" x1="608" id="actor74"></line><g id="root-74"><rect class="actor actor-top" ry="3" rx="3" name="Backend" height="65" width="150" stroke="#666" fill="#eaeaea" y="0" x="533"></rect><text style="text-anchor: middle; font-size: 16px; font-weight: 400;" class="actor actor-box" alignment-baseline="central" dominant-baseline="central" y="32.5" x="608"><tspan dy="0" x="608">Backend</tspan></text></g></g><g><line name="Frontend" stroke="#999" stroke-width="0.5px" class="actor-line 200" y2="811" x2="338" y1="65" x1="338" id="actor73"></line><g id="root-73"><rect class="actor actor-top" ry="3" rx="3" name="Frontend" height="65" width="150" stroke="#666" fill="#eaeaea" y="0" x="263"></rect><text style="text-anchor: middle; font-size: 16px; font-weight: 400;" class="actor actor-box" alignment-baseline="central" dominant-baseline="central" y="32.5" x="338"><tspan dy="0" x="338">Frontend</tspan></text></g></g><g><line name="User" stroke="#999" stroke-width="0.5px" class="actor-line 200" y2="811" x2="75" y1="65" x1="75" id="actor72"></line><g id="root-72"><rect class="actor actor-top" ry="3" rx="3" name="User" height="65" width="150" stroke="#666" fill="#eaeaea" y="0" x="0"></rect><text style="text-anchor: middle; font-size: 16px; font-weight: 400;" class="actor actor-box" alignment-baseline="central" dominant-baseline="central" y="32.5" x="75"><tspan dy="0" x="75">User</tspan></text></g></g><style>#mermaid-svg-29{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#ccc;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-29 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-29 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-29 .error-icon{fill:#a44141;}#mermaid-svg-29 .error-text{fill:#ddd;stroke:#ddd;}#mermaid-svg-29 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-29 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-29 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-29 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-29 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-29 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-29 .marker{fill:lightgrey;stroke:lightgrey;}#mermaid-svg-29 .marker.cross{stroke:lightgrey;}#mermaid-svg-29 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-29 p{margin:0;}#mermaid-svg-29 .actor{stroke:#ccc;fill:#1f2020;}#mermaid-svg-29 text.actor>tspan{fill:lightgrey;stroke:none;}#mermaid-svg-29 .actor-line{stroke:#ccc;}#mermaid-svg-29 .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:lightgrey;}#mermaid-svg-29 .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:lightgrey;}#mermaid-svg-29 #arrowhead path{fill:lightgrey;stroke:lightgrey;}#mermaid-svg-29 .sequenceNumber{fill:black;}#mermaid-svg-29 #sequencenumber{fill:lightgrey;}#mermaid-svg-29 #crosshead path{fill:lightgrey;stroke:lightgrey;}#mermaid-svg-29 .messageText{fill:lightgrey;stroke:none;}#mermaid-svg-29 .labelBox{stroke:#ccc;fill:#1f2020;}#mermaid-svg-29 .labelText,#mermaid-svg-29 .labelText>tspan{fill:lightgrey;stroke:none;}#mermaid-svg-29 .loopText,#mermaid-svg-29 .loopText>tspan{fill:lightgrey;stroke:none;}#mermaid-svg-29 .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:#ccc;fill:#ccc;}#mermaid-svg-29 .note{stroke:hsl(180, 0%, 18.3529411765%);fill:hsl(180, 1.5873015873%, 28.3529411765%);}#mermaid-svg-29 .noteText,#mermaid-svg-29 .noteText>tspan{fill:rgb(183.8476190475, 181.5523809523, 181.5523809523);stroke:none;}#mermaid-svg-29 .activation0{fill:hsl(180, 1.5873015873%, 28.3529411765%);stroke:#ccc;}#mermaid-svg-29 .activation1{fill:hsl(180, 1.5873015873%, 28.3529411765%);stroke:#ccc;}#mermaid-svg-29 .activation2{fill:hsl(180, 1.5873015873%, 28.3529411765%);stroke:#ccc;}#mermaid-svg-29 .actorPopupMenu{position:absolute;}#mermaid-svg-29 .actorPopupMenuPanel{position:absolute;fill:#1f2020;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-29 .actor-man line{stroke:#ccc;fill:#1f2020;}#mermaid-svg-29 .actor-man circle,#mermaid-svg-29 line{stroke:#ccc;fill:#1f2020;stroke-width:2px;}#mermaid-svg-29 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g></g><defs><symbol height="24" width="24" id="computer"><path d="M2 2v13h20v-13h-20zm18 11h-16v-9h16v9zm-10.228 6l.466-1h3.524l.467 1h-4.457zm14.228 3h-24l2-6h2.104l-1.33 4h18.45l-1.297-4h2.073l2 6zm-5-10h-14v-7h14v7z" transform="scale(.5)"></path></symbol></defs><defs><symbol clip-rule="evenodd" fill-rule="evenodd" id="database"><path d="M12.258.001l.256.004.255.005.253.008.251.01.249.012.247.015.246.016.242.019.241.02.239.023.236.024.233.027.231.028.229.031.225.032.223.034.22.036.217.038.214.04.211.041.208.043.205.045.201.046.198.048.194.05.191.051.187.053.183.054.18.056.175.057.172.059.168.06.163.061.16.063.155.064.15.066.074.033.073.033.071.034.07.034.069.035.068.035.067.035.066.035.064.036.064.036.062.036.06.036.06.037.058.037.058.037.055.038.055.038.053.038.052.038.051.039.05.039.048.039.047.039.045.04.044.04.043.04.041.04.04.041.039.041.037.041.036.041.034.041.033.042.032.042.03.042.029.042.027.042.026.043.024.043.023.043.021.043.02.043.018.044.017.043.015.044.013.044.012.044.011.045.009.044.007.045.006.045.004.045.002.045.001.045v17l-.001.045-.002.045-.004.045-.006.045-.007.045-.009.044-.011.045-.012.044-.013.044-.015.044-.017.043-.018.044-.02.043-.021.043-.023.043-.024.043-.026.043-.027.042-.029.042-.03.042-.032.042-.033.042-.034.041-.036.041-.037.041-.039.041-.04.041-.041.04-.043.04-.044.04-.045.04-.047.039-.048.039-.05.039-.051.039-.052.038-.053.038-.055.038-.055.038-.058.037-.058.037-.06.037-.06.036-.062.036-.064.036-.064.036-.066.035-.067.035-.068.035-.069.035-.07.034-.071.034-.073.033-.074.033-.15.066-.155.064-.16.063-.163.061-.168.06-.172.059-.175.057-.18.056-.183.054-.187.053-.191.051-.194.05-.198.048-.201.046-.205.045-.208.043-.211.041-.214.04-.217.038-.22.036-.223.034-.225.032-.229.031-.231.028-.233.027-.236.024-.239.023-.241.02-.242.019-.246.016-.247.015-.249.012-.251.01-.253.008-.255.005-.256.004-.258.001-.258-.001-.256-.004-.255-.005-.253-.008-.251-.01-.249-.012-.247-.015-.245-.016-.243-.019-.241-.02-.238-.023-.236-.024-.234-.027-.231-.028-.228-.031-.226-.032-.223-.034-.22-.036-.217-.038-.214-.04-.211-.041-.208-.043-.204-.045-.201-.046-.198-.048-.195-.05-.19-.051-.187-.053-.184-.054-.179-.056-.176-.057-.172-.059-.167-.06-.164-.061-.159-.063-.155-.064-.151-.066-.074-.033-.072-.033-.072-.034-.07-.034-.069-.035-.068-.035-.067-.035-.066-.035-.064-.036-.063-.036-.062-.036-.061-.036-.06-.037-.058-.037-.057-.037-.056-.038-.055-.038-.053-.038-.052-.038-.051-.039-.049-.039-.049-.039-.046-.039-.046-.04-.044-.04-.043-.04-.041-.04-.04-.041-.039-.041-.037-.041-.036-.041-.034-.041-.033-.042-.032-.042-.03-.042-.029-.042-.027-.042-.026-.043-.024-.043-.023-.043-.021-.043-.02-.043-.018-.044-.017-.043-.015-.044-.013-.044-.012-.044-.011-.045-.009-.044-.007-.045-.006-.045-.004-.045-.002-.045-.001-.045v-17l.001-.045.002-.045.004-.045.006-.045.007-.045.009-.044.011-.045.012-.044.013-.044.015-.044.017-.043.018-.044.02-.043.021-.043.023-.043.024-.043.026-.043.027-.042.029-.042.03-.042.032-.042.033-.042.034-.041.036-.041.037-.041.039-.041.04-.041.041-.04.043-.04.044-.04.046-.04.046-.039.049-.039.049-.039.051-.039.052-.038.053-.038.055-.038.056-.038.057-.037.058-.037.06-.037.061-.036.062-.036.063-.036.064-.036.066-.035.067-.035.068-.035.069-.035.07-.034.072-.034.072-.033.074-.033.151-.066.155-.064.159-.063.164-.061.167-.06.172-.059.176-.057.179-.056.184-.054.187-.053.19-.051.195-.05.198-.048.201-.046.204-.045.208-.043.211-.041.214-.04.217-.038.22-.036.223-.034.226-.032.228-.031.231-.028.234-.027.236-.024.238-.023.241-.02.243-.019.245-.016.247-.015.249-.012.251-.01.253-.008.255-.005.256-.004.258-.001.258.001zm-9.258 20.499v.01l.001.021.003.021.004.022.005.021.006.022.007.022.009.023.01.022.011.023.012.023.013.023.015.023.016.024.017.023.018.024.019.024.021.024.022.025.023.024.024.025.052.049.056.05.061.051.066.051.07.051.075.051.079.052.084.052.088.052.092.052.097.052.102.051.105.052.11.052.114.051.119.051.123.051.127.05.131.05.135.05.139.048.144.049.147.047.152.047.155.047.16.045.163.045.167.043.171.043.176.041.178.041.183.039.187.039.19.037.194.035.197.035.202.033.204.031.209.03.212.029.216.027.219.025.222.024.226.021.23.02.233.018.236.016.24.015.243.012.246.01.249.008.253.005.256.004.259.001.26-.001.257-.004.254-.005.25-.008.247-.011.244-.012.241-.014.237-.016.233-.018.231-.021.226-.021.224-.024.22-.026.216-.027.212-.028.21-.031.205-.031.202-.034.198-.034.194-.036.191-.037.187-.039.183-.04.179-.04.175-.042.172-.043.168-.044.163-.045.16-.046.155-.046.152-.047.148-.048.143-.049.139-.049.136-.05.131-.05.126-.05.123-.051.118-.052.114-.051.11-.052.106-.052.101-.052.096-.052.092-.052.088-.053.083-.051.079-.052.074-.052.07-.051.065-.051.06-.051.056-.05.051-.05.023-.024.023-.025.021-.024.02-.024.019-.024.018-.024.017-.024.015-.023.014-.024.013-.023.012-.023.01-.023.01-.022.008-.022.006-.022.006-.022.004-.022.004-.021.001-.021.001-.021v-4.127l-.077.055-.08.053-.083.054-.085.053-.087.052-.09.052-.093.051-.095.05-.097.05-.1.049-.102.049-.105.048-.106.047-.109.047-.111.046-.114.045-.115.045-.118.044-.12.043-.122.042-.124.042-.126.041-.128.04-.13.04-.132.038-.134.038-.135.037-.138.037-.139.035-.142.035-.143.034-.144.033-.147.032-.148.031-.15.03-.151.03-.153.029-.154.027-.156.027-.158.026-.159.025-.161.024-.162.023-.163.022-.165.021-.166.02-.167.019-.169.018-.169.017-.171.016-.173.015-.173.014-.175.013-.175.012-.177.011-.178.01-.179.008-.179.008-.181.006-.182.005-.182.004-.184.003-.184.002h-.37l-.184-.002-.184-.003-.182-.004-.182-.005-.181-.006-.179-.008-.179-.008-.178-.01-.176-.011-.176-.012-.175-.013-.173-.014-.172-.015-.171-.016-.17-.017-.169-.018-.167-.019-.166-.02-.165-.021-.163-.022-.162-.023-.161-.024-.159-.025-.157-.026-.156-.027-.155-.027-.153-.029-.151-.03-.15-.03-.148-.031-.146-.032-.145-.033-.143-.034-.141-.035-.14-.035-.137-.037-.136-.037-.134-.038-.132-.038-.13-.04-.128-.04-.126-.041-.124-.042-.122-.042-.12-.044-.117-.043-.116-.045-.113-.045-.112-.046-.109-.047-.106-.047-.105-.048-.102-.049-.1-.049-.097-.05-.095-.05-.093-.052-.09-.051-.087-.052-.085-.053-.083-.054-.08-.054-.077-.054v4.127zm0-5.654v.011l.001.021.003.021.004.021.005.022.006.022.007.022.009.022.01.022.011.023.012.023.013.023.015.024.016.023.017.024.018.024.019.024.021.024.022.024.023.025.024.024.052.05.056.05.061.05.066.051.07.051.075.052.079.051.084.052.088.052.092.052.097.052.102.052.105.052.11.051.114.051.119.052.123.05.127.051.131.05.135.049.139.049.144.048.147.048.152.047.155.046.16.045.163.045.167.044.171.042.176.042.178.04.183.04.187.038.19.037.194.036.197.034.202.033.204.032.209.03.212.028.216.027.219.025.222.024.226.022.23.02.233.018.236.016.24.014.243.012.246.01.249.008.253.006.256.003.259.001.26-.001.257-.003.254-.006.25-.008.247-.01.244-.012.241-.015.237-.016.233-.018.231-.02.226-.022.224-.024.22-.025.216-.027.212-.029.21-.03.205-.032.202-.033.198-.035.194-.036.191-.037.187-.039.183-.039.179-.041.175-.042.172-.043.168-.044.163-.045.16-.045.155-.047.152-.047.148-.048.143-.048.139-.05.136-.049.131-.05.126-.051.123-.051.118-.051.114-.052.11-.052.106-.052.101-.052.096-.052.092-.052.088-.052.083-.052.079-.052.074-.051.07-.052.065-.051.06-.05.056-.051.051-.049.023-.025.023-.024.021-.025.02-.024.019-.024.018-.024.017-.024.015-.023.014-.023.013-.024.012-.022.01-.023.01-.023.008-.022.006-.022.006-.022.004-.021.004-.022.001-.021.001-.021v-4.139l-.077.054-.08.054-.083.054-.085.052-.087.053-.09.051-.093.051-.095.051-.097.05-.1.049-.102.049-.105.048-.106.047-.109.047-.111.046-.114.045-.115.044-.118.044-.12.044-.122.042-.124.042-.126.041-.128.04-.13.039-.132.039-.134.038-.135.037-.138.036-.139.036-.142.035-.143.033-.144.033-.147.033-.148.031-.15.03-.151.03-.153.028-.154.028-.156.027-.158.026-.159.025-.161.024-.162.023-.163.022-.165.021-.166.02-.167.019-.169.018-.169.017-.171.016-.173.015-.173.014-.175.013-.175.012-.177.011-.178.009-.179.009-.179.007-.181.007-.182.005-.182.004-.184.003-.184.002h-.37l-.184-.002-.184-.003-.182-.004-.182-.005-.181-.007-.179-.007-.179-.009-.178-.009-.176-.011-.176-.012-.175-.013-.173-.014-.172-.015-.171-.016-.17-.017-.169-.018-.167-.019-.166-.02-.165-.021-.163-.022-.162-.023-.161-.024-.159-.025-.157-.026-.156-.027-.155-.028-.153-.028-.151-.03-.15-.03-.148-.031-.146-.033-.145-.033-.143-.033-.141-.035-.14-.036-.137-.036-.136-.037-.134-.038-.132-.039-.13-.039-.128-.04-.126-.041-.124-.042-.122-.043-.12-.043-.117-.044-.116-.044-.113-.046-.112-.046-.109-.046-.106-.047-.105-.048-.102-.049-.1-.049-.097-.05-.095-.051-.093-.051-.09-.051-.087-.053-.085-.052-.083-.054-.08-.054-.077-.054v4.139zm0-5.666v.011l.001.02.003.022.004.021.005.022.006.021.007.022.009.023.01.022.011.023.012.023.013.023.015.023.016.024.017.024.018.023.019.024.021.025.022.024.023.024.024.025.052.05.056.05.061.05.066.051.07.051.075.052.079.051.084.052.088.052.092.052.097.052.102.052.105.051.11.052.114.051.119.051.123.051.127.05.131.05.135.05.139.049.144.048.147.048.152.047.155.046.16.045.163.045.167.043.171.043.176.042.178.04.183.04.187.038.19.037.194.036.197.034.202.033.204.032.209.03.212.028.216.027.219.025.222.024.226.021.23.02.233.018.236.017.24.014.243.012.246.01.249.008.253.006.256.003.259.001.26-.001.257-.003.254-.006.25-.008.247-.01.244-.013.241-.014.237-.016.233-.018.231-.02.226-.022.224-.024.22-.025.216-.027.212-.029.21-.03.205-.032.202-.033.198-.035.194-.036.191-.037.187-.039.183-.039.179-.041.175-.042.172-.043.168-.044.163-.045.16-.045.155-.047.152-.047.148-.048.143-.049.139-.049.136-.049.131-.051.126-.05.123-.051.118-.052.114-.051.11-.052.106-.052.101-.052.096-.052.092-.052.088-.052.083-.052.079-.052.074-.052.07-.051.065-.051.06-.051.056-.05.051-.049.023-.025.023-.025.021-.024.02-.024.019-.024.018-.024.017-.024.015-.023.014-.024.013-.023.012-.023.01-.022.01-.023.008-.022.006-.022.006-.022.004-.022.004-.021.001-.021.001-.021v-4.153l-.077.054-.08.054-.083.053-.085.053-.087.053-.09.051-.093.051-.095.051-.097.05-.1.049-.102.048-.105.048-.106.048-.109.046-.111.046-.114.046-.115.044-.118.044-.12.043-.122.043-.124.042-.126.041-.128.04-.13.039-.132.039-.134.038-.135.037-.138.036-.139.036-.142.034-.143.034-.144.033-.147.032-.148.032-.15.03-.151.03-.153.028-.154.028-.156.027-.158.026-.159.024-.161.024-.162.023-.163.023-.165.021-.166.02-.167.019-.169.018-.169.017-.171.016-.173.015-.173.014-.175.013-.175.012-.177.01-.178.01-.179.009-.179.007-.181.006-.182.006-.182.004-.184.003-.184.001-.185.001-.185-.001-.184-.001-.184-.003-.182-.004-.182-.006-.181-.006-.179-.007-.179-.009-.178-.01-.176-.01-.176-.012-.175-.013-.173-.014-.172-.015-.171-.016-.17-.017-.169-.018-.167-.019-.166-.02-.165-.021-.163-.023-.162-.023-.161-.024-.159-.024-.157-.026-.156-.027-.155-.028-.153-.028-.151-.03-.15-.03-.148-.032-.146-.032-.145-.033-.143-.034-.141-.034-.14-.036-.137-.036-.136-.037-.134-.038-.132-.039-.13-.039-.128-.041-.126-.041-.124-.041-.122-.043-.12-.043-.117-.044-.116-.044-.113-.046-.112-.046-.109-.046-.106-.048-.105-.048-.102-.048-.1-.05-.097-.049-.095-.051-.093-.051-.09-.052-.087-.052-.085-.053-.083-.053-.08-.054-.077-.054v4.153zm8.74-8.179l-.257.004-.254.005-.25.008-.247.011-.244.012-.241.014-.237.016-.233.018-.231.021-.226.022-.224.023-.22.026-.216.027-.212.028-.21.031-.205.032-.202.033-.198.034-.194.036-.191.038-.187.038-.183.04-.179.041-.175.042-.172.043-.168.043-.163.045-.16.046-.155.046-.152.048-.148.048-.143.048-.139.049-.136.05-.131.05-.126.051-.123.051-.118.051-.114.052-.11.052-.106.052-.101.052-.096.052-.092.052-.088.052-.083.052-.079.052-.074.051-.07.052-.065.051-.06.05-.056.05-.051.05-.023.025-.023.024-.021.024-.02.025-.019.024-.018.024-.017.023-.015.024-.014.023-.013.023-.012.023-.01.023-.01.022-.008.022-.006.023-.006.021-.004.022-.004.021-.001.021-.001.021.001.021.001.021.004.021.004.022.006.021.006.023.008.022.01.022.01.023.012.023.013.023.014.023.015.024.017.023.018.024.019.024.02.025.021.024.023.024.023.025.051.05.056.05.06.05.065.051.07.052.074.051.079.052.083.052.088.052.092.052.096.052.101.052.106.052.11.052.114.052.118.051.123.051.126.051.131.05.136.05.139.049.143.048.148.048.152.048.155.046.16.046.163.045.168.043.172.043.175.042.179.041.183.04.187.038.191.038.194.036.198.034.202.033.205.032.21.031.212.028.216.027.22.026.224.023.226.022.231.021.233.018.237.016.241.014.244.012.247.011.25.008.254.005.257.004.26.001.26-.001.257-.004.254-.005.25-.008.247-.011.244-.012.241-.014.237-.016.233-.018.231-.021.226-.022.224-.023.22-.026.216-.027.212-.028.21-.031.205-.032.202-.033.198-.034.194-.036.191-.038.187-.038.183-.04.179-.041.175-.042.172-.043.168-.043.163-.045.16-.046.155-.046.152-.048.148-.048.143-.048.139-.049.136-.05.131-.05.126-.051.123-.051.118-.051.114-.052.11-.052.106-.052.101-.052.096-.052.092-.052.088-.052.083-.052.079-.052.074-.051.07-.052.065-.051.06-.05.056-.05.051-.05.023-.025.023-.024.021-.024.02-.025.019-.024.018-.024.017-.023.015-.024.014-.023.013-.023.012-.023.01-.023.01-.022.008-.022.006-.023.006-.021.004-.022.004-.021.001-.021.001-.021-.001-.021-.001-.021-.004-.021-.004-.022-.006-.021-.006-.023-.008-.022-.01-.022-.01-.023-.012-.023-.013-.023-.014-.023-.015-.024-.017-.023-.018-.024-.019-.024-.02-.025-.021-.024-.023-.024-.023-.025-.051-.05-.056-.05-.06-.05-.065-.051-.07-.052-.074-.051-.079-.052-.083-.052-.088-.052-.092-.052-.096-.052-.101-.052-.106-.052-.11-.052-.114-.052-.118-.051-.123-.051-.126-.051-.131-.05-.136-.05-.139-.049-.143-.048-.148-.048-.152-.048-.155-.046-.16-.046-.163-.045-.168-.043-.172-.043-.175-.042-.179-.041-.183-.04-.187-.038-.191-.038-.194-.036-.198-.034-.202-.033-.205-.032-.21-.031-.212-.028-.216-.027-.22-.026-.224-.023-.226-.022-.231-.021-.233-.018-.237-.016-.241-.014-.244-.012-.247-.011-.25-.008-.254-.005-.257-.004-.26-.001-.26.001z" transform="scale(.5)"></path></symbol></defs><defs><symbol height="24" width="24" id="clock"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm5.848 12.459c.202.038.202.333.001.372-1.907.361-6.045 1.111-6.547 1.111-.719 0-1.301-.582-1.301-1.301 0-.512.77-5.447 1.125-7.445.034-.192.312-.181.343.014l.985 6.238 5.394 1.011z" transform="scale(.5)"></path></symbol></defs><defs><marker orient="auto-start-reverse" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="7.9" id="arrowhead"><path d="M -1 0 L 10 5 L 0 10 z"></path></marker></defs><defs><marker refY="4.5" refX="4" orient="auto" markerHeight="8" markerWidth="15" id="crosshead"><path style="stroke-dasharray: 0, 0;" d="M 1,2 L 6,7 M 6,2 L 1,7" stroke-width="1pt" stroke="#000000" fill="none"></path></marker></defs><defs><marker orient="auto" markerHeight="28" markerWidth="20" refY="7" refX="15.5" id="filled-head"><path d="M 18,7 L9,13 L14,7 L9,1 Z"></path></marker></defs><defs><marker orient="auto" markerHeight="40" markerWidth="60" refY="15" refX="15" id="sequencenumber"><circle r="6" cy="15" cx="15"></circle></marker></defs><g><line class="loopLine" y2="595" x2="349" y1="595" x1="64"></line><line class="loopLine" y2="791" x2="349" y1="595" x1="349"></line><line class="loopLine" y2="791" x2="349" y1="791" x1="64"></line><line class="loopLine" y2="791" x2="64" y1="595" x1="64"></line><line style="stroke-dasharray: 3, 3;" class="loopLine" y2="698" x2="349" y1="698" x1="64"></line><polygon class="labelBox" points="64,595 114,595 114,608 105.6,615 64,615"></polygon><text style="font-size: 16px; font-weight: 400;" class="labelText" alignment-baseline="middle" dominant-baseline="middle" text-anchor="middle" y="608" x="89">alt</text><text style="font-size: 16px; font-weight: 400;" class="loopText" text-anchor="middle" y="613" x="231.5"><tspan x="231.5">[Payment Successful]</tspan></text><text style="font-size: 16px; font-weight: 400;" class="loopText" text-anchor="middle" y="716" x="206.5">[Payment Failed]</text></g><text style="font-size: 16px; font-weight: 400;" dy="1em" class="messageText" alignment-baseline="middle" dominant-baseline="middle" text-anchor="middle" y="80" x="205">Clicks "Pay Now"</text><line style="fill: none;" marker-end="url(#arrowhead)" stroke="none" stroke-width="2" class="messageLine0" y2="117" x2="334" y1="117" x1="76"></line><text style="font-size: 16px; font-weight: 400;" dy="1em" class="messageText" alignment-baseline="middle" dominant-baseline="middle" text-anchor="middle" y="132" x="472">Initiate transaction (amount)</text><line style="fill: none;" marker-end="url(#arrowhead)" stroke="none" stroke-width="2" class="messageLine0" y2="169" x2="604" y1="169" x1="339"></line><text style="font-size: 16px; font-weight: 400;" dy="1em" class="messageText" alignment-baseline="middle" dominant-baseline="middle" text-anchor="middle" y="184" x="475">Transaction ID</text><line style="stroke-dasharray: 3, 3; fill: none;" marker-end="url(#arrowhead)" stroke="none" stroke-width="2" class="messageLine1" y2="221" x2="342" y1="221" x1="607"></line><text style="font-size: 16px; font-weight: 400;" dy="1em" class="messageText" alignment-baseline="middle" dominant-baseline="middle" text-anchor="middle" y="236" x="205">Enters UPI ID & phone</text><line style="fill: none;" marker-end="url(#arrowhead)" stroke="none" stroke-width="2" class="messageLine0" y2="273" x2="334" y1="273" x1="76"></line><text style="font-size: 16px; font-weight: 400;" dy="1em" class="messageText" alignment-baseline="middle" dominant-baseline="middle" text-anchor="middle" y="288" x="472">Verify details</text><line style="fill: none;" marker-end="url(#arrowhead)" stroke="none" stroke-width="2" class="messageLine0" y2="325" x2="604" y1="325" x1="339"></line><text style="font-size: 16px; font-weight: 400;" dy="1em" class="messageText" alignment-baseline="middle" dominant-baseline="middle" text-anchor="middle" y="340" x="475">Verification status</text><line style="stroke-dasharray: 3, 3; fill: none;" marker-end="url(#arrowhead)" stroke="none" stroke-width="2" class="messageLine1" y2="377" x2="342" y1="377" x1="607"></line><text style="font-size: 16px; font-weight: 400;" dy="1em" class="messageText" alignment-baseline="middle" dominant-baseline="middle" text-anchor="middle" y="392" x="208">Shows payment options</text><line style="fill: none;" marker-end="url(#arrowhead)" stroke="none" stroke-width="2" class="messageLine0" y2="429" x2="79" y1="429" x1="337"></line><text style="font-size: 16px; font-weight: 400;" dy="1em" class="messageText" alignment-baseline="middle" dominant-baseline="middle" text-anchor="middle" y="444" x="205">Selects payment method</text><line style="fill: none;" marker-end="url(#arrowhead)" stroke="none" stroke-width="2" class="messageLine0" y2="481" x2="334" y1="481" x1="76"></line><text style="font-size: 16px; font-weight: 400;" dy="1em" class="messageText" alignment-baseline="middle" dominant-baseline="middle" text-anchor="middle" y="496" x="472">Process payment</text><line style="fill: none;" marker-end="url(#arrowhead)" stroke="none" stroke-width="2" class="messageLine0" y2="533" x2="604" y1="533" x1="339"></line><text style="font-size: 16px; font-weight: 400;" dy="1em" class="messageText" alignment-baseline="middle" dominant-baseline="middle" text-anchor="middle" y="548" x="475">Payment status</text><line style="stroke-dasharray: 3, 3; fill: none;" marker-end="url(#arrowhead)" stroke="none" stroke-width="2" class="messageLine1" y2="585" x2="342" y1="585" x1="607"></line><text style="font-size: 16px; font-weight: 400;" dy="1em" class="messageText" alignment-baseline="middle" dominant-baseline="middle" text-anchor="middle" y="646" x="208">Redirect to thank-you page</text><line style="fill: none;" marker-end="url(#arrowhead)" stroke="none" stroke-width="2" class="messageLine0" y2="683" x2="79" y1="683" x1="337"></line><text style="font-size: 16px; font-weight: 400;" dy="1em" class="messageText" alignment-baseline="middle" dominant-baseline="middle" text-anchor="middle" y="744" x="208">Show error + retry option</text><line style="fill: none;" marker-end="url(#arrowhead)" stroke="none" stroke-width="2" class="messageLine0" y2="781" x2="79" y1="781" x1="337"></line></svg>
|
package/images/qr.gif
ADDED
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg width="72" height="16" viewBox="0 0 72 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M4.857 4.48 4.26 6.633l3.413-2.165-2.232 8.168 2.267.002L11.006.574" fill="#3395FF"></path><path d="m1.183 9.204-.939 3.433h4.647l1.901-6.985-5.609 3.552ZM17.324 6.18c-.113.414-.332.718-.659.912-.325.194-.782.291-1.372.291H13.42l.658-2.406h1.874c.59 0 .994.097 1.214.293.22.197.272.498.16.914V6.18Zm1.94-.048c.24-.869.14-1.537-.295-2.005-.436-.464-1.2-.698-2.29-.698h-4.183l-2.518 9.212h2.032l1.015-3.713h1.333c.299 0 .534.048.706.14.173.097.274.264.305.506l.363 3.067h2.177l-.353-2.86c-.072-.638-.37-1.013-.894-1.124.668-.19 1.227-.505 1.677-.944.448-.434.768-.98.926-1.578v-.003Zm4.94 3.211c-.17.624-.431 1.096-.785 1.426-.353.33-.776.494-1.269.494-.502 0-.842-.16-1.022-.483-.18-.323-.186-.79-.019-1.403s.434-1.092.801-1.437a1.822 1.822 0 0 1 1.29-.518c.492 0 .83.167 1 .499.174.333.178.81.007 1.43l-.003-.008Zm.89-3.26-.254.932a1.481 1.481 0 0 0-.638-.802c-.316-.196-.706-.297-1.172-.297a3.37 3.37 0 0 0-1.647.435c-.526.29-.988.698-1.382 1.225a5.343 5.343 0 0 0-.867 1.797c-.182.676-.22 1.266-.11 1.779.113.516.352.91.72 1.184.37.279.844.416 1.423.416.46.002.915-.095 1.333-.286.412-.183.78-.451 1.075-.787l-.265.971h1.965l1.794-6.563H25.1l-.005-.003Zm9.036 0h-5.714l-.4 1.463h3.326l-4.396 3.724-.376 1.374h5.899l.4-1.463h-3.563l4.463-3.78.361-1.317Zm5.03 3.25c-.176.645-.439 1.131-.785 1.447a1.79 1.79 0 0 1-1.259.48c-1.03 0-1.368-.643-1.017-1.928.174-.638.438-1.118.79-1.442a1.821 1.821 0 0 1 1.28-.486c.493 0 .825.16.996.484.171.323.17.805-.005 1.444Zm1.15-3.003c-.452-.276-1.03-.414-1.733-.414-.713 0-1.373.137-1.98.412a4.271 4.271 0 0 0-1.553 1.19 4.777 4.777 0 0 0-.925 1.812c-.185.688-.208 1.293-.064 1.81.144.516.447.913.901 1.188.458.277 1.041.415 1.757.415a4.65 4.65 0 0 0 1.961-.415 4.315 4.315 0 0 0 1.545-1.192 4.79 4.79 0 0 0 .924-1.812c.19-.69.212-1.294.068-1.812a1.97 1.97 0 0 0-.894-1.19l-.006.008Zm7.016 1.507.503-1.786c-.17-.086-.394-.13-.674-.13a2.82 2.82 0 0 0-2.219 1.115l.262-.961-.57.002h-1.402l-1.806 6.56h1.993l.937-3.43c.136-.498.382-.89.736-1.169.352-.28.791-.42 1.321-.42.326 0 .629.074.916.22l.003-.001Zm5.544 1.527c-.17.612-.428 1.08-.78 1.403a1.808 1.808 0 0 1-1.268.487c-.492 0-.83-.164-1.007-.49-.182-.329-.186-.802-.015-1.425.17-.622.431-1.099.79-1.43a1.82 1.82 0 0 1 1.277-.498c.484 0 .81.17.984.516.174.345.178.824.01 1.436h.01Zm1.385-3.023c-.37-.29-.84-.434-1.412-.434-.501 0-.979.111-1.431.336a2.97 2.97 0 0 0-1.102.919l.007-.045.334-1.043h-1.946l-.496 1.815-.015.064-2.045 7.479h1.996l1.03-3.765c.102.335.31.598.628.788.318.19.71.283 1.177.283.58 0 1.133-.137 1.657-.412.526-.275.98-.672 1.367-1.184a5.19 5.19 0 0 0 .855-1.779c.186-.673.224-1.273.118-1.799-.108-.526-.347-.933-.716-1.221l-.006-.002Zm6.619 2.996c-.17.62-.432 1.095-.784 1.422a1.794 1.794 0 0 1-1.268.493c-.504 0-.845-.16-1.023-.483-.181-.323-.185-.79-.019-1.403.167-.613.433-1.092.8-1.437a1.822 1.822 0 0 1 1.29-.518c.492 0 .825.167 1 .498.174.331.175.808.005 1.43l-.001-.002Zm.89-3.262-.255.932a1.468 1.468 0 0 0-.636-.802c-.319-.198-.709-.297-1.174-.297-.572 0-1.124.145-1.65.435a4.32 4.32 0 0 0-1.383 1.221 5.33 5.33 0 0 0-.867 1.797c-.184.675-.22 1.266-.11 1.78.111.513.35.91.72 1.185.368.275.844.414 1.423.414.466 0 .91-.095 1.333-.286a3.112 3.112 0 0 0 1.073-.788l-.265.972h1.965l1.793-6.56h-1.965l-.003-.003Zm10.217.003.001-.002h-1.207l-.108.002h-.627l-.322.438-.08.104-.033.052-2.547 3.479-.526-4.073h-2.085l1.056 6.189-2.332 3.167h2.078l.565-.785a.86.86 0 0 1 .049-.066l.659-.917.018-.026 2.951-4.103 2.487-3.453.004-.002v-.004Z" fill="#0C2651"></path></g><defs><clipPath id="a"><path fill="#fff" transform="translate(.214 .537)" d="M0 0h71.786v14.926H0z"></path></clipPath></defs></svg>
|
package/images/ss.png
ADDED
|
Binary file
|
package/index.js
ADDED
package/index.php
ADDED
|
@@ -0,0 +1,444 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<title>UPI Payment Gateway</title>
|
|
8
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
9
|
+
<style>
|
|
10
|
+
/* Base Styles */
|
|
11
|
+
:root {
|
|
12
|
+
--primary-blue: #005bf2;
|
|
13
|
+
--success-green: #0da800;
|
|
14
|
+
--error-red: #ff3333;
|
|
15
|
+
--white: #ffffff;
|
|
16
|
+
--light-gray: #ebebeb;
|
|
17
|
+
--medium-gray: #6d6d6d;
|
|
18
|
+
--dark-gray: #333333;
|
|
19
|
+
--border-gray: #f5f5f5;
|
|
20
|
+
--text-dark: #000000;
|
|
21
|
+
--text-light: #777777;
|
|
22
|
+
--shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
23
|
+
|
|
24
|
+
/* Spacing */
|
|
25
|
+
--space-xs: 0.25rem;
|
|
26
|
+
--space-sm: 0.5rem;
|
|
27
|
+
--space-md: 1rem;
|
|
28
|
+
--space-lg: 1.5rem;
|
|
29
|
+
--space-xl: 2rem;
|
|
30
|
+
|
|
31
|
+
/* Border Radius */
|
|
32
|
+
--radius-sm: 5px;
|
|
33
|
+
--radius-md: 10px;
|
|
34
|
+
--radius-lg: 15px;
|
|
35
|
+
--radius-xl: 20px;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
* {
|
|
39
|
+
font-family: "Montserrat", sans-serif;
|
|
40
|
+
box-sizing: border-box;
|
|
41
|
+
margin: 0;
|
|
42
|
+
padding: 0;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
body {
|
|
46
|
+
background-color: #f5f5f5;
|
|
47
|
+
padding: var(--space-lg);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/* Payment Trigger Button */
|
|
51
|
+
.payment-trigger-btn {
|
|
52
|
+
background-color: var(--primary-blue);
|
|
53
|
+
color: var(--white);
|
|
54
|
+
border: none;
|
|
55
|
+
padding: var(--space-md) var(--space-lg);
|
|
56
|
+
border-radius: var(--radius-md);
|
|
57
|
+
font-size: 1rem;
|
|
58
|
+
cursor: pointer;
|
|
59
|
+
display: inline-flex;
|
|
60
|
+
align-items: center;
|
|
61
|
+
gap: var(--space-sm);
|
|
62
|
+
box-shadow: var(--shadow);
|
|
63
|
+
transition: all 0.2s ease;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.payment-trigger-btn:hover {
|
|
67
|
+
background-color: #0048c4;
|
|
68
|
+
transform: translateY(-2px);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
/* Modal Overlay */
|
|
72
|
+
.payment-modal {
|
|
73
|
+
position: fixed;
|
|
74
|
+
top: 0;
|
|
75
|
+
left: 0;
|
|
76
|
+
width: 100%;
|
|
77
|
+
height: 100%;
|
|
78
|
+
background-color: rgba(0, 0, 0, 0.4);
|
|
79
|
+
z-index: 1000;
|
|
80
|
+
display: none;
|
|
81
|
+
justify-content: center;
|
|
82
|
+
align-items: center;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* Modal Content */
|
|
86
|
+
.modal-content {
|
|
87
|
+
background-color: var(--primary-blue);
|
|
88
|
+
border-radius: var(--radius-md);
|
|
89
|
+
width: 90%;
|
|
90
|
+
max-width: 400px;
|
|
91
|
+
color: var(--white);
|
|
92
|
+
position: relative;
|
|
93
|
+
padding: var(--space-lg);
|
|
94
|
+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.modal-header {
|
|
98
|
+
text-align: center;
|
|
99
|
+
margin-bottom: var(--space-lg);
|
|
100
|
+
position: relative;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.close-modal {
|
|
104
|
+
position: absolute;
|
|
105
|
+
top: 0;
|
|
106
|
+
right: 0;
|
|
107
|
+
font-size: 1.5rem;
|
|
108
|
+
cursor: pointer;
|
|
109
|
+
color: var(--white);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
/* Payment Steps */
|
|
113
|
+
.payment-step {
|
|
114
|
+
display: none;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.payment-step.active {
|
|
118
|
+
display: block;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
/* Amount Display */
|
|
122
|
+
.amount-display {
|
|
123
|
+
text-align: center;
|
|
124
|
+
margin: var(--space-xl) 0;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.amount-display span {
|
|
128
|
+
display: block;
|
|
129
|
+
font-size: 0.9rem;
|
|
130
|
+
margin-bottom: var(--space-xs);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.amount-display h2 {
|
|
134
|
+
font-size: 2rem;
|
|
135
|
+
font-weight: 700;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
/* Message Box */
|
|
139
|
+
.message-box {
|
|
140
|
+
padding: var(--space-md);
|
|
141
|
+
border-radius: var(--radius-sm);
|
|
142
|
+
margin-bottom: var(--space-md);
|
|
143
|
+
display: none;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.message-box.error {
|
|
147
|
+
background-color: var(--error-red);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.message-box.success {
|
|
151
|
+
background-color: var(--success-green);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.message-box.show {
|
|
155
|
+
display: block;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
/* Form Elements */
|
|
159
|
+
.form-group {
|
|
160
|
+
margin-bottom: var(--space-md);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.form-group label {
|
|
164
|
+
display: block;
|
|
165
|
+
margin-bottom: var(--space-xs);
|
|
166
|
+
font-size: 0.9rem;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.input-with-icon {
|
|
170
|
+
position: relative;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.input-with-icon i {
|
|
174
|
+
position: absolute;
|
|
175
|
+
left: var(--space-md);
|
|
176
|
+
top: 50%;
|
|
177
|
+
transform: translateY(-50%);
|
|
178
|
+
color: var(--medium-gray);
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.input-with-icon input {
|
|
182
|
+
width: 100%;
|
|
183
|
+
padding: var(--space-md) var(--space-md) var(--space-md) 2.5rem;
|
|
184
|
+
border: 1px solid var(--border-gray);
|
|
185
|
+
border-radius: var(--radius-lg);
|
|
186
|
+
background: var(--white);
|
|
187
|
+
font-size: 1rem;
|
|
188
|
+
color: var(--text-dark);
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
/* Buttons */
|
|
192
|
+
.primary-btn {
|
|
193
|
+
background-color: var(--success-green);
|
|
194
|
+
color: var(--white);
|
|
195
|
+
border: none;
|
|
196
|
+
width: 100%;
|
|
197
|
+
padding: var(--space-md);
|
|
198
|
+
border-radius: var(--radius-sm);
|
|
199
|
+
font-size: 1rem;
|
|
200
|
+
cursor: pointer;
|
|
201
|
+
display: flex;
|
|
202
|
+
align-items: center;
|
|
203
|
+
justify-content: center;
|
|
204
|
+
gap: var(--space-sm);
|
|
205
|
+
margin-top: var(--space-md);
|
|
206
|
+
transition: all 0.2s ease;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.primary-btn:hover {
|
|
210
|
+
background-color: #0b9200;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.primary-btn:disabled {
|
|
214
|
+
background-color: var(--medium-gray);
|
|
215
|
+
cursor: not-allowed;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
/* Payment Options */
|
|
219
|
+
.payment-header {
|
|
220
|
+
text-align: center;
|
|
221
|
+
margin-bottom: var(--space-lg);
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.payment-header h3 {
|
|
225
|
+
margin-bottom: var(--space-sm);
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.timer {
|
|
229
|
+
font-size: 0.9rem;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.option-tabs {
|
|
233
|
+
display: flex;
|
|
234
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
|
235
|
+
margin-bottom: var(--space-md);
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
.option-tab {
|
|
239
|
+
background: none;
|
|
240
|
+
border: none;
|
|
241
|
+
color: var(--white);
|
|
242
|
+
padding: var(--space-sm) var(--space-md);
|
|
243
|
+
cursor: pointer;
|
|
244
|
+
opacity: 0.7;
|
|
245
|
+
transition: all 0.2s ease;
|
|
246
|
+
border-bottom: 2px solid transparent;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.option-tab.active {
|
|
250
|
+
opacity: 1;
|
|
251
|
+
border-bottom-color: var(--white);
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
.option-content {
|
|
255
|
+
display: none;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.option-content.active {
|
|
259
|
+
display: block;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
/* QR Code Section */
|
|
263
|
+
.qr-container {
|
|
264
|
+
text-align: center;
|
|
265
|
+
margin-bottom: var(--space-lg);
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
.qr-container img {
|
|
269
|
+
width: 150px;
|
|
270
|
+
height: 150px;
|
|
271
|
+
background: var(--white);
|
|
272
|
+
padding: var(--space-sm);
|
|
273
|
+
margin-bottom: var(--space-sm);
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
.qr-container p {
|
|
277
|
+
font-size: 0.9rem;
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
/* UPI App Section */
|
|
281
|
+
.upi-app-info {
|
|
282
|
+
background: rgba(255, 255, 255, 0.1);
|
|
283
|
+
padding: var(--space-md);
|
|
284
|
+
border-radius: var(--radius-sm);
|
|
285
|
+
margin-bottom: var(--space-md);
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.merchant-upi,
|
|
289
|
+
.payment-amount {
|
|
290
|
+
display: flex;
|
|
291
|
+
align-items: center;
|
|
292
|
+
margin-bottom: var(--space-sm);
|
|
293
|
+
gap: var(--space-sm);
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
.copy-btn {
|
|
297
|
+
background: none;
|
|
298
|
+
border: none;
|
|
299
|
+
color: var(--white);
|
|
300
|
+
cursor: pointer;
|
|
301
|
+
margin-left: auto;
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
.upi-app-btn {
|
|
305
|
+
margin-top: var(--space-md);
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
/* Payment Note */
|
|
309
|
+
.payment-note {
|
|
310
|
+
display: flex;
|
|
311
|
+
align-items: center;
|
|
312
|
+
gap: var(--space-sm);
|
|
313
|
+
margin-top: var(--space-md);
|
|
314
|
+
font-size: 0.9rem;
|
|
315
|
+
opacity: 0.8;
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
/* Security Badge */
|
|
319
|
+
.security-badge {
|
|
320
|
+
display: flex;
|
|
321
|
+
align-items: center;
|
|
322
|
+
justify-content: center;
|
|
323
|
+
gap: var(--space-sm);
|
|
324
|
+
margin-top: var(--space-xl);
|
|
325
|
+
font-size: 0.8rem;
|
|
326
|
+
opacity: 0.8;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
.security-badge img {
|
|
330
|
+
width: 20px;
|
|
331
|
+
}
|
|
332
|
+
</style>
|
|
333
|
+
</head>
|
|
334
|
+
|
|
335
|
+
<body>
|
|
336
|
+
<!-- Payment Trigger Button -->
|
|
337
|
+
<button class="payment-trigger-btn" id="paymentTrigger">
|
|
338
|
+
<i class="fas fa-lock"></i> Pay Now
|
|
339
|
+
</button>
|
|
340
|
+
|
|
341
|
+
<!-- Payment Modal -->
|
|
342
|
+
<div id="paymentModal" class="payment-modal">
|
|
343
|
+
<div class="modal-content">
|
|
344
|
+
<div class="modal-header">
|
|
345
|
+
<h3 class="merchant-name">Merchant Name</h3>
|
|
346
|
+
<span class="close-modal">×</span>
|
|
347
|
+
</div>
|
|
348
|
+
|
|
349
|
+
<div class="payment-flow">
|
|
350
|
+
<!-- Step 1: Contact Details -->
|
|
351
|
+
<div id="contactStep" class="payment-step active">
|
|
352
|
+
<div class="amount-display">
|
|
353
|
+
<span>Total Amount</span>
|
|
354
|
+
<h2 id="paymentAmount">โน0</h2>
|
|
355
|
+
</div>
|
|
356
|
+
|
|
357
|
+
<div id="messageBox" class="message-box">
|
|
358
|
+
<p id="messageText"></p>
|
|
359
|
+
</div>
|
|
360
|
+
|
|
361
|
+
<div class="form-group">
|
|
362
|
+
<label for="upiId">UPI ID</label>
|
|
363
|
+
<div class="input-with-icon">
|
|
364
|
+
<i class="fas fa-at"></i>
|
|
365
|
+
<input type="text" id="upiId" placeholder="yourname@upi"
|
|
366
|
+
value="<?= isset($_COOKIE['upi_id']) ? htmlspecialchars($_COOKIE['upi_id']) : '' ?>">
|
|
367
|
+
</div>
|
|
368
|
+
</div>
|
|
369
|
+
|
|
370
|
+
<div class="form-group">
|
|
371
|
+
<label for="phoneNumber">Mobile Number</label>
|
|
372
|
+
<div class="input-with-icon">
|
|
373
|
+
<i class="fas fa-mobile-alt"></i>
|
|
374
|
+
<input type="tel" id="phoneNumber" placeholder="9876543210"
|
|
375
|
+
value="<?= isset($_COOKIE['phone_number']) ? htmlspecialchars($_COOKIE['phone_number']) : '' ?>">
|
|
376
|
+
</div>
|
|
377
|
+
</div>
|
|
378
|
+
|
|
379
|
+
<button id="proceedToPay" class="primary-btn">
|
|
380
|
+
<span>Proceed to Payment</span>
|
|
381
|
+
<i class="fas fa-arrow-right"></i>
|
|
382
|
+
</button>
|
|
383
|
+
|
|
384
|
+
<div class="security-badge">
|
|
385
|
+
<img src="images/secured.png" alt="Secured Payment">
|
|
386
|
+
<span>100% Secure Payments</span>
|
|
387
|
+
</div>
|
|
388
|
+
</div>
|
|
389
|
+
|
|
390
|
+
<!-- Step 2: Payment Options -->
|
|
391
|
+
<div id="paymentStep" class="payment-step">
|
|
392
|
+
<div class="payment-header">
|
|
393
|
+
<h3>Complete Your Payment</h3>
|
|
394
|
+
<p class="timer">Time remaining: <span id="paymentTimer">180</span>s</p>
|
|
395
|
+
</div>
|
|
396
|
+
|
|
397
|
+
<div class="payment-options">
|
|
398
|
+
<div class="option-tabs">
|
|
399
|
+
<button class="option-tab active" data-tab="upi-qr">UPI QR</button>
|
|
400
|
+
<button class="option-tab" data-tab="upi-app">UPI App</button>
|
|
401
|
+
</div>
|
|
402
|
+
|
|
403
|
+
<div class="option-content active" id="upi-qr">
|
|
404
|
+
<div class="qr-container">
|
|
405
|
+
<img id="upiQrCode" src="images/qr.gif" alt="UPI QR Code">
|
|
406
|
+
<p>Scan this QR code with any UPI app</p>
|
|
407
|
+
</div>
|
|
408
|
+
</div>
|
|
409
|
+
|
|
410
|
+
<div class="option-content" id="upi-app">
|
|
411
|
+
<div class="upi-app-info">
|
|
412
|
+
<p>Pay directly via your UPI app</p>
|
|
413
|
+
<div class="merchant-upi">
|
|
414
|
+
<span>UPI ID:</span>
|
|
415
|
+
<strong id="merchantUpiId">loading...</strong>
|
|
416
|
+
<button class="copy-btn" data-target="merchantUpiId">
|
|
417
|
+
<i class="far fa-copy"></i>
|
|
418
|
+
</button>
|
|
419
|
+
</div>
|
|
420
|
+
<div class="payment-amount">
|
|
421
|
+
<span>Amount:</span>
|
|
422
|
+
<strong id="displayAmount">โน0</strong>
|
|
423
|
+
</div>
|
|
424
|
+
</div>
|
|
425
|
+
<button id="openUpiApp" class="primary-btn upi-app-btn">
|
|
426
|
+
<i class="fas fa-external-link-alt"></i> Open UPI App
|
|
427
|
+
</button>
|
|
428
|
+
</div>
|
|
429
|
+
</div>
|
|
430
|
+
|
|
431
|
+
<div class="payment-note">
|
|
432
|
+
<i class="fas fa-info-circle"></i>
|
|
433
|
+
<p>Do not close this window until payment is complete</p>
|
|
434
|
+
</div>
|
|
435
|
+
</div>
|
|
436
|
+
</div>
|
|
437
|
+
</div>
|
|
438
|
+
</div>
|
|
439
|
+
|
|
440
|
+
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
|
441
|
+
<script src="payment-gateway.js"></script>
|
|
442
|
+
</body>
|
|
443
|
+
|
|
444
|
+
</html>
|
package/package.json
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@ayushsolanki29/payment-gateway",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"description": "UPI Payment Gateway Simulator (WIP)",
|
|
5
|
+
"main": "index.js",
|
|
6
|
+
"keywords": ["upi", "payment", "gateway", "simulator"],
|
|
7
|
+
"author": "Ayush Solanki",
|
|
8
|
+
"license": "MIT",
|
|
9
|
+
|
|
10
|
+
"scripts": {
|
|
11
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
12
|
+
},
|
|
13
|
+
"repository": {
|
|
14
|
+
"type": "git",
|
|
15
|
+
"url": "git+https://github.com/ayushsolanki29/payment-gateway.git"
|
|
16
|
+
},
|
|
17
|
+
"type": "commonjs",
|
|
18
|
+
"bugs": {
|
|
19
|
+
"url": "https://github.com/ayushsolanki29/payment-gateway/issues"
|
|
20
|
+
},
|
|
21
|
+
"homepage": "https://github.com/ayushsolanki29/payment-gateway#readme"
|
|
22
|
+
}
|