· 5 years ago · May 11, 2020, 01:34 AM
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>
6 Accept a card payment
7 </title>
8 <meta name="description" content="A demo of a card payment on Stripe">
9 <meta name="viewport" content="width=device-width, initial-scale=1">
10 <meta class="appdrag-theme-topbar-color" name="theme-color" content="#3F51B5">
11 <meta class="appdrag-theme-topbar-color" name="msapplication-navbutton-color" content="#3F51B5">
12 <meta class="appdrag-theme-topbar-color" name="apple-mobile-web-app-status-bar-style" content="#3F51B5">
13 <link rel="shortcut icon" type="image/png" href="favicon.png">
14 <link rel="stylesheet" type="text/css" href="//cf.appdrag.com/resources/appallin-universal-theme.css">
15 <link rel="stylesheet" type="text/css" href="//s3-eu-west-1.amazonaws.com/dev.appdrag.com/resources/css/appdrag.css">
16 <link rel="stylesheet" crossorigin="anonymous" id="appdrag-palette" type="text/css" href="//s3-eu-west-1.amazonaws.com/dev.appdrag.com/simpli-buy-7d636b/css/appdrag-palette.css">
17 <link rel="stylesheet" type="text/css" href="//s3-eu-west-1.amazonaws.com/dev.appdrag.com/simpli-buy-7d636b/fonts/fonts.css">
18 <link rel="stylesheet" href="global.css">
19 <script src="https://js.stripe.com/v3/">
20 </script>
21 <script src="/client.js" defer>
22 </script>
23 <style>
24 *{box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:16px;-webkit-font-smoothing:antialiased;display:flex;justify-content:center;align-content:center;height:100vh;width:100vw}form{width:30vw;min-width:500px;align-self:center;box-shadow:5px 4px 5.5px 1.5px rgba(50,50,93,.1),5px 4px 5.5px 1.5px rgba(50,50,93,.1),5px 4px 5.5px 1.5px rgba(0,0,0,.07);border-radius:7px;padding:40px}input{border-radius:6px;margin-bottom:6px;padding:12px;border:2px solid rgba(50,50,93,.1);height:50px;font-size:18px;width:100%;background:#fff}.result-message{line-height:22px;font-size:16px}.result-message a{color:#596fd6;font-weight:600;text-decoration:none}.hidden{display:none}.card-error{color:#697386;text-align:left;font-size:13px;line-height:17px;margin-top:12px}#card-element{border-radius:4px 4px 4px 4px;padding:12px;border:2px solid rgba(50,50,93,.1);height:44px;width:100%;background:#fff}#payment-request-button{margin-bottom:32px}button{background:#337ab7;color:#fff;font-family:Arial,sans-serif;border-radius:4px 4px 4px 4px;border:0;padding:12px 16px;font-size:21px;font-weight:600;cursor:pointer;display:block;transition:all .2s ease;box-shadow:5px 4px 5.5px 0 rgba(0,0,0,.07);width:100%}button:hover{filter:contrast(115%)}button:disabled{opacity:.5;cursor:default}.spinner,.spinner:before,.spinner:after{border-radius:50%}.spinner{color:#fff;font-size:22px;text-indent:-99999px;margin:0 auto;position:relative;width:20px;height:20px;box-shadow:inset 0 0 0 2px;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0)}.spinner:before,.spinner:after{position:absolute;content:""}.spinner:before{width:10.4px;height:20.4px;background:#337ab7;border-radius:20.4px 0 0 20.4px;top:-.2px;left:-.2px;-webkit-transform-origin:10.4px 10.2px;transform-origin:10.4px 10.2px;-webkit-animation:loading 2s infinite ease 1.5s;animation:loading 2s infinite ease 1.5s}.spinner:after{width:10.4px;height:10.2px;background:#337ab7;border-radius:0 10.2px 10.2px 0;top:-.1px;left:10.2px;-webkit-transform-origin:0 10.2px;transform-origin:0 10.2px;-webkit-animation:loading 2s infinite ease;animation:loading 2s infinite ease}@-webkit-keyframes loading{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loading{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@media only screen and (max-width:600px){form{width:80vw}}
25 </style>
26 <style media="screen">
27 .green{border:solid #008000 1px}.error{border:solid #f00 1px}.StripeElement{box-sizing:border-box;height:40px;padding:10px 12px;border:2px solid transparent;border-radius:8px;background-color:#eee;box-shadow:0 1px 5px 0 #222;-webkit-transition:box-shadow 150ms ease;transition:box-shadow 150ms ease}.StripeElement--focus{box-shadow:0 1px 5px 0 #36f}.StripeElement--invalid{border-color:#fa755a}.StripeElement--webkit-autofill{background-color:#fefde5 !important}.button{display:inline-block;border-radius:18px;background-color:#337ab7;border:4px solid #222;color:#f2f2f2 !important;text-align:center;font-size:28px;padding:20px;width:98%;transition:all .5s;cursor:pointer;margin:5px}.button span{cursor:pointer;display:inline-block;position:relative;transition:.5s}.button span:after{position:absolute;opacity:0;top:0;right:-20px;transition:.5s}.button:hover span{padding-right:25px}.button:hover span:after{opacity:1;right:0}
28 </style>
29 </head>
30 <body appid="simpli-buy-7d636b">
31 <div id="smallForm">
32 <class appallin-universal-section="" au-pt-20="" dynamic-sized-element="" section-hovered="" style="background-color:rgba(255,255,255);background-size:cover;background-position:center center;background-repeat:no-repeat;padding:202px 0 !important;margin:0 !important;border-width:0;border-color:#424242;border-style:solid" margin-desktop-top="0" margin-desktop-bottom="0" margin-desktop-left="0" margin-desktop-right="0" padding-desktop-top="202" padding-desktop-bottom="202" padding-desktop-left="0" padding-desktop-right="0" video-background-poster="" video-background-path="" id="ui-id-194" market-id="3698873" owner-id="25" category="Hero">
33 <div class="container">
34 <div class="row">
35 <div class="col-sm-4 col-smp-4 col-md-2" style="margin:0 !important;padding:0 15px !important" margin-desktop-top="0" margin-desktop-bottom="0" margin-desktop-left="15" margin-desktop-right="15" padding-desktop-top="0" padding-desktop-bottom="0" padding-desktop-left="15" padding-desktop-right="15">
36 </div>
37 <div class="col-sm-4 col-smp-4 col-md-8" style="background-size:cover;background-repeat:no-repeat;background-attachment:initial;background-position:50% 50%;border-width:3px 3px 3px 3px;border-color:#dcdcdc;border-style:solid" video-background-poster="" video-background-path="">
38 <h3 class="appdrag-element fs-m" style="position:relative;margin-bottom:10px !important;margin-top:0 !important;padding:0 !important;text-align:justify !important" category="Texts" margin-desktop-bottom="10" padding-desktop-top="0" padding-desktop-bottom="0" padding-desktop-left="15" padding-desktop-right="15" market-id="3700131" owner-id="4" fs-m="11">
39 <br>
40 <br>
41 <span style="letter-spacing:1em;font-size:11px"><span style="font-family:syncopate"><strong><span style="font-size:24px">EMAIL ADDRESS:</span></strong></span></span>
42 </h3>
43 <div class="form-group">
44 <input type="text" id="email" name="email" placeholder="EXAMPLE@EMAIL.COM" class="form-control" style="font-family:Frutiger-Light;font-weight:bold;letter-spacing:.2em;border-width:3px;border-style:solid;border-color:#676767;text-indent:15px;height:50px;background-color:#ebebeb" letter-spacing="20" value="">
45 <style class="placeholder-color">
46 .appdrag-element[placeholder-id='dfk17r1m2q1'] ::-webkit-input-placeholder{color:rgba(182,182,182,1)}.appdrag-element[placeholder-id='dfk17r1m2q1'] :moz-placeholder{color:rgba(182,182,182,1)}.appdrag-element[placeholder-id='dfk17r1m2q1'] ::-moz-placeholder{color:rgba(182,182,182,1)}.appdrag-element[placeholder-id='dfk17r1m2q1'] :-ms-input-placeholder{color:rgba(182,182,182,1)}
47 </style>
48 </div>
49 <div class="form-group">
50 <input type="hidden" id="origin" name="origin" placeholder="" class="form-control" style="font-family:Frutiger-Light;font-weight:bold;letter-spacing:.2em;border-width:3px;border-style:solid;border-color:#676767;text-indent:15px;height:50px;background-color:#ebebeb" letter-spacing="20" value="origin">
51 <style class="placeholder-color">
52 .appdrag-element[placeholder-id='dfk17r1m2q1'] ::-webkit-input-placeholder{color:rgba(182,182,182,1)}.appdrag-element[placeholder-id='dfk17r1m2q1'] :moz-placeholder{color:rgba(182,182,182,1)}.appdrag-element[placeholder-id='dfk17r1m2q1'] ::-moz-placeholder{color:rgba(182,182,182,1)}.appdrag-element[placeholder-id='dfk17r1m2q1'] :-ms-input-placeholder{color:rgba(182,182,182,1)}
53 </style>
54 </div>
55 <h3 class="appdrag-element fs-tp fs-m" style="position:relative;margin-bottom:10px !important;margin-top:0 !important;padding:0 !important;text-align:justify !important" category="Texts" margin-desktop-bottom="10" padding-desktop-top="0" padding-desktop-bottom="0" padding-desktop-left="0" padding-desktop-right="0" market-id="3700132" owner-id="4" fs-tp="24" fs-m="12">
56 <span style="letter-spacing:1em;font-size:12px"><span style="font-family:syncopate"><strong><span style="font-size:24px">PHONE NUMBER:</span></strong></span></span>
57 </h3>
58 <div class="form-group">
59 <input type="text" id="phone_number" name="phone_number" placeholder="5551234567" class="form-control" style="font-family:Frutiger-Light;font-weight:bold;letter-spacing:.2em;border-width:3px;border-style:solid;border-color:#676767;text-indent:15px;height:50px;background-color:#ebebeb" letter-spacing="20" value="">
60 <style class="placeholder-color">
61 .appdrag-element[placeholder-id='dfk17r1m2q1'] ::-webkit-input-placeholder{color:rgba(182,182,182,1)}.appdrag-element[placeholder-id='dfk17r1m2q1'] :moz-placeholder{color:rgba(182,182,182,1)}.appdrag-element[placeholder-id='dfk17r1m2q1'] ::-moz-placeholder{color:rgba(182,182,182,1)}.appdrag-element[placeholder-id='dfk17r1m2q1'] :-ms-input-placeholder{color:rgba(182,182,182,1)}
62 </style>
63 </div>
64 <h3 class="appdrag-element fs-m" style="position:relative;margin-bottom:10px !important;margin-top:50px !important;padding:0 !important;text-align:justify !important" category="Texts" margin-desktop-bottom="10" padding-desktop-top="0" padding-desktop-bottom="0" padding-desktop-left="0" padding-desktop-right="0" market-id="3700131" owner-id="4" margin-desktop-top="50" fs-m="24">
65 <span style="font-size:30px"><span style="letter-spacing:1em"><span style="font-family:syncopate"><strong>TOTAL:</strong></span></span></span>
66 </h3>
67 <div class="form-group">
68 <input type="text" id="amount_big" name="amount_big" placeholder="$0.00" class="form-control" style="font-family:Frutiger-Light;font-weight:bold;letter-spacing:.2em;border-width:3px;border-style:solid;border-color:#676767;text-indent:15px;height:50px;background-color:#ebebeb" letter-spacing="20" value="">
69 <style class="placeholder-color">
70 .appdrag-element[placeholder-id='dfk17r1m2q1'] ::-webkit-input-placeholder{color:rgba(182,182,182,1)}.appdrag-element[placeholder-id='dfk17r1m2q1'] :moz-placeholder{color:rgba(182,182,182,1)}.appdrag-element[placeholder-id='dfk17r1m2q1'] ::-moz-placeholder{color:rgba(182,182,182,1)}.appdrag-element[placeholder-id='dfk17r1m2q1'] :-ms-input-placeholder{color:rgba(182,182,182,1)}
71 </style>
72 <br>
73 <br>
74 <button style="vertical-align:middle" onclick="submitSmallForm()"><span>CONTINUE</span></button>
75 </div>
76 <br>
77 <h2 class="appdrag-element dynamic-sized-element ui-draggable-handle resizable-elem" style="position:relative;border-width:0;border-color:#636363;border-style:solid;margin-left:0;text-align:center !important;margin-top:0 !important;margin-right:0 !important;margin-bottom:20px !important;padding:0 0 5px !important" margin-desktop-top="0" margin-desktop-bottom="20" margin-desktop-left="0" margin-desktop-right="0" padding-desktop-top="0" padding-desktop-bottom="5" padding-desktop-left="0" padding-desktop-right="0">
78 <span style="letter-spacing:.05em"><span style="font-size:14px"><strong><span class="appdrag-palette-color-text-color" ck-color-back="text-color"><span style="font-family:montserrat"><span style="font-family:montserrat"><span style="text-decoration:inherit">DONT HAVE AN ACCOUNT? </span><span style="text-decoration:inherit" class="appdrag-palette-color-secondary-text-color" ck-color-back="secondary-text-color"><a data-cke-saved-href="https://ecommoncents.com/SIGN-UP.html" data-cke-pa-onclick="window.open(this.href, 'SIGNUP', 'resizable=yes,status=no,location=no,toolbar=no,menubar=no,fullscreen=no,scrollbars=no,dependent=no,width=600,height=750'); return false;" href="https://ecommoncents.com/SIGN-UP.html">SIGN UP</a> </span><span style="text-decoration:inherit">IN SECONDS</span></span></span></span></strong></span></span>
79 </h2>
80 </div>
81 <div class="col-sm-4 col-smp-4 col-md-2">
82 </div>
83 </div>
84 </div>
85 </class>
86 </div>
87 <br>
88 <br>
89 <style media="screen">
90 .green{border:solid #008000 2px}.error{border:solid #f00 1px}.StripeElement{box-sizing:border-box;height:40px;padding:10px 12px;border:2px solid transparent;border-radius:8px;background-color:#eee;box-shadow:0 1px 5px 0 #222;-webkit-transition:box-shadow 150ms ease;transition:box-shadow 150ms ease}.StripeElement--focus{box-shadow:5px 2px 5px 4px #36f}.StripeElement--invalid{border-color:#fa755a}.StripeElement--webkit-autofill{background-color:#fefde5 !important}.button{display:inline-block;border-radius:18px;background-color:#337ab7;border:4px solid #222;color:#f2f2f2 !important;text-align:center;font-size:28px;padding:20px;width:100%;transition:all .5s;cursor:pointer;margin:5px}.button span{cursor:pointer;display:inline-block;position:relative;transition:.5s}.button span:after{position:absolute;opacity:0;top:0;right:-20px;transition:.5s}.button:hover span{padding-right:25px}.button:hover span:after{opacity:1;right:0}
91 </style>
92 <br>
93 <br>
94 <br>
95 <div id="bigForm">
96 <form id="payment-form">
97 <div class="container">
98 <div class="form-group">
99 <input type="text" id="amount" name="amount" class="form-control" style="font-family:Frutiger-Light;font-weight:bold;letter-spacing:.2em;border-width:3px;border-style:solid;border-color:#444;text-indent:15px;height:50px;background-color:#fff" letter-spacing="20" value="amount">
100 <div id="amount">
101 </div>
102 <input type="hidden" id="stripeAccount" name="stripeAccount" class="form-control" style="font-family:Frutiger-Light;font-weight:bold;letter-spacing:.2em;border-width:4px;border-style:solid;border-color:#222;text-indent:15px;height:60px;background-color:#fff" letter-spacing="20" size="8" value="stripeAccount">
103 <div id="stripeAccount">
104 </div>
105 <input type="hidden" id="store_hash" name="store_hash" class="form-control" style="font-family:Frutiger-Light;font-weight:bold;letter-spacing:.2em;border-width:4px;border-style:solid;border-color:#222;text-indent:15px;height:60px;background-color:#fff" letter-spacing="20" size="8" value="store_hash">
106 <div id="store_hash">
107 </div>
108 <input type="text" id="x_auth_token" name="x_auth_token" class="form-control" style="font-family:Frutiger-Light;font-weight:bold;letter-spacing:.2em;border-width:4px;border-style:solid;border-color:#222;text-indent:15px;height:60px;background-color:#fff" letter-spacing="20" size="8" value="x_auth_token">
109 <div id="x_auth_token">
110 </div>
111 <input type="hidden" id="x_auth_client" name="x_auth_client" class="form-control" style="font-family:Frutiger-Light;font-weight:bold;letter-spacing:.2em;border-width:4px;border-style:solid;border-color:#222;text-indent:15px;height:60px;background-color:#fff" letter-spacing="20" size="8" value="x_auth_client">
112 <div id="x_auth_client">
113 </div>
114 <input type="text" id="phone_number_big" name="phone_number_big" class="form-control" style="font-family:Frutiger-Light;font-weight:bold;letter-spacing:.2em;border-width:4px;border-style:solid;border-color:#222;text-indent:15px;height:60px;background-color:#fff" letter-spacing="20" size="8" value="phone_number">
115 </div>
116 <div id="phone_number">
117 </div>
118 <input type="hidden" id="email_big" name="email_big" class="form-control" style="font-family:Frutiger-Light;font-weight:bold;letter-spacing:.2em;border-width:4px;border-style:solid;border-color:#222;text-indent:15px;height:60px;background-color:#fff" letter-spacing="20" size="8" value="email">
119 <div id="email">
120 </div>
121
122 <input type="hidden" id="clientSecret" name="clientSecret" class="form-control" style="font-family:Frutiger-Light;font-weight:bold;letter-spacing:.2em;border-width:4px;border-style:solid;border-color:#222;text-indent:15px;height:60px;background-color:#fff" letter-spacing="20" size="8" value="clientSecret">
123 </div>
124 <div id="clientSecret">
125 </div>
126 <div id="card-element">
127 </div>
128 <br>
129 <br>
130 <button id="submit">
131 <script>
132 // A reference to Stripe.js initialized with your real test publishable API key.
133var stripe = Stripe("pk_test_jZ7dhI358i0PyN4SLawcndTI00t09Mj1Nb");
134clientSecret = '';
135function checkoutData() {
136 debugger;
137// var settings = {
138// "url": "https://www.ecommoncents.com/api/WORKFLOW/PAYMENTINTENT-CREATEv3",
139// "data": {
140// "origin" : origin,
141// "email" : email,
142// "amount" : amount,
143// "stripeAccount" : stripeAccount,
144// "phone_number" : phone_number
145// },
146// "method": "POST",
147// "async": true,
148// "crossDomain": true,
149// "processData": false,
150// "dataType": 'json'
151// };
152// $.ajax(settings).done(function (response) {
153// console.log(response)
154// const data = response
155// clientSecret = data.paymentIntent.client_secret
156// console.log(data)
157// });
158
159var data= {
160 "origin" : origin,
161 "email" : email,
162 "amount" : amount,
163 "stripeAccount" : stripeAccount,
164 "phone_number" : phone_number
165 };
166
167 $.ajax({
168 dataType: 'json',
169 type: 'POST',
170 url: 'https://www.ecommoncents.com/api/WORKFLOW/PAYMENTINTENT-CREATEv3',
171 data: data,
172 crossDomain: true,
173 processData: false,
174 success: function(results) {
175 // populate knockout vm with results...
176 }
177 });
178}
179function purchaseData() {
180debugger;
181 var FEE = (amount *.021).toFixed(0);
182 // The items the customer wants to buy
183 var purchase = {
184 items: [{
185 name: "$" + amount + " ORDER",
186 amount: amount,
187 currency: 'usd',
188 quantity: 1,
189 }],
190 payment_intent_data: {
191 application_fee_amount: FEE,
192 on_behalf_of: stripeAccount,
193 transfer_data: {
194 destination: stripeAccount,
195 },
196 }
197 };
198}
199
200 // Calls stripe.confirmCardPayment
201 // If the card requires authentication Stripe shows a pop-up modal to
202 // prompt the user to enter authentication details without leaving your page.
203 var payWithCard = function(stripe, card, clientSecret) {
204 debugger;
205 loading(true);
206 stripe
207 .confirmCardPayment(clientSecret, {
208 payment_method: {
209 card: card
210 }
211 })
212 .then(function(result) {
213 debugger;
214 if (result.error) {
215 alert('CARD DECLINED PLEASE CONTACT FINANCIAL INSTITUTION');
216 showError(result.error.message);
217 } else if (result.paymentIntent.id) {
218 debugger;
219 var TWILIO_ACCOUNT_SID = "ACfb6a9d32085e31c856f57ca068ad109d"; // Replace with your Twilio ACCOUNT_SID
220var TWILIO_AUTH_TOKEN = "638c86a2a1b78e557eec8dca8acd47b1"; // Replace with your Twilio AUTH_TOKEN
221var TWILIO_PHONE_NUMBER = "+12036337695"; // Replace with your Twilio phone number, must be an SMS enabled phone number
222
223const client = require('twilio')(TWILIO_ACCOUNT_SID, TWILIO_AUTH_TOKEN);
224
225exports.handler = (event, context, callback) => {
226
227 // POST Parameters
228 var DEST_CELL_PHONE_NUMBER = event["POST"]["phone_number"];
229 var EMAIL = event["POST"]["email"];
230 var TOTAL = event["POST"]["amount"];
231 var PROMO = Math.floor(Math.random(10000000) * 99999999);
232 generateCoupon();
233
234 //Send the SMS
235 client.messages.create({
236 from: TWILIO_PHONE_NUMBER,
237 to: DEST_CELL_PHONE_NUMBER,
238 body: "USE PROMO CODE " + PROMO + " TO REDEEM YOUR " + TOTAL + " CREDITS"
239 }, function(err, message) {
240
241 if (err != null) {
242 callback(null, "Error: " + err); //in case of error
243 } else {
244 //remove useless attribute that prevent json serialization
245 delete message['_version'];
246
247 //return response
248 callback(null, message); //if it worked
249 }
250
251 });
252
253 function sendSMS() {
254debugger;
255 var settings = {
256 "url": "https://simpli-buy-7d636b.appdrag.site/api/COUPON-GENERATOR",
257 "data": {
258 "email": EMAIL,
259 "phone_number": PHONE,
260 "amount": TOTAL,
261 "coupon_code": PROMO
262 },
263 "method": "POST",
264 "async": true,
265 "crossDomain": true,
266 "processData": true
267 };
268 $.ajax(settings).done(function(response) {
269 const data = response
270 var tableData = data.Table[0];
271 if (tableData != undefined && tableData != null) {
272
273 $('#email').val(tableData.email);
274 $('#phone_number').val(tableData.phone_number);
275 $('#amount').val(tableData.amount);
276 $('#coupon_code').val(tableData.coupon_code);
277
278
279 }
280 });
281 }
282
283 function generateCoupon() {
284debugger;
285 var STORE_HASH = event["POST"]["store_hash"];
286 var X_AUTH_TOKEN = event["POST"]["x_auth_token"];
287 var X_AUTH_CLIENT = event["POST"]["x_auth_client"];
288 var request = require("request");
289
290 var options = {
291 method: 'POST',
292 url: 'https://api.bigcommerce.com/stores/' + STORE_HASH + '/v2/coupons', //this will be dynamic //so we need to take the data from the table to be inserted in here unique to each user?
293 headers: {
294 accept: 'application/json',
295 'content-type': 'application/json',
296 'x-auth-token': X_AUTH_TOKEN, //also this
297 'x-auth-client': X_AUTH_CLIENT // and this
298 },
299 body: {
300 name: "$" + TOTAL + " STORE CREDITS FOR " + EMAIL, //type your varaible
301 type: 'per_total_discount',
302 code: PROMO,
303 enabled: true,
304 amount: TOTAL,
305 max_uses: 1, //run it
306 applies_to: {
307 entity: 'categories',
308 ids: [0]
309 }
310 },
311 json: true
312 };
313
314 request(options, function(error, response, body) {
315 if (error) throw new Error(error);
316
317 console.log(body);
318 });
319 }
320}
321
322
323 }
324 });
325 };
326
327 /* ------- UI helpers ------- */
328 // Shows a success message when the payment is complete
329 var orderComplete = function(paymentIntentId) {
330 loading(false);
331 document
332 .querySelector(".result-message a")
333 .setAttribute(
334 "href",
335 "https://dashboard.stripe.com/test/payments/" + paymentIntentId
336 );
337 document.querySelector(".result-message").classList.remove("hidden");
338 document.querySelector("button").disabled = true;
339 };
340 // Show the customer the error from Stripe if their card fails to charge
341 var showError = function(errorMsgText) {
342 loading(false);
343 var errorMsg = document.querySelector("#card-errors");
344 errorMsg.textContent = errorMsgText;
345 setTimeout(function() {
346 errorMsg.textContent = "";
347 }, 4000);
348 };
349 // Show a spinner on payment submission
350 var loading = function(isLoading) {
351 if (isLoading) {
352 // Disable the button and show a spinner
353 document.querySelector("button").disabled = true;
354 document.querySelector("#spinner").classList.remove("hidden");
355 document.querySelector("#button-text").classList.add("hidden");
356 } else {
357 document.querySelector("button").disabled = false;
358 document.querySelector("#spinner").classList.add("hidden");
359 document.querySelector("#button-text").classList.remove("hidden");
360 }
361 };
362
363 </script>
364 <script>
365
366
367 // Disable the button until we have Stripe set up on the page
368 document.querySelector("button").disabled = false;
369 var elements = stripe.elements();
370 var style = {
371 base: {
372 color: "#32325d",
373 fontFamily: 'Arial, sans-serif',
374 fontSmoothing: "antialiased",
375 fontSize: "16px",
376 "::placeholder": {
377 color: "#32325d"
378 }
379 },
380 invalid: {
381 fontFamily: 'Arial, sans-serif',
382 color: "#fa755a",
383 iconColor: "#fa755a"
384 }
385 };
386 var card = elements.create("card", {
387 style: style
388 });
389 // Stripe injects an iframe into the DOM
390 card.mount("#card-element");
391 card.on("change", function(event) {
392 // Disable the Pay button if there are no card details in the Element
393 document.querySelector("button").disabled = event.empty;
394 document.querySelector("#card-errors").textContent = event.error ? event.error.message : "";
395 });
396 var form = document.getElementById("payment-form");
397 form.addEventListener("submit", function(event) {
398 event.preventDefault();
399 // Complete payment when the submit button is clicked
400 debugger;
401 checkoutData();
402 purchaseData(stripe, card, clientSecret);
403 });
404
405
406 </script>
407 <div class="spinner hidden" id="spinner">
408 </div>
409 <span id="button-text">Pay</span></button>
410 <p id="card-errors" role="alert">
411 </p>
412 <p class="result-message hidden">
413 Payment succeeded, see the result in your <a href="" target="_blank">Stripe dashboard.</a> Refresh the page to pay again.
414 </p>
415 </form>
416 <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
417
418
419 </script>
420 <script>
421
422
423 $('#bigForm').hide();
424
425 </script>
426 <script>
427
428
429 function submitSmallForm(){
430 var settings = {
431 "url": "https://www.ecommoncents.com/api/authentication/CHECKOUT-VERIFICATION",
432 "data": {
433 "email" : $('#email').val(),
434 "phone_number" : $('#phone_number').val(),
435 "amount" : $('#amount').val(),
436 "AD_PageNbr" : "1",
437 "AD_PageSize" : "500"
438 },
439 "method": "POST",
440 "async": false,
441 "crossDomain": true,
442 "processData": true
443 };
444
445 $.ajax(settings).done(function (response) {
446 const data = response
447 var tableData = data.Table[0];
448 if (tableData != undefined && tableData != null) {
449 $('#smallForm').hide();
450 submitBigForm();
451 $('#bigForm').show();
452 } else {
453 alert('Invalid email or password');
454 };
455 });
456
457 }
458
459 function submitBigForm(){
460 var origin = location.host;
461 var settings = {
462 "url": "https://www.ecommoncents.com/api/WORKFLOW/HEADERSv2",
463 "data": {
464 "origin" : origin,
465 "AD_PageNbr" : "1",
466 "AD_PageSize" : "500"
467 },
468 "method": "POST",
469 "async": true,
470 "crossDomain": true,
471 "processData": true
472 };
473 $.ajax(settings).done(function (response) {
474 const data = response
475 var tableData = data.Table[0];
476 if (tableData != undefined && tableData != null) {
477 $('#stripeAccount').val(tableData.stripeAccount);
478 $('#store_hash').val(tableData.store_hash);
479 $('#x_auth_token').val(tableData.x_auth_token);
480 $('#x_auth_client').val(tableData.x_auth_client);
481
482 $('#phone_number_big').val($('#phone_number').val());
483 $('#amount').val($('#amount_big').val());
484 $('#email_big').val($('#email').val());
485 }
486 });
487
488 }
489
490 </script>
491 </div>
492 </body>
493</html>