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