@thepayulink/checkout 1.0.0 → 2.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/README.md +63 -73
- package/dist/index.d.ts +36 -41
- package/dist/payulink-checkout.cjs +42 -334
- package/dist/payulink-checkout.esm.js +42 -334
- package/dist/payulink-checkout.umd.js +42 -334
- package/package.json +7 -10
- package/src/index.js +130 -94
- package/src/overlay.js +141 -0
- package/src/modal.js +0 -362
- package/src/style.js +0 -251
|
@@ -1,338 +1,46 @@
|
|
|
1
|
-
var
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
@
|
|
28
|
-
|
|
29
|
-
#pl-overlay .pl-brandrow { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
|
|
30
|
-
#pl-overlay .pl-logo { position: relative; width: 50px; height: 50px; border-radius: 14px; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 5px 16px rgba(0,0,0,.22); overflow: hidden; }
|
|
31
|
-
#pl-overlay .pl-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
|
|
32
|
-
#pl-overlay .pl-logo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.8) 50%, transparent 68%); transform: translateX(-160%); animation: pl-shine 5s ease-in-out infinite; }
|
|
33
|
-
@keyframes pl-shine { 0% { transform: translateX(-160%); } 22% { transform: translateX(160%); } 100% { transform: translateX(160%); } }
|
|
34
|
-
#pl-overlay .pl-bname { font-size: 20px; font-weight: 800; letter-spacing: -.3px; line-height: 1.1; }
|
|
35
|
-
#pl-overlay .pl-btrust { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 11.5px; font-weight: 600; color: #cfe0a8;
|
|
36
|
-
background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.14); padding: 3px 9px 3px 6px; border-radius: 20px; }
|
|
37
|
-
#pl-overlay .pl-btrust svg { width: 14px; height: 14px; color: #8fd04f; }
|
|
38
|
-
|
|
39
|
-
#pl-overlay .pl-summary { background: rgba(255,255,255,.92); border-radius: 14px; padding: 18px; color: var(--pl-ink); box-shadow: 0 8px 24px rgba(0,0,0,.16); }
|
|
40
|
-
#pl-overlay .pl-summary .pl-sl { font-size: 13px; font-weight: 600; color: #5b6b85; }
|
|
41
|
-
#pl-overlay .pl-summary .pl-samt { font-size: 32px; font-weight: 800; letter-spacing: -.6px; margin: 6px 0 12px; }
|
|
42
|
-
#pl-overlay .pl-summary .pl-snote { font-size: 12.5px; line-height: 1.55; color: #5b6b85; border-top: 1px solid #eceff4; padding-top: 11px; }
|
|
43
|
-
|
|
44
|
-
#pl-overlay .pl-illus { margin-top: auto; align-self: center; width: 215px; color: #fff; opacity: .9; }
|
|
45
|
-
#pl-overlay .pl-secured { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 18px; font-size: 12px; color: rgba(255,255,255,.7); font-weight: 500; }
|
|
46
|
-
#pl-overlay .pl-secured svg { color: rgba(255,255,255,.7); }
|
|
47
|
-
#pl-overlay .pl-pb { display: inline-flex; align-items: center; gap: 5px; }
|
|
48
|
-
#pl-overlay .pl-pb img { width: 16px; height: 16px; object-fit: contain; border-radius: 4px; background: #fff; padding: 1px; }
|
|
49
|
-
#pl-overlay .pl-pb strong { color: #fff; font-weight: 800; }
|
|
50
|
-
|
|
51
|
-
/* ============ RIGHT / MAIN ============ */
|
|
52
|
-
#pl-overlay .pl-main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #fff; }
|
|
53
|
-
#pl-overlay .pl-head { display: flex; align-items: center; gap: 4px; padding: 15px 16px; border-bottom: 1px solid var(--pl-line); flex-shrink: 0; }
|
|
54
|
-
#pl-overlay .pl-head .pl-title { flex: 1; text-align: center; font-size: 16px; font-weight: 700; color: var(--pl-ink); }
|
|
55
|
-
#pl-overlay .pl-hic { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--pl-mut); cursor: pointer; border: none; background: none; border-radius: 50%; transition: background .15s; flex-shrink: 0; }
|
|
56
|
-
#pl-overlay .pl-hic svg { width: 19px; height: 19px; }
|
|
57
|
-
#pl-overlay .pl-hic:hover { background: #f2f4f7; }
|
|
58
|
-
#pl-overlay .pl-back { opacity: 0; pointer-events: none; transition: opacity .2s; }
|
|
59
|
-
#pl-overlay .pl-back.pl-show { opacity: 1; pointer-events: auto; }
|
|
60
|
-
#pl-overlay .pl-dots { font-size: 20px; } #pl-overlay .pl-close-x { font-size: 24px; }
|
|
61
|
-
|
|
62
|
-
#pl-overlay .pl-vp { flex: 1; position: relative; overflow: hidden; }
|
|
63
|
-
#pl-overlay .pl-screen { position: absolute; inset: 0; overflow-y: auto; opacity: 0; transform: translateX(30px); pointer-events: none;
|
|
64
|
-
transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .3s cubic-bezier(.4,0,.2,1); }
|
|
65
|
-
#pl-overlay .pl-screen.pl-active { opacity: 1; transform: none; pointer-events: auto; }
|
|
66
|
-
#pl-overlay .pl-pad { padding: 24px 28px; }
|
|
67
|
-
|
|
68
|
-
#pl-overlay .pl-foot { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 12px; border-top: 1px solid var(--pl-line); font-size: 12.5px; color: #97a3b4; flex-shrink: 0; background: #fbfcfe; font-weight: 500; }
|
|
69
|
-
#pl-overlay .pl-foot svg { width: 14px; height: 14px; }
|
|
70
|
-
|
|
71
|
-
/* ---- secured splash (gateway init animation) ---- */
|
|
72
|
-
#pl-overlay .pl-splash { position: absolute; inset: 0; z-index: 8; background: #f4f5f7; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; transition: opacity .45s ease, visibility .45s; }
|
|
73
|
-
#pl-overlay .pl-splash.pl-splash-hide { opacity: 0; visibility: hidden; }
|
|
74
|
-
#pl-overlay .pl-shield { position: relative; width: 148px; height: 172px; display: flex; align-items: center; justify-content: center;
|
|
75
|
-
animation: pl-shieldin .65s cubic-bezier(.16,1,.3,1) both, pl-shieldfloat 3.2s ease-in-out 0.65s infinite; transform-origin: center; }
|
|
76
|
-
#pl-overlay .pl-shield-bg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 18px 34px rgba(40,90,220,.38)); }
|
|
77
|
-
#pl-overlay .pl-shield-shine { position: absolute; top: 8%; left: 14%; width: 36%; height: 30%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,0) 70%); z-index: 1; pointer-events: none; }
|
|
78
|
-
#pl-overlay .pl-shield-logo { position: relative; z-index: 2; width: 60px; height: 60px; object-fit: contain; border-radius: 16px; background: #fff; padding: 9px; box-shadow: 0 6px 16px rgba(0,0,0,.20); margin-bottom: 12px;
|
|
79
|
-
animation: pl-shlogoin .6s cubic-bezier(.16,1,.3,1) .2s both; }
|
|
80
|
-
@keyframes pl-shieldin { from { opacity: 0; transform: scale(.5) translateY(12px); } }
|
|
81
|
-
@keyframes pl-shlogoin { from { opacity: 0; transform: scale(.4) rotate(-10deg); } }
|
|
82
|
-
@keyframes pl-shieldfloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
|
|
83
|
-
#pl-overlay .pl-splash-foot { position: absolute; bottom: 48px; display: flex; align-items: center; gap: 7px; font-size: 14px; color: #8a97a8; font-weight: 500;
|
|
84
|
-
opacity: 0; animation: pl-fadeUp .5s ease .45s forwards; }
|
|
85
|
-
#pl-overlay .pl-splash-foot .pl-pb { display: inline-flex; align-items: center; gap: 6px; }
|
|
86
|
-
#pl-overlay .pl-splash-foot img { width: 18px; height: 18px; object-fit: contain; border-radius: 4px; }
|
|
87
|
-
#pl-overlay .pl-splash-foot strong { color: #162f56; font-weight: 800; }
|
|
88
|
-
@media (max-width: 840px) { #pl-overlay .pl-splash { z-index: 12; } #pl-overlay .pl-splash-foot { bottom: 38px; } }
|
|
89
|
-
|
|
90
|
-
/* ---- loader ---- */
|
|
91
|
-
#pl-overlay .pl-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 18px; }
|
|
92
|
-
@keyframes pl-spin { to { transform: rotate(360deg); } }
|
|
93
|
-
#pl-overlay .pl-bload { position: relative; width: 86px; height: 86px; display: flex; align-items: center; justify-content: center; }
|
|
94
|
-
#pl-overlay .pl-bload img { width: 48px; height: 48px; object-fit: contain; border-radius: 13px; z-index: 3; animation: pl-breathe 1.5s ease-in-out infinite; }
|
|
95
|
-
@keyframes pl-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
|
|
96
|
-
#pl-overlay .pl-bring { position: absolute; inset: 4px; border-radius: 50%; z-index: 2; background: conic-gradient(from 0deg, var(--pl-blue), rgba(51,149,255,0) 68%);
|
|
97
|
-
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); animation: pl-spin .9s linear infinite; }
|
|
98
|
-
#pl-overlay .pl-bripple { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(51,149,255,.45); z-index: 1; animation: pl-ripple 1.8s ease-out infinite; }
|
|
99
|
-
#pl-overlay .pl-bripple2 { animation-delay: .9s; }
|
|
100
|
-
@keyframes pl-ripple { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }
|
|
101
|
-
#pl-overlay .pl-loader p { font-size: 13px; color: var(--pl-mut); font-weight: 500; animation: pl-fadepulse 1.6s ease-in-out infinite; }
|
|
102
|
-
@keyframes pl-fadepulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
|
|
103
|
-
|
|
104
|
-
/* ---- contact form ---- */
|
|
105
|
-
#pl-overlay .pl-h1 { font-size: 19px; font-weight: 700; color: var(--pl-ink); margin-bottom: 4px; letter-spacing: -.2px; }
|
|
106
|
-
#pl-overlay .pl-sub { font-size: 13px; color: var(--pl-mut); margin-bottom: 20px; }
|
|
107
|
-
#pl-overlay .pl-opt { font-weight: 400; color: #aab2bf; }
|
|
108
|
-
#pl-overlay .pl-field { margin-bottom: 18px; }
|
|
109
|
-
#pl-overlay .pl-field label { display: block; font-size: 13px; color: var(--pl-mut); margin-bottom: 7px; font-weight: 600; }
|
|
110
|
-
#pl-overlay .pl-input { width: 100%; padding: 13px 14px; border: 1px solid #d5dae0; border-radius: 9px; font-size: 15px; font-family: inherit; color: var(--pl-ink); outline: none; transition: border-color .15s, box-shadow .15s; }
|
|
111
|
-
#pl-overlay .pl-input:focus { border-color: var(--pl-blue); box-shadow: 0 0 0 3px rgba(51,149,255,.16); }
|
|
112
|
-
#pl-overlay .pl-input::placeholder { color: #aab2bf; }
|
|
113
|
-
#pl-overlay .pl-phone { display: flex; }
|
|
114
|
-
#pl-overlay .pl-phone .pl-cc { display: flex; align-items: center; padding: 0 12px; border: 1px solid #d5dae0; border-right: none; border-radius: 9px 0 0 9px; background: #f7f8fa; font-size: 15px; color: var(--pl-ink); white-space: nowrap; }
|
|
115
|
-
#pl-overlay .pl-phone .pl-input { border-radius: 0 9px 9px 0; }
|
|
116
|
-
#pl-overlay .pl-inwrap { position: relative; }
|
|
117
|
-
#pl-overlay .pl-inicon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: #aab2bf; pointer-events: none; }
|
|
118
|
-
#pl-overlay .pl-padleft { padding-left: 42px; }
|
|
119
|
-
#pl-overlay .pl-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 15px; margin-top: 8px; background: linear-gradient(135deg, var(--pl-blue), var(--pl-blue-dark)); color: #fff; border: none; border-radius: 11px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit;
|
|
120
|
-
transition: filter .15s, transform .08s, box-shadow .15s; box-shadow: 0 8px 20px rgba(51,149,255,.3); }
|
|
121
|
-
#pl-overlay .pl-cta:hover { filter: brightness(1.05); transform: translateY(-1px); }
|
|
122
|
-
#pl-overlay .pl-cta:active { transform: scale(.99); }
|
|
123
|
-
#pl-overlay .pl-cta-arr svg { width: 18px; height: 18px; transition: transform .15s; }
|
|
124
|
-
#pl-overlay .pl-cta:hover .pl-cta-arr svg { transform: translateX(3px); }
|
|
125
|
-
#pl-overlay .pl-err { color:#e02424; font-size:12.5px; font-weight:600; margin-top:8px; min-height:14px; text-align:center; }
|
|
126
|
-
#pl-overlay .pl-trust { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; font-size: 12px; color: #1a9d57; font-weight: 600; }
|
|
127
|
-
#pl-overlay .pl-trust svg { width: 14px; height: 14px; }
|
|
128
|
-
|
|
129
|
-
/* ============ OPTIONS: nav + pane ============ */
|
|
130
|
-
#pl-overlay .pl-options { display: flex; height: 100%; }
|
|
131
|
-
#pl-overlay .pl-nav { width: 240px; flex-shrink: 0; border-right: 1px solid var(--pl-line); padding: 12px 12px 16px; overflow-y: auto; background: #fcfdff; }
|
|
132
|
-
#pl-overlay .pl-navlabel { font-size: 11px; font-weight: 700; color: #9aa6b6; text-transform: uppercase; letter-spacing: .6px; padding: 12px 8px 8px; }
|
|
133
|
-
#pl-overlay .pl-navitem { display: flex; align-items: center; gap: 12px; padding: 13px 12px; border-radius: 11px; cursor: pointer; transition: background .14s, box-shadow .14s; position: relative; }
|
|
134
|
-
#pl-overlay .pl-navitem:hover { background: #f1f5fd; }
|
|
135
|
-
#pl-overlay .pl-navitem.active { background: #fff; box-shadow: inset 3px 0 0 var(--pl-blue), 0 2px 12px rgba(51,149,255,.12); border: 1px solid #e4ecfb; }
|
|
136
|
-
#pl-overlay .pl-ni-ic { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #eaf2ff; color: var(--pl-blue); }
|
|
137
|
-
#pl-overlay .pl-ni-ic svg { width: 20px; height: 20px; }
|
|
138
|
-
#pl-overlay .pl-ni-body { flex: 1; min-width: 0; }
|
|
139
|
-
#pl-overlay .pl-ni-t { font-size: 14.5px; font-weight: 600; color: var(--pl-ink); }
|
|
140
|
-
#pl-overlay .pl-ni-s { font-size: 11.5px; color: var(--pl-mut); margin-top: 2px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
|
141
|
-
#pl-overlay .pl-ni-apps { display: flex; gap: 3px; flex-shrink: 0; }
|
|
142
|
-
#pl-overlay .pl-ni-apps img { width: 19px; height: 19px; border-radius: 5px; background: #fff; border: 1px solid var(--pl-line); padding: 2px; object-fit: contain; }
|
|
143
|
-
#pl-overlay .pl-navitem.pl-disabled { cursor: pointer; }
|
|
144
|
-
#pl-overlay .pl-navitem.pl-disabled:hover { background: #f1f5fd; }
|
|
145
|
-
#pl-overlay .pl-ni-ic.pl-ic-card { background: #eaf0ff; color: #4071e0; }
|
|
146
|
-
#pl-overlay .pl-ni-ic.pl-ic-netbanking { background: #e7f6ef; color: #1a9d57; }
|
|
147
|
-
#pl-overlay .pl-ni-ic.pl-ic-wallet { background: #fdeede; color: #d98324; }
|
|
148
|
-
#pl-overlay .pl-ni-ic.pl-ic-emi { background: #f1ecfd; color: #7a52d8; }
|
|
149
|
-
#pl-overlay .pl-soon { font-size: 10px; font-weight: 700; color: #8a97a8; background: #eef1f5; padding: 4px 8px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; align-self: center; }
|
|
150
|
-
#pl-overlay .pl-navitem.active, #pl-overlay .pl-navitem { animation: pl-fadeUp .36s cubic-bezier(.4,0,.2,1) backwards; }
|
|
151
|
-
#pl-overlay .pl-nav .pl-navitem:nth-of-type(2){animation-delay:.04s} #pl-overlay .pl-nav .pl-navitem:nth-of-type(3){animation-delay:.08s}
|
|
152
|
-
#pl-overlay .pl-nav .pl-navitem:nth-of-type(4){animation-delay:.12s} #pl-overlay .pl-nav .pl-navitem:nth-of-type(5){animation-delay:.16s}
|
|
153
|
-
|
|
154
|
-
/* ---- pane (UPI detail) ---- */
|
|
155
|
-
#pl-overlay .pl-pane { flex: 1; min-width: 0; padding: 22px 26px; overflow-y: auto; }
|
|
156
|
-
#pl-overlay .pl-paneh { font-size: 16px; font-weight: 700; color: var(--pl-ink); margin-bottom: 14px; }
|
|
157
|
-
#pl-overlay .pl-paneh2 { margin-top: 26px; }
|
|
158
|
-
#pl-overlay .pl-qrcard { display: flex; align-items: center; gap: 22px; background: #f4f6fc; border: 1px solid #e9edf6; border-radius: 16px; padding: 20px; animation: pl-qrpop .5s cubic-bezier(.16,1,.3,1) backwards .06s; }
|
|
159
|
-
@keyframes pl-qrpop { from { opacity: 0; transform: scale(.96) translateY(6px); } }
|
|
160
|
-
#pl-overlay .pl-qrbox { position: relative; width: 162px; height: 162px; flex-shrink: 0; background: #fff; border-radius: 14px; padding: 11px; box-shadow: 0 8px 22px rgba(20,40,80,.1); display: flex; align-items: center; justify-content: center; }
|
|
161
|
-
#pl-overlay .pl-qrbox img { display: block; width: 140px !important; height: 140px !important; }
|
|
162
|
-
#pl-overlay .pl-qrside { flex: 1; min-width: 0; }
|
|
163
|
-
#pl-overlay .pl-scan { font-size: 14px; font-weight: 600; color: var(--pl-ink); line-height: 1.4; margin-bottom: 14px; }
|
|
164
|
-
#pl-overlay .pl-approw { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; margin-bottom: 16px; }
|
|
165
|
-
#pl-overlay .pl-uapp { width: 38px; height: 38px; flex-shrink: 0; border: 1px solid #e6ebf4; border-radius: 11px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: #fff; transition: border-color .15s, transform .12s, box-shadow .15s; }
|
|
166
|
-
#pl-overlay .pl-uapp:hover { border-color: var(--pl-blue); transform: translateY(-2px); box-shadow: 0 8px 16px rgba(51,149,255,.16); }
|
|
167
|
-
#pl-overlay .pl-uapp img { width: 100%; height: 100%; object-fit: contain; padding: 7px; }
|
|
168
|
-
#pl-overlay .pl-validrow { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: #0a8a4a; background: #e7f8ef; border: 1px solid #bfead0; padding: 5px 12px; border-radius: 20px; }
|
|
169
|
-
#pl-overlay .pl-validrow.pl-expired { color: #e02424; background: #fdecec; border-color: #f5c2c2; }
|
|
170
|
-
#pl-overlay .pl-validrow.pl-expired .pl-dot { background: #e02424; animation: none; }
|
|
171
|
-
#pl-overlay .pl-dot { width: 7px; height: 7px; border-radius: 50%; background: #1aa85a; animation: pl-blink 1.6s infinite; }
|
|
172
|
-
@keyframes pl-blink { 0%{box-shadow:0 0 0 0 rgba(26,168,90,.6)} 70%{box-shadow:0 0 0 7px rgba(26,168,90,0)} 100%{box-shadow:0 0 0 0 rgba(26,168,90,0)} }
|
|
173
|
-
|
|
174
|
-
#pl-overlay .pl-vparow { display: flex; flex-direction: column; gap: 12px; border: 1px solid #e6ebf4; border-radius: 14px; padding: 16px; }
|
|
175
|
-
#pl-overlay .pl-vpa { width: 100%; padding: 14px 14px; border: 1px solid #d5dae0; border-radius: 10px; font-size: 15px; font-family: inherit; color: var(--pl-ink); outline: none; transition: border-color .15s, box-shadow .15s; }
|
|
176
|
-
#pl-overlay .pl-vpa:focus { border-color: var(--pl-blue); box-shadow: 0 0 0 3px rgba(51,149,255,.16); }
|
|
177
|
-
#pl-overlay .pl-vpa::placeholder { color: #aab2bf; }
|
|
178
|
-
#pl-overlay .pl-verify { width: 100%; padding: 15px; background: #16181f; color: #fff; border: none; border-radius: 10px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; transition: filter .15s, transform .08s; }
|
|
179
|
-
#pl-overlay .pl-verify:hover { filter: brightness(1.25); }
|
|
180
|
-
#pl-overlay .pl-verify:active { transform: scale(.99); }
|
|
181
|
-
|
|
182
|
-
#pl-overlay .pl-pendrow { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:18px; font-size:13px; font-weight:600; color:var(--pl-mut); }
|
|
183
|
-
#pl-overlay .pl-pendrow.pl-fail { color:#e02424; }
|
|
184
|
-
#pl-overlay .pl-mini-spin { width:14px; height:14px; border:2px solid #d5dae0; border-top-color:var(--pl-blue); border-radius:50%; animation:pl-spin .8s linear infinite; display:inline-block; }
|
|
185
|
-
#pl-overlay .pl-qrloading { width:140px; height:140px; border-radius:10px; background:linear-gradient(90deg,#f2f4f7,#e9eef6,#f2f4f7); background-size:200% 100%; animation:pl-shimmer 1.2s linear infinite; }
|
|
186
|
-
@keyframes pl-shimmer { to { background-position:-200% 0; } }
|
|
187
|
-
#pl-overlay .pl-qrerr { width:140px; height:140px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; font-size:11.5px; line-height:1.35; color:#8a97a8; text-align:center; padding:6px; }
|
|
188
|
-
#pl-overlay .pl-retry { background:var(--pl-blue); color:#fff; border:none; border-radius:8px; padding:7px 14px; font:700 12px Inter,sans-serif; cursor:pointer; }
|
|
189
|
-
|
|
190
|
-
/* ---- success (celebration) ---- */
|
|
191
|
-
#pl-overlay .pl-success { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; gap: 6px; }
|
|
192
|
-
#pl-overlay .pl-burst { position: relative; width: 132px; height: 132px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
|
|
193
|
-
#pl-overlay .pl-check { position: relative; z-index: 3; width: 84px; height: 84px; border-radius: 50%; background: linear-gradient(145deg,#13c66a,#00a251); display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 32px rgba(0,162,81,.4); animation: pl-pop .55s cubic-bezier(.2,1.5,.35,1) both, pl-glow 2.4s ease-in-out .7s infinite; }
|
|
194
|
-
#pl-overlay .pl-check svg { width: 44px; height: 44px; stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: pl-draw .5s .28s cubic-bezier(.6,0,.3,1) forwards; }
|
|
195
|
-
@keyframes pl-pop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
|
|
196
|
-
@keyframes pl-draw { to { stroke-dashoffset: 0; } }
|
|
197
|
-
@keyframes pl-glow { 0%,100% { box-shadow: 0 12px 32px rgba(0,162,81,.4); } 50% { box-shadow: 0 12px 40px rgba(0,162,81,.6); } }
|
|
198
|
-
#pl-overlay .pl-ripple { position: absolute; z-index: 1; width: 86px; height: 86px; border-radius: 50%; border: 2.5px solid rgba(0,162,81,.45); opacity: 0; animation: pl-rip 1.5s ease-out .12s 2 forwards; }
|
|
199
|
-
#pl-overlay .pl-ripple2 { animation-delay: .55s; border-color: rgba(0,162,81,.3); }
|
|
200
|
-
@keyframes pl-rip { 0% { transform: scale(.6); opacity: .85; } 100% { transform: scale(2.05); opacity: 0; } }
|
|
201
|
-
#pl-overlay .pl-confetti { position: absolute; left: 50%; top: 50%; z-index: 2; background: var(--c); opacity: 0; transform: translate(-50%,-50%) scale(.3); animation: pl-conf 1.9s cubic-bezier(.12,.7,.2,1) forwards; }
|
|
202
|
-
@keyframes pl-conf { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.3); } 12% { opacity: 1; } 72% { opacity: 1; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(var(--r)) scale(1); } 100% { opacity: 0; transform: translate(calc(-50% + var(--tx) * 1.12), calc(-50% + var(--ty) * 1.12 + 14px)) rotate(var(--r)) scale(.9); } }
|
|
203
|
-
#pl-overlay .pl-success h2 { font-size: 22px; color: var(--pl-ink); font-weight: 700; animation: pl-fadeUp .45s ease .4s backwards; }
|
|
204
|
-
#pl-overlay .pl-success p { font-size: 13px; color: var(--pl-mut); animation: pl-fadeUp .45s ease .5s backwards; }
|
|
205
|
-
#pl-overlay .pl-pid { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--pl-ink); background: #f2f4f7; padding: 6px 10px; border-radius: 6px; margin-top: 8px; animation: pl-fadeUp .45s ease .6s backwards; }
|
|
206
|
-
#pl-overlay .pl-utr { margin-top: 6px; }
|
|
207
|
-
@media (prefers-reduced-motion: reduce) { #pl-overlay .pl-confetti, #pl-overlay .pl-ripple { display: none; } #pl-overlay .pl-check { animation: pl-pop .3s ease both; } }
|
|
208
|
-
|
|
209
|
-
#pl-overlay .pl-screen::-webkit-scrollbar, #pl-overlay .pl-nav::-webkit-scrollbar, #pl-overlay .pl-pane::-webkit-scrollbar { width: 6px; }
|
|
210
|
-
#pl-overlay .pl-screen::-webkit-scrollbar-thumb, #pl-overlay .pl-nav::-webkit-scrollbar-thumb, #pl-overlay .pl-pane::-webkit-scrollbar-thumb { background: #d5dae0; border-radius: 3px; }
|
|
211
|
-
|
|
212
|
-
#pl-toast { position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(10px); background:#16181f; color:#fff; padding:12px 20px; border-radius:10px; font:600 14px Inter,system-ui,sans-serif; box-shadow:0 10px 30px rgba(0,0,0,.3); z-index:2147483600; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; max-width:90vw; text-align:center; }
|
|
213
|
-
#pl-toast.pl-show { opacity:1; transform:translateX(-50%) translateY(0); }
|
|
214
|
-
|
|
215
|
-
/* ============ RESPONSIVE / MOBILE ============ */
|
|
216
|
-
@media (max-width: 840px) {
|
|
217
|
-
#pl-overlay { padding: 0; align-items: stretch; }
|
|
218
|
-
#pl-overlay .pl-modal { flex-direction: column; height: 100%; max-height: 100%; max-width: 100%; border-radius: 0; }
|
|
219
|
-
#pl-overlay .pl-left { width: 100%; flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; flex-shrink: 0; }
|
|
220
|
-
#pl-overlay .pl-left::before { display: none; }
|
|
221
|
-
#pl-overlay .pl-brandrow { margin-bottom: 0; flex: 1; }
|
|
222
|
-
#pl-overlay .pl-logo { width: 44px; height: 44px; }
|
|
223
|
-
#pl-overlay .pl-bname { font-size: 17px; }
|
|
224
|
-
#pl-overlay .pl-summary { background: none; box-shadow: none; padding: 0; text-align: right; }
|
|
225
|
-
#pl-overlay .pl-summary .pl-sl, #pl-overlay .pl-summary .pl-snote { display: none; }
|
|
226
|
-
#pl-overlay .pl-summary .pl-samt { font-size: 22px; margin: 0; color: #fff; }
|
|
227
|
-
#pl-overlay .pl-illus, #pl-overlay .pl-secured { display: none; }
|
|
228
|
-
#pl-overlay .pl-main { flex: 1; min-height: 0; }
|
|
229
|
-
#pl-overlay .pl-options { flex-direction: column; }
|
|
230
|
-
#pl-overlay .pl-nav { display: none; }
|
|
231
|
-
#pl-overlay .pl-pane { padding: 20px 18px; }
|
|
232
|
-
#pl-overlay .pl-back.pl-show { opacity: 0; pointer-events: none; }
|
|
1
|
+
var y=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var $=Object.prototype.hasOwnProperty;var _=(o,n)=>{for(var e in n)y(o,e,{get:n[e],enumerable:!0})},E=(o,n,e,i)=>{if(n&&typeof n=="object"||typeof n=="function")for(let c of w(n))!$.call(o,c)&&c!==e&&y(o,c,{get:()=>n[c],enumerable:!(i=v(n,c))||i.enumerable});return o};var I=o=>E(y({},"__esModule",{value:!0}),o);var C={};_(C,{default:()=>p});module.exports=I(C);var t="plco",g=!1,S=()=>typeof window!="undefined"&&window.matchMedia("(max-width: 640px)").matches;function P(o){if(g)return;g=!0;let n=`
|
|
2
|
+
.${t}-root{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;
|
|
3
|
+
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif}
|
|
4
|
+
.${t}-backdrop{position:absolute;inset:0;background:rgba(8,12,20,.62);backdrop-filter:blur(4px)}
|
|
5
|
+
.${t}-sheet{position:relative;width:100%;max-width:420px;max-height:92vh;display:flex;flex-direction:column;
|
|
6
|
+
background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 24px 70px -20px rgba(0,0,0,.5);
|
|
7
|
+
animation:${t}-in .22s cubic-bezier(.16,1,.3,1)}
|
|
8
|
+
@keyframes ${t}-in{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
|
|
9
|
+
.${t}-head{display:flex;align-items:center;gap:10px;padding:14px 14px 12px;border-bottom:1px solid rgba(15,23,42,.08)}
|
|
10
|
+
.${t}-brand{flex:1;min-width:0}
|
|
11
|
+
.${t}-name{font-size:13px;font-weight:600;color:#0f172a;line-height:1.2;
|
|
12
|
+
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
13
|
+
.${t}-amount{font-size:20px;font-weight:700;color:#0f172a;letter-spacing:-.02em;margin-top:2px;
|
|
14
|
+
font-variant-numeric:tabular-nums}
|
|
15
|
+
.${t}-badge{font-size:10px;font-weight:700;letter-spacing:.08em;color:#92400e;background:#fef3c7;
|
|
16
|
+
padding:3px 7px;border-radius:5px}
|
|
17
|
+
.${t}-close{border:0;background:rgba(15,23,42,.05);color:#475569;width:30px;height:30px;border-radius:8px;
|
|
18
|
+
font-size:20px;line-height:1;cursor:pointer;transition:background .15s}
|
|
19
|
+
.${t}-close:hover{background:rgba(15,23,42,.1)}
|
|
20
|
+
.${t}-close:focus-visible{outline:2px solid ${o||"#38BDF8"};outline-offset:2px}
|
|
21
|
+
.${t}-body{flex:1;min-height:420px;background:#f8fafc}
|
|
22
|
+
.${t}-frame{width:100%;height:100%;min-height:420px;border:0;display:block}
|
|
23
|
+
.${t}-msg{padding:36px 20px;text-align:center;color:#64748b;font-size:13px}
|
|
24
|
+
.${t}-cta{display:block;margin:10px 14px 0;padding:13px;border-radius:10px;text-align:center;text-decoration:none;
|
|
25
|
+
font-weight:700;font-size:14px;color:#06121f;background:${o||"#38BDF8"}}
|
|
26
|
+
.${t}-foot{padding:10px;text-align:center;font-size:11px;color:#94a3b8}
|
|
27
|
+
@media (max-width:640px){
|
|
28
|
+
.${t}-sheet{max-width:100%;height:100%;max-height:100%;border-radius:0}
|
|
233
29
|
}
|
|
234
|
-
@media (
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
}
|
|
240
|
-
|
|
241
|
-
<div class="pl-modal" role="dialog" aria-modal="true">
|
|
242
|
-
<div class="pl-splash" id="pl-splash">
|
|
243
|
-
<div class="pl-shield">
|
|
244
|
-
<svg class="pl-shield-bg" viewBox="0 0 120 140" aria-hidden="true">
|
|
245
|
-
<defs><linearGradient id="pl-shgrad" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#5a93ff"/><stop offset="1" stop-color="#1f5fe0"/></linearGradient></defs>
|
|
246
|
-
<path d="M60 3 L113 25 V70 C113 105 90 128 60 137 C30 128 7 105 7 70 V25 Z" fill="url(#pl-shgrad)"/>
|
|
247
|
-
</svg>
|
|
248
|
-
<span class="pl-shield-shine"></span>
|
|
249
|
-
<img class="pl-shield-logo" src="${d(l.assetBase)}/payulink-logo.png" alt="payulink">
|
|
250
|
-
</div>
|
|
251
|
-
<div class="pl-splash-foot">Secured By <span class="pl-pb"><img src="${d(l.assetBase)}/payulink-logo.png" alt=""><strong>payulink</strong></span></div>
|
|
252
|
-
</div>
|
|
253
|
-
<aside class="pl-left">
|
|
254
|
-
<div class="pl-brandrow">
|
|
255
|
-
<div class="pl-logo"><img src="${d(l.logo)}" alt=""></div>
|
|
256
|
-
<div class="pl-bmeta">
|
|
257
|
-
<div class="pl-bname">${d(l.name)}</div>
|
|
258
|
-
<div class="pl-btrust">${x.verified}<span>Trusted Business</span></div>
|
|
259
|
-
</div>
|
|
260
|
-
</div>
|
|
261
|
-
<div class="pl-summary">
|
|
262
|
-
<div class="pl-sl">Price Summary</div>
|
|
263
|
-
<div class="pl-samt">${r}</div>
|
|
264
|
-
<div class="pl-snote">${d(l.note||"Paying for "+(l.description||l.name))}</div>
|
|
265
|
-
</div>
|
|
266
|
-
<svg class="pl-illus" viewBox="0 0 230 150" fill="none"><rect x="20" y="70" width="58" height="68" rx="5" fill="#fff" fill-opacity=".92"/><path d="M33 70c0-10 5-16 16-16s16 6 16 16" stroke="#fff" stroke-width="3.5"/><rect x="88" y="55" width="68" height="83" rx="5" fill="#fff"/><path d="M104 55c0-12 6-19 18-19s18 7 18 19" stroke="#fff" stroke-width="3.5"/><rect x="150" y="92" width="52" height="46" rx="4" fill="#fff" fill-opacity=".92"/><circle cx="178" cy="40" r="18" fill="#fff"/><path d="M178 30v20M168 40h20" stroke="currentColor" stroke-width="3.5" opacity=".5"/></svg>
|
|
267
|
-
<div class="pl-secured">${D}Secured by <span class="pl-pb"><img src="${d(l.assetBase)}/payulink-logo.png" alt=""><strong>payulink</strong></span></div>
|
|
268
|
-
</aside>
|
|
269
|
-
<section class="pl-main">
|
|
270
|
-
<header class="pl-head">
|
|
271
|
-
<button class="pl-hic pl-back" id="pl-back" aria-label="Back">${x.back}</button>
|
|
272
|
-
<div class="pl-title" id="pl-title">Payment Options</div>
|
|
273
|
-
<button class="pl-hic pl-dots" aria-label="More">\u22EF</button>
|
|
274
|
-
<button class="pl-hic pl-close-x" id="pl-close" aria-label="Close">\xD7</button>
|
|
275
|
-
</header>
|
|
276
|
-
<div class="pl-vp"><div class="pl-screen pl-active" id="pl-screen"></div></div>
|
|
277
|
-
<footer class="pl-foot">${x.lock}<span>Encrypted & secure payments</span></footer>
|
|
278
|
-
</section>
|
|
279
|
-
</div>`,document.body.appendChild(o);let j=document.body.style.overflow;document.body.style.overflow="hidden";let $=o.querySelector(".pl-vp"),I=o.querySelector("#pl-title"),m=o.querySelector("#pl-back");function z(){g(),l.onDismiss&&l.onDismiss()}function g(){if(a.stop)try{a.stop()}catch{}clearInterval(a.timer),o.classList.add("pl-closing"),document.body.style.overflow=j,setTimeout(()=>o.remove(),240)}o.querySelector("#pl-close").onclick=z,o.addEventListener("mousedown",e=>{e.target.id==="pl-overlay"&&z()}),m.onclick=()=>{a.screen==="contact"||a.screen==="success"||s("options")};let S={loader:"Payment Options",contact:"Contact Details",options:"Payment Options",success:"Payment Successful"};function s(e){a.screen=e,I.textContent=S[e]||"Payment",m.classList.toggle("pl-show",e==="options"),clearInterval(a.timer);let t=document.createElement("div");t.className="pl-screen pl-active"+(e==="options"?" pl-screen-options":""),t.innerHTML=q[e]?q[e]():"",$.replaceChildren(t),R(e,t)}let c=y.slice(0,4).map(e=>`<img src="${f[e]}" alt="">`).join(""),v=y.map(e=>`<a class="pl-uapp" data-app="${e}" title="${e}"><img src="${f[e]}" alt="${e}"></a>`).join(""),q={loader:()=>`<div class="pl-loader"><div class="pl-bload"><img src="${d(l.logo)}" alt=""><span class="pl-bring"></span><span class="pl-bripple"></span><span class="pl-bripple pl-bripple2"></span></div><p>Securely loading payment options\u2026</p></div>`,contact:()=>`
|
|
280
|
-
<div class="pl-pad">
|
|
281
|
-
<div class="pl-h1">Contact details</div>
|
|
282
|
-
<div class="pl-sub">Enter your details to continue the payment</div>
|
|
283
|
-
<div class="pl-field"><label>Full Name</label>
|
|
284
|
-
<input class="pl-input" id="pl-name" type="text" placeholder="Enter your name" value="${d(l.prefill.name||"")}"></div>
|
|
285
|
-
<div class="pl-field"><label>Mobile Number</label>
|
|
286
|
-
<div class="pl-phone"><div class="pl-cc">+91</div>
|
|
287
|
-
<input class="pl-input" id="pl-mobile" type="tel" maxlength="10" placeholder="Enter mobile number" value="${d(l.prefill.contact||"")}"></div></div>
|
|
288
|
-
<div class="pl-field"><label>Email Address <span class="pl-opt">(optional)</span></label>
|
|
289
|
-
<div class="pl-inwrap"><span class="pl-inicon">${x.mail}</span>
|
|
290
|
-
<input class="pl-input pl-padleft" id="pl-email" type="email" placeholder="Enter email address" value="${d(l.prefill.email||"")}"></div></div>
|
|
291
|
-
<button class="pl-cta" id="pl-continue">Continue <span class="pl-cta-arr">${x.arrow}</span></button>
|
|
292
|
-
<div class="pl-err" id="pl-cerr"></div>
|
|
293
|
-
<div class="pl-trust">${D}100% secure payments</div>
|
|
294
|
-
</div>`,options:()=>`
|
|
295
|
-
<div class="pl-options">
|
|
296
|
-
<div class="pl-nav" id="pl-nav">
|
|
297
|
-
<div class="pl-navlabel">Recommended</div>
|
|
298
|
-
<div class="pl-navitem active" data-m="upi">
|
|
299
|
-
<div class="pl-ni-ic">${x.qr}</div>
|
|
300
|
-
<div class="pl-ni-body"><div class="pl-ni-t">UPI</div></div>
|
|
301
|
-
<div class="pl-ni-apps">${c}</div>
|
|
302
|
-
</div>
|
|
303
|
-
<div class="pl-navlabel">Cards, Banking & More</div>
|
|
304
|
-
${ne.map(e=>`
|
|
305
|
-
<div class="pl-navitem pl-disabled" data-m="${e.m}">
|
|
306
|
-
<div class="pl-ni-ic pl-ic-${e.ic}">${x[e.ic]}</div>
|
|
307
|
-
<div class="pl-ni-body"><div class="pl-ni-t">${e.t}</div><div class="pl-ni-s">${e.s}</div></div>
|
|
308
|
-
<span class="pl-soon">Coming soon</span>
|
|
309
|
-
</div>`).join("")}
|
|
310
|
-
</div>
|
|
311
|
-
<div class="pl-pane" id="pl-pane">${b()}</div>
|
|
312
|
-
</div>`,success:()=>{let e=["#00c060","#3395ff","#ffb020","#ff5a5f","#7a52d8","#19c3c3"];return`
|
|
313
|
-
<div class="pl-success">
|
|
314
|
-
<div class="pl-burst">
|
|
315
|
-
${Array.from({length:18},(i,n)=>{let u=n/18*Math.PI*2+(n%2?.22:-.22),k=60+n*13%40,X=Math.round(Math.cos(u)*k),F=Math.round(Math.sin(u)*k),G=e[n%e.length],W=(n%2?1:-1)*(140+n*14),J=n%3===0?6:8,Z=n%4===0?6:12;return`<i class="pl-confetti" style="--tx:${X}px;--ty:${F}px;--c:${G};--r:${W}deg;width:${J}px;height:${Z}px;border-radius:${n%4===0?"50%":"2px"};animation-delay:${(.15+n*.024).toFixed(3)}s"></i>`}).join("")}
|
|
316
|
-
<span class="pl-ripple"></span><span class="pl-ripple pl-ripple2"></span>
|
|
317
|
-
<div class="pl-check"><svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7"/></svg></div>
|
|
318
|
-
</div>
|
|
319
|
-
<h2>Payment Successful</h2>
|
|
320
|
-
<p>${r} paid${l.name?" to "+d(l.name):""}</p>
|
|
321
|
-
<div class="pl-pid" id="pl-pid">${d(a.order&&a.order.merchant_order_no||"")}</div>
|
|
322
|
-
${a.utr?`<div class="pl-pid pl-utr">UTR ${d(a.utr)}</div>`:""}
|
|
323
|
-
</div>`}};function b(){return`
|
|
324
|
-
<div class="pl-paneh">UPI QR</div>
|
|
325
|
-
<div class="pl-qrcard">
|
|
326
|
-
<div class="pl-qrbox" id="pl-qr"><div class="pl-qrloading"></div></div>
|
|
327
|
-
<div class="pl-qrside">
|
|
328
|
-
<div class="pl-scan">Scan the QR using any UPI App</div>
|
|
329
|
-
<div class="pl-approw" id="pl-applist">${v}</div>
|
|
330
|
-
<div class="pl-validrow"><span class="pl-dot"></span><span id="pl-timer">Valid 5:00</span></div>
|
|
30
|
+
@media (prefers-reduced-motion:reduce){.${t}-sheet{animation:none}}`,e=document.createElement("style");e.setAttribute("data-payulink","checkout"),e.textContent=n,document.head.appendChild(e)}function x(o={}){var m;P(o.themeColor);let n=L(o.amount,o.currency),e=document.body.style.overflow;document.body.style.overflow="hidden";let i=document.createElement("div");i.className=`${t}-root`,i.setAttribute("role","dialog"),i.setAttribute("aria-modal","true"),i.setAttribute("aria-label","Payment"),i.innerHTML=`
|
|
31
|
+
<div class="${t}-backdrop" data-close="1"></div>
|
|
32
|
+
<div class="${t}-sheet">
|
|
33
|
+
<div class="${t}-head">
|
|
34
|
+
<div class="${t}-brand">
|
|
35
|
+
<div class="${t}-name">${h(o.merchantName||"Payment")}</div>
|
|
36
|
+
<div class="${t}-amount">${n}</div>
|
|
331
37
|
</div>
|
|
38
|
+
${o.mode==="test"?`<span class="${t}-badge">TEST</span>`:""}
|
|
39
|
+
<button class="${t}-close" aria-label="Close" data-close="1">×</button>
|
|
332
40
|
</div>
|
|
333
|
-
<div class="
|
|
334
|
-
|
|
335
|
-
<input class="pl-vpa" id="pl-vpa" placeholder="example@okhdfcbank" autocomplete="off" spellcheck="false">
|
|
336
|
-
<button class="pl-verify" id="pl-verify">Verify and Pay</button>
|
|
41
|
+
<div class="${t}-body">
|
|
42
|
+
${o.url?`<iframe class="${t}-frame" src="${h(o.url)}" allow="clipboard-write" referrerpolicy="origin"></iframe>`:`<div class="${t}-msg">Could not load the payment page.</div>`}
|
|
337
43
|
</div>
|
|
338
|
-
|
|
44
|
+
${o.upiIntentUrl&&S()?`<a class="${t}-cta" href="${h(o.upiIntentUrl)}">Pay ${n} in a UPI app</a>`:""}
|
|
45
|
+
<div class="${t}-foot">Secured by PayuLink</div>
|
|
46
|
+
</div>`;let c=!1,f=()=>{c||(c=!0,document.removeEventListener("keydown",u),document.body.style.overflow=e,i.remove())},a=()=>{f(),typeof o.onDismiss=="function"&&o.onDismiss()},u=r=>{r.key==="Escape"&&a()};return i.addEventListener("click",r=>{r.target instanceof Element&&r.target.closest("[data-close]")&&a()}),document.addEventListener("keydown",u),document.body.appendChild(i),(m=i.querySelector(`.${t}-close`))==null||m.focus(),{close:f}}function L(o,n){let e=Number(o||0)/100;try{return new Intl.NumberFormat("en-IN",{style:"currency",currency:n||"INR",minimumFractionDigits:e%1===0?0:2}).format(e)}catch{return"\u20B9"+e}}function h(o){return String(o!=null?o:"").replace(/[&<>"']/g,n=>({"&":"&","<":"<",">":">",'"':""","'":"'"})[n])}var k={apiBase:"https://payulink.io/api",name:null,theme:{color:"#38BDF8"},pollMs:2500},p=class o{constructor(n={}){if(typeof window=="undefined"||typeof document=="undefined")throw new Error("PayuLink checkout runs in the browser only. On React Native use @thepayulink/checkout-react-native; on a server use @thepayulink/server.");let e=n.key||n.keyId||n.key_id;if(!e)throw new Error("PayuLink: `key` (your publishable pl_live_\u2026 / pl_test_\u2026 key) is required");if(/^pl_(live|test)_/.test(e)===!1&&console.warn("PayuLink: `key` should look like pl_live_\u2026 or pl_test_\u2026"),n.keySecret||n.key_secret)throw new Error("PayuLink: never pass a key_secret to the browser SDK. It belongs on your server only.");this.options=Object.assign({},k,n,{key:e})}open(n={}){let e=Object.assign({},this.options,n),i=String(e.apiBase||"").replace(/\/$/,""),c=e.order_id||e.orderId;if(!c)throw new Error("PayuLink: `order_id` is required. Create it on your server with POST /v1/orders.");let f=r=>{typeof e.onError=="function"?e.onError(r):console.error("PayuLink:",r.message||r)},a={_overlay:null,_stop:null,close(){var r,d;(r=this._stop)==null||r.call(this),(d=this._overlay)==null||d.close()}},u=!1,m=r=>{var d,s;u||(u=!0,(d=a._stop)==null||d.call(a),(s=a._overlay)==null||s.close(),typeof e.handler=="function"&&e.handler(r),typeof e.onSuccess=="function"&&e.onSuccess(r))};return(async()=>{let r;try{let s=await fetch(`${i}/v1/checkout/session`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({key_id:e.key,order_id:c,customer:e.prefill?{name:e.prefill.name,contact:e.prefill.contact,email:e.prefill.email}:void 0})});if(r=await s.json().catch(()=>({})),!s.ok){let b=(r==null?void 0:r.error)||{};throw new Error(b.description||`Could not start payment (HTTP ${s.status})`)}}catch(s){return f(s)}a._overlay=x({url:r.payment_link,upiIntentUrl:r.upi_intent_url,amount:r.amount,currency:r.currency,merchantName:e.name||r.merchant_name,themeColor:e.theme&&e.theme.color||k.theme.color,mode:r.mode,onDismiss:()=>{var s;u||(u=!0,(s=a._stop)==null||s.call(a),typeof e.onDismiss=="function"&&e.onDismiss())}});let d=setInterval(async()=>{var s;try{let l=await(await fetch(`${i}/v1/checkout/session/${encodeURIComponent(r.session_token)}`)).json().catch(()=>({}));l.status==="paid"&&l.payulink_signature?m({payulink_order_id:l.payulink_order_id,payulink_payment_id:l.payulink_payment_id,payulink_signature:l.payulink_signature,utr:l.utr,amount:l.amount}):(l.status==="failed"||l.status==="expired")&&(clearInterval(d),(s=a._overlay)==null||s.close(),f(new Error(`Payment ${l.status}`)))}catch{}},e.pollMs);a._stop=()=>clearInterval(d)})(),a}static open(n={}){return new o(n).open(n)}};typeof window!="undefined"&&(window.PayuLink=p,window.PayulinkCheckout=p);
|