· 5 years ago · May 09, 2020, 06:54 PM
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 <input type="hidden" 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">
99 <div id="amount">
100 </div>
101 <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">
102 <div id="stripeAccount">
103 </div>
104 <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">
105 <div id="store_hash">
106 </div>
107 <input type="hidden" 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">
108 <div id="x_auth_token">
109 </div>
110 <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">
111 <div id="x_auth_client">
112 </div>
113 <input type="hidden" 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">
114 </div>
115 <div id="phone_number">
116 </div>
117 <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">
118 <div id="email">
119 </div>
120 <div class="form-group">
121 <input type="hidden" id="stripeToken" name="stripeToken" 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="stripeToken">
122 </div>
123 <div id="card-element">
124 </div>
125 <br>
126 <br>
127 <button id="submit">
128 <script>
129 // A reference to Stripe.js initialized with your real test publishable API key.
130var stripe = Stripe("pk_test_jZ7dhI358i0PyN4SLawcndTI00t09Mj1Nb");
131clientSecret = '';
132/*function checkoutData() {
133var settings = {
134 "url": "https://www.ecommoncents.com/api/WORKFLOW/PAYMENTINTENT-CREATE",
135 "data": {
136 "origin" : origin,
137 "email" : email,
138 "amount" : amount,
139 "stripeAccount" : stripeAccount,
140 "phone_number" : phone_number
141 },
142 "method": "POST",
143 "async": true,
144 "crossDomain": true,
145 "processData": true
146};
147$.ajax(settings).done(function (response) {
148 console.log(response)
149 const data = response
150 clientSecret = data.paymentIntent.client_secret
151 console.log(data)
152});
153}*/
154function purchaseData() {
155 var FEE = (amount *.021).toFixed(0);
156 // The items the customer wants to buy
157 var purchase = {
158 items: [{
159 name: "$" + amount + " ORDER",
160 amount: amount,
161 currency: 'usd',
162 quantity: 1,
163 }],
164 payment_intent_data: {
165 application_fee_amount: FEE,
166 on_behalf_of: stripeAccount,
167 transfer_data: {
168 destination: stripeAccount,
169 },
170 }
171 };
172}
173function checkoutData() {
174var settings = {
175 "url": "https://www.ecommoncents.com/api/WORKFLOW/PAYMENTINTENT-CREATE",
176 "data": {
177 "origin" : origin,
178 "email" : email,
179 "amount" : amount,
180 "stripeAccount" : stripeAccount,
181 "phone_number" : phone_number
182 },
183 "method": "POST",
184 "async": true,
185 "crossDomain": true,
186 "processData": true
187};
188$.ajax(settings).done(function (response) {
189 console.log(response)
190 const data = response
191 clientSecret = data.paymentIntent.client_secret
192 console.log(data)
193});
194}
195
196 // Calls stripe.confirmCardPayment
197 // If the card requires authentication Stripe shows a pop-up modal to
198 // prompt the user to enter authentication details without leaving your page.
199 var payWithCard = function(stripe, card, clientSecret) {
200 loading(true);
201 stripe
202 .confirmCardPayment(clientSecret, {
203 payment_method: {
204 card: card
205 }
206 })
207 .then(function(result) {
208 if (result.error) {
209 alert('CARD DECLINED PLEASE CONTACT FINANCIAL INSTITUTION');
210 showError(result.error.message);
211 } else if (result.paymentIntent.id) {
212
213 var TWILIO_ACCOUNT_SID = "ACfb6a9d32085e31c856f57ca068ad109d"; // Replace with your Twilio ACCOUNT_SID
214var TWILIO_AUTH_TOKEN = "638c86a2a1b78e557eec8dca8acd47b1"; // Replace with your Twilio AUTH_TOKEN
215var TWILIO_PHONE_NUMBER = "+12036337695"; // Replace with your Twilio phone number, must be an SMS enabled phone number
216
217const client = require('twilio')(TWILIO_ACCOUNT_SID, TWILIO_AUTH_TOKEN);
218
219exports.handler = (event, context, callback) => {
220
221 // POST Parameters
222 var DEST_CELL_PHONE_NUMBER = event["POST"]["phone_number"];
223 var EMAIL = event["POST"]["email"];
224 var TOTAL = event["POST"]["amount"];
225 var PROMO = Math.floor(Math.random(10000000) * 99999999);
226 generateCoupon();
227
228 //Send the SMS
229 client.messages.create({
230 from: TWILIO_PHONE_NUMBER,
231 to: DEST_CELL_PHONE_NUMBER,
232 body: "USE PROMO CODE " + PROMO + " TO REDEEM YOUR " + TOTAL + " CREDITS"
233 }, function(err, message) {
234
235 if (err != null) {
236 callback(null, "Error: " + err); //in case of error
237 } else {
238 //remove useless attribute that prevent json serialization
239 delete message['_version'];
240
241 //return response
242 callback(null, message); //if it worked
243 }
244
245 });
246
247 function sendSMS() {
248debugger;
249 var settings = {
250 "url": "https://simpli-buy-7d636b.appdrag.site/api/COUPON-GENERATOR",
251 "data": {
252 "email": EMAIL,
253 "phone_number": PHONE,
254 "amount": TOTAL,
255 "coupon_code": PROMO
256 },
257 "method": "POST",
258 "async": true,
259 "crossDomain": true,
260 "processData": true
261 };
262 $.ajax(settings).done(function(response) {
263 const data = response
264 var tableData = data.Table[0];
265 if (tableData != undefined && tableData != null) {
266
267 $('#email').val(tableData.email);
268 $('#phone_number').val(tableData.phone_number);
269 $('#amount').val(tableData.amount);
270 $('#coupon_code').val(tableData.coupon_code);
271
272
273 }
274 });
275 }
276
277 function generateCoupon() {
278debugger;
279 var STORE_HASH = event["POST"]["store_hash"];
280 var X_AUTH_TOKEN = event["POST"]["x_auth_token"];
281 var X_AUTH_CLIENT = event["POST"]["x_auth_client"];
282 var request = require("request");
283
284 var options = {
285 method: 'POST',
286 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?
287 headers: {
288 accept: 'application/json',
289 'content-type': 'application/json',
290 'x-auth-token': X_AUTH_TOKEN, //also this
291 'x-auth-client': X_AUTH_CLIENT // and this
292 },
293 body: {
294 name: "$" + TOTAL + " STORE CREDITS FOR " + EMAIL, //type your varaible
295 type: 'per_total_discount',
296 code: PROMO,
297 enabled: true,
298 amount: TOTAL,
299 max_uses: 1, //run it
300 applies_to: {
301 entity: 'categories',
302 ids: [0]
303 }
304 },
305 json: true
306 };
307
308 request(options, function(error, response, body) {
309 if (error) throw new Error(error);
310
311 console.log(body);
312 });
313 }
314}
315
316
317 }
318 });
319 };
320
321 /* ------- UI helpers ------- */
322 // Shows a success message when the payment is complete
323 var orderComplete = function(paymentIntentId) {
324 loading(false);
325 document
326 .querySelector(".result-message a")
327 .setAttribute(
328 "href",
329 "https://dashboard.stripe.com/test/payments/" + paymentIntentId
330 );
331 document.querySelector(".result-message").classList.remove("hidden");
332 document.querySelector("button").disabled = true;
333 };
334 // Show the customer the error from Stripe if their card fails to charge
335 var showError = function(errorMsgText) {
336 loading(false);
337 var errorMsg = document.querySelector("#card-errors");
338 errorMsg.textContent = errorMsgText;
339 setTimeout(function() {
340 errorMsg.textContent = "";
341 }, 4000);
342 };
343 // Show a spinner on payment submission
344 var loading = function(isLoading) {
345 if (isLoading) {
346 // Disable the button and show a spinner
347 document.querySelector("button").disabled = true;
348 document.querySelector("#spinner").classList.remove("hidden");
349 document.querySelector("#button-text").classList.add("hidden");
350 } else {
351 document.querySelector("button").disabled = false;
352 document.querySelector("#spinner").classList.add("hidden");
353 document.querySelector("#button-text").classList.remove("hidden");
354 }
355 };
356
357 </script>
358 <script>
359
360
361 // Disable the button until we have Stripe set up on the page
362 document.querySelector("button").disabled = false;
363 var elements = stripe.elements();
364 var style = {
365 base: {
366 color: "#32325d",
367 fontFamily: 'Arial, sans-serif',
368 fontSmoothing: "antialiased",
369 fontSize: "16px",
370 "::placeholder": {
371 color: "#32325d"
372 }
373 },
374 invalid: {
375 fontFamily: 'Arial, sans-serif',
376 color: "#fa755a",
377 iconColor: "#fa755a"
378 }
379 };
380 var card = elements.create("card", {
381 style: style
382 });
383 // Stripe injects an iframe into the DOM
384 card.mount("#card-element");
385 card.on("change", function(event) {
386 // Disable the Pay button if there are no card details in the Element
387 document.querySelector("button").disabled = event.empty;
388 document.querySelector("#card-errors").textContent = event.error ? event.error.message : "";
389 });
390 var form = document.getElementById("payment-form");
391 form.addEventListener("submit", function(event) {
392 event.preventDefault();
393 // Complete payment when the submit button is clicked
394 purchaseData(stripe, card, clientSecret);
395 });
396
397
398 </script>
399 <div class="spinner hidden" id="spinner">
400 </div>
401 <span id="button-text">Pay</span></button>
402 <p id="card-errors" role="alert">
403 </p>
404 <p class="result-message hidden">
405 Payment succeeded, see the result in your <a href="" target="_blank">Stripe dashboard.</a> Refresh the page to pay again.
406 </p>
407 </form>
408 <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
409
410
411 </script>
412 <script>
413
414
415 $('#bigForm').hide();
416
417 </script>
418 <script>
419
420
421 function submitSmallForm(){
422 var settings = {
423 "url": "https://www.ecommoncents.com/api/authentication/CHECKOUT-VERIFICATION",
424 "data": {
425 "email" : $('#email').val(),
426 "phone_number" : $('#phone_number').val(),
427 "amount" : $('#amount').val(),
428 "AD_PageNbr" : "1",
429 "AD_PageSize" : "500"
430 },
431 "method": "POST",
432 "async": false,
433 "crossDomain": true,
434 "processData": true
435 };
436
437 $.ajax(settings).done(function (response) {
438 const data = response
439 var tableData = data.Table[0];
440 if (tableData != undefined && tableData != null) {
441 $('#smallForm').hide();
442 submitBigForm();
443 $('#bigForm').show();
444 } else {
445 alert('Invalid email or password');
446 };
447 });
448
449 }
450
451 function submitBigForm(){
452 var origin = location.host;
453 var settings = {
454 "url": "https://www.ecommoncents.com/api/WORKFLOW/HEADERSv2",
455 "data": {
456 "origin" : origin,
457 "AD_PageNbr" : "1",
458 "AD_PageSize" : "500"
459 },
460 "method": "POST",
461 "async": true,
462 "crossDomain": true,
463 "processData": true
464 };
465 $.ajax(settings).done(function (response) {
466 const data = response
467 var tableData = data.Table[0];
468 if (tableData != undefined && tableData != null) {
469 $('#stripeAccount').val(tableData.stripeAccount);
470 $('#store_hash').val(tableData.store_hash);
471 $('#x_auth_token').val(tableData.x_auth_token);
472 $('#x_auth_client').val(tableData.x_auth_client);
473
474 $('#phone_number_big').val($('#phone_number').val());
475 $('#amount').val($('#amount_big').val());
476 $('#email_big').val($('#email').val());
477 }
478 });
479
480 }
481
482 </script>
483 </div>
484 </body>
485</html>