├── CSS ├── CSS_Stripe_Base.html ├── CSS_Stripe_Example1.html ├── CSS_Stripe_Example2.html ├── CSS_Stripe_Example3.html ├── CSS_Stripe_Example4.html └── CSS_Stripe_Example5.html ├── GS Code ├── Code.gs ├── GS_Customer_Utilities.gs ├── GS_Error.gs ├── GS_Stripe.gs └── GS_Template_Code.gs ├── HTML └── H_Stripe.html ├── JS ├── JS_Stripe_Example1.html ├── JS_Stripe_Example2.html ├── JS_Stripe_Example3.html ├── JS_Stripe_Example4.html ├── JS_Stripe_Example5.html ├── JS_Stripe_Index.html └── JS_Stripe_Pay.html ├── README.md └── appsscript.json /CSS/CSS_Stripe_Base.html: -------------------------------------------------------------------------------- 1 | 693 | 694 | 695 | -------------------------------------------------------------------------------- /CSS/CSS_Stripe_Example1.html: -------------------------------------------------------------------------------- 1 | 164 | 165 | 166 | -------------------------------------------------------------------------------- /CSS/CSS_Stripe_Example2.html: -------------------------------------------------------------------------------- 1 | 232 | 233 | 234 | -------------------------------------------------------------------------------- /CSS/CSS_Stripe_Example3.html: -------------------------------------------------------------------------------- 1 | 170 | 171 | 172 | -------------------------------------------------------------------------------- /CSS/CSS_Stripe_Example4.html: -------------------------------------------------------------------------------- 1 | 162 | 163 | 164 | -------------------------------------------------------------------------------- /CSS/CSS_Stripe_Example5.html: -------------------------------------------------------------------------------- 1 | 208 | 209 | 210 | -------------------------------------------------------------------------------- /GS Code/Code.gs: -------------------------------------------------------------------------------- 1 | /* 2 | INSTRUCTIONS 3 | 4 | Click the File menu 5 | Choose Make a copy 6 | The copy will be saved to your Google Drive 7 | You will be the owner of the file saved to your Google Drive 8 | 9 | Authorize the Web App 10 | Click the Run icon that is a triangle 11 | Grant permissions 12 | 13 | Get the API secrets from your stripe account 14 | Add the client secret (pk_test_12346) to the JS_Stripe_Index file 15 | Add the server side secret sk_test_) to the GS_Stripe file 16 | Test the payment 17 | 18 | Publish the Web App 19 | 20 | */ 21 | 22 | /* 23 | GitHub link to stripe example: 24 | https://github.com/stripe/stripe-payments-demo 25 | */ 26 | 27 | function doGet() { 28 | var h; 29 | 30 | h = HtmlService.createTemplateFromFile('H_Stripe').evaluate(); 31 | h.setTitle('Stripe V3'); 32 | 33 | return h; 34 | } 35 | -------------------------------------------------------------------------------- /GS Code/GS_Customer_Utilities.gs: -------------------------------------------------------------------------------- 1 | /* 2 | This code was written by Alan Wells 3 | This code is is not copywrited and has no liscence - 4 | You can use or modify the code however you wish 5 | This code is or was originally in an Apps Script project file and an inner html file named GS_Template_Code 6 | */ 7 | 8 | 9 | function update_Customer_Database() { 10 | var dateCustomerIsPaidUpTo; 11 | //Enter code here to update your customer database / spreadsheet 12 | 13 | dateCustomerIsPaidUpTo = new Date(); 14 | 15 | return dateCustomerIsPaidUpTo; 16 | } 17 | -------------------------------------------------------------------------------- /GS Code/GS_Error.gs: -------------------------------------------------------------------------------- 1 | /* 2 | This code was written by Alan Wells 3 | This code is is not copywrited and has no liscence - 4 | You can use or modify the code however you wish 5 | This code is or was originally in an Apps Script project file and an inner html file named GS_Template_Code 6 | */ 7 | 8 | 9 | function errorHandler_(po) { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /GS Code/GS_Stripe.gs: -------------------------------------------------------------------------------- 1 | function paymentSettings_() { 2 | return { 3 | nmbrOfDaysPaidFor:365, 4 | expectedPaymentAmt:2000, 5 | createCustomer:false, 6 | description:"My Add-on - One year subscription" 7 | } 8 | } 9 | 10 | function getStripeSecret_() { 11 | //You must get the server side stripe secret from your stripe account 12 | return 'Your stripe server side secret goes here'; 13 | } 14 | 15 | function runSrvrCode(x) { 16 | var dataObj,key; 17 | //console.log('x 17: ' + x) 18 | 19 | key = x[0];//Get key code sent from the client side 20 | dataObj = x[1]; 21 | //console.log('key 19: ' + key) 22 | //console.log('dataObj 19: ' + JSON.stringify(dataObj)) 23 | //console.log('dataObj.tokenId 19: ' + dataObj.tokenId) 24 | 25 | if (key === 'cpoisdnf') { 26 | if (!dataObj.tokenId) {return false;}//A token ID was not passed from the client side - something is wrong 27 | //The client side stripe code must generate a token ID to finish processing 28 | return vmopaw8475tygosadf_(dataObj);//Call 29 | } 30 | } 31 | 32 | function vmopaw8475tygosadf_(po) { 33 | try{ 34 | var amount,buildQryStr,charge,chargeResponse,createTheCustomer,customer,custId,description,jsonP,nmbrOfDaysPaidFor, 35 | paidToDate,params,paySets,postRequestToStripe,settings,token; 36 | /* 37 | This code makes a payment to stripe 38 | 39 | You must use a stripe secret which can be for either live or testing 40 | po.tokenId - 41 | */ 42 | 43 | buildQryStr = function(parameters) {//sub fnk 44 | try{ 45 | var k,value,qStr; 46 | qStr = []; 47 | 48 | for (k in parameters) { 49 | value = parameters[k]; 50 | 51 | if (parameters.hasOwnProperty(k) && value) { 52 | 53 | if (value.map) { 54 | qStr.push(value.map(function(array_value) { 55 | return k + "=" + encodeURIComponent(array_value); 56 | }).join("&")); 57 | } else { 58 | qStr.push(k + "=" + encodeURIComponent(value)); 59 | } 60 | } 61 | } 62 | 63 | qStr = qStr ? qStr.join("&") : ""; 64 | 65 | //Logger.log('qStr 45',qStr); 66 | return qStr 67 | }catch(e) { 68 | console.log("Err: " + e + "\nStack: " + e.stack) 69 | } 70 | } 71 | 72 | postRequestToStripe = function(argO) { 73 | try{ 74 | var mapKeyToUrl,options,qryStr,secret,url; 75 | /** 76 | * Generic function for making different types of POST requests to the Stripe API 77 | 78 | argO.requestType - type of API request 79 | argO.prmtrs - query string parameters 80 | argO.fields - 81 | argO.expandableFlds - fields to expand 82 | */ 83 | 84 | mapKeyToUrl = { 85 | chrg:'charges', 86 | cust:'customers' 87 | } 88 | 89 | if (argO.expandableFlds) { 90 | argO.prmtrs["expand[]"] = []; 91 | 92 | argO.fields.forEach(function(field) { 93 | //Logger.log('argO.fields 65',argO.fields) 94 | 95 | field = field.split(".")[0]; 96 | if (argO.expandableFlds.indexOf(field) !== -1) { 97 | argO.prmtrs["expand[]"].push("data." + field); 98 | } 99 | }); 100 | } 101 | 102 | secret = getStripeSecret_();//Get server side stripe secret 103 | 104 | options = { 105 | "method" : "post", 106 | "headers": { 107 | "Authorization": "Bearer " + secret, 108 | "User-Agent": "Company Name/1.0" 109 | //"Stripe-Version":"2019-11-05" - This is used to test a specific API version before changing to it in the stripe dashboard 110 | } 111 | }; 112 | 113 | qryStr = buildQryStr(argO.prmtrs); 114 | qryStr = qryStr ? "?" + qryStr : ""; 115 | //Logger.log('mapKeyToUrl[argO.requestType] 115: ' + mapKeyToUrl[argO.requestType]); 116 | 117 | url = "https://api.stripe.com/v1/" + mapKeyToUrl[argO.requestType] + qryStr; 118 | 119 | //Logger.log('url 119: ' + url); 120 | 121 | return Url_Fetch_App.fe_tch(url, options);//REMOVE THE UNDERBARS 122 | }catch(e) { 123 | console.log("Error: " + e + "Stack: " + e.stack) 124 | errorHandler_(e); 125 | return false; 126 | } 127 | } 128 | 129 | createTheCustomer = function() {// Create a Customer (optional) 130 | var customer,id,params,settings; 131 | 132 | params = { 133 | "description": "Company Name customer", 134 | "source": po.token.id, 135 | "email": po.email 136 | } 137 | 138 | settings = { 139 | requestType:'cust', 140 | prmtrs:params 141 | } 142 | 143 | customer = postRequestToStripe(settings);//Make a POST request to Stripe with this path and parameters 144 | //Logger.log('customer 128',JSON.stringify(customer)) 145 | 146 | if (customer === 'err') { 147 | return ['error',0]; 148 | } 149 | 150 | id = JSON.parse(customer.getContentText()).id; 151 | //Logger.log('id 135',id) 152 | return id; 153 | } 154 | 155 | //Logger.log("po 155: " + JSON.stringify(po)) 156 | 157 | if (!po.tokenId) {//The token ID was not passed in which is required - without it nothing can be done 158 | errorHandler_({message:'There is no token ID'}); 159 | return false; 160 | } 161 | 162 | token = po.tokenId;//Use token to call the stripe server and charge the users credit card 163 | paySets = paymentSettings_(); 164 | 165 | if (paySets.createCustomer) {//If true - a customer should be created 166 | custId = createTheCustomer(); 167 | } 168 | 169 | nmbrOfDaysPaidFor = paySets.nmbrOfDaysPaidFor; 170 | amount = paySets.expectedPaymentAmt; 171 | description = paySets.description; 172 | 173 | params = { 174 | "currency": "usd", 175 | "amount": Number(amount), 176 | "description": description, 177 | "receipt_email": po.email, //customer email 178 | "source":token 179 | } 180 | 181 | if (custId) { 182 | params.customer = custId 183 | } 184 | 185 | settings = { 186 | requestType:'chrg', 187 | prmtrs:params 188 | } 189 | 190 | //console.log('params: ' + JSON.stringify(params)) 191 | 192 | charge = postRequestToStripe(settings);// Create a Charge 193 | //Logger.log('charge 193: ' + charge) 194 | 195 | /* 196 | This is an example of the charge return object 197 | { 198 | "id": "id_Number", 199 | "object": "charge", 200 | "amount": 2000, 201 | "amount_refunded": 0, 202 | "application": null, 203 | "application_fee": null, 204 | "application_fee_amount": null, 205 | "balance_transaction": "txn_13456", 206 | "billing_details": { 207 | "address": { 208 | "city": null, 209 | "country": null, 210 | "line1": null, 211 | "line2": null, 212 | "postal_code": "09999", 213 | "state": null 214 | }, 215 | "email": null, 216 | "name": "First Last", 217 | "phone": null 218 | }, 219 | "captured": true, 220 | "created": 1575569961, 221 | "currency": "usd", 222 | "customer": null, 223 | "description": "My Add-on - One year subscription", 224 | "destination": null, 225 | "dispute": null, 226 | "disputed": false, 227 | "failure_code": null, 228 | "failure_message": null, 229 | "fraud_details": { 230 | }, 231 | "invoice": null, 232 | "livemode": false, 233 | "metadata": { 234 | }, 235 | "on_behalf_of": null, 236 | "order": null, 237 | "outcome": { 238 | "network_status": "approved_by_network", 239 | "reason": null, 240 | "risk_level": "normal", 241 | "risk_score": 50, 242 | "seller_message": "Payment complete.", 243 | "type": "authorized" 244 | }, 245 | "paid": true, 246 | "payment_intent": null, 247 | "payment_method": "card_123456798", 248 | "payment_method_details": { 249 | "card": { 250 | "brand": "visa", 251 | "checks": { 252 | "address_line1_check": null, 253 | "address_postal_code_check": "pass", 254 | "cvc_check": "pass" 255 | }, 256 | "country": "US", 257 | "exp_month": 11, 258 | "exp_year": 2020, 259 | "fingerprint": "1234679", 260 | "funding": "credit", 261 | "installments": null, 262 | "last4": "4242", 263 | "network": "visa", 264 | "three_d_secure": null, 265 | "wallet": null 266 | }, 267 | "type": "card" 268 | }, 269 | "receipt_email": "example@gmail.com", 270 | "receipt_number": null, 271 | "receipt_url": "https://pay.stripe.com/receipts/", 272 | "refunded": false, 273 | "refunds": { 274 | "object": "list", 275 | "data": [ 276 | 277 | ], 278 | "has_more": false, 279 | "total_count": 0, 280 | "url": "/v1/charges/134679/refunds" 281 | }, 282 | "review": null, 283 | "shipping": null, 284 | "source": { 285 | "id": "card_1346579 286 | "object": "card", 287 | "address_city": null, 288 | "address_country": null, 289 | "address_line1": null, 290 | "address_line1_check": null, 291 | "address_line2": null, 292 | "address_state": null, 293 | "address_zip": "09999 294 | "address_zip_check": "pass", 295 | "brand": "Visa", 296 | "country": "US", 297 | "customer": null, 298 | "cvc_check": "pass", 299 | "dynamic_last4": null, 300 | "exp_month": 11, 301 | "exp_year": 2020, 302 | "fingerprint": "1324679 303 | "funding": "credit", 304 | "last4": "4242", 305 | "metadata": { 306 | }, 307 | "name": "First Last", 308 | "tokenization_method": null 309 | }, 310 | "source_transfer": null, 311 | "statement_descriptor": null, 312 | "statement_descriptor_suffix": null, 313 | "status": "succeeded", 314 | "transfer_data": null, 315 | "transfer_group": null 316 | } 317 | */ 318 | 319 | chargeResponse = charge.getResponseCode(); 320 | //Logger.log('chargeResponse 319: ' + chargeResponse) 321 | 322 | if (Number(chargeResponse) === 200) { 323 | //Logger.log('chargeResponse is 200') 324 | 325 | paidToDate = update_Customer_Database({'account':charge.receipt_email,"payer_email": charge.receipt_email,"address_zip": charge.source.address_zip,"nmbrOfDaysPaidFor":nmbrOfDaysPaidFor,"status":charge.status}); 326 | } 327 | 328 | //Logger.log('paidToDate 327: ' + paidToDate) 329 | 330 | return [chargeResponse,amount,paidToDate];//the chargeResponse is an HTTP Response code 331 | 332 | }catch(e) { 333 | //Logger.log('Error: ' + e.message + "\nStack: " + e.stack) 334 | errorHandler_(e); 335 | if (Number(chargeResponse) === 200) { 336 | return true; 337 | } else { 338 | return false; 339 | } 340 | } 341 | } 342 | -------------------------------------------------------------------------------- /GS Code/GS_Template_Code.gs: -------------------------------------------------------------------------------- 1 | /* 2 | This code was written by Alan Wells 3 | This code is is not copywrited and has no liscence - 4 | You can use or modify the code however you wish 5 | This code is or was originally in an Apps Script project file and an inner html file named GS_Template_Code 6 | */ 7 | 8 | function getSkrpt_(a){ 9 | try{ 10 | var errHtml,f,h,i,L,rE,thisFile; 11 | 12 | h=""; 13 | errHtml=""; 14 | L = a.length; 15 | 16 | for (i=0;i')); 25 | }catch(e) { 26 | thisFile = undefined; 27 | } 28 | if (!thisFile) { 29 | errHtml = errHtml + "
" + f + " missing - Add the file
"; 30 | //zz8('There is no file for',f); 31 | continue; 32 | } 33 | 34 | h = h + thisFile; 35 | } 36 | 37 | //Logger.log('h: ' + h) 38 | //Logger.log('indexOf script 27: ' + h.indexOf(' 43 | 44 | 45 | 46 | 47 | 48 | 50 | 51 | 52 | 53 | 54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 | 63 |
64 | 96 |

Stripe Elements examples

97 |

Stripe Elements are pre-built rich UI components that help you build your own pixel-perfect checkout flows across desktop and mobile.

98 |

For testing use card number 4242 4242 4242 4242 and any three-digit CVC code and an expiration date in the future

99 |

This code won't work unless you get both a client and server side stripe secret from your stripe account 100 | and enter the client secret into the file JS_Stripe_Index and the server secret into file GS_Stripe

101 |

https://support.stripe.com/questions/locate-api-keys-in-the-dashboard

102 |

103 | 104 | Get a copy of the Apps Script file 105 | 106 | 107 | 108 | Learn more 109 | 110 | 111 | Explore the docs 112 | 113 |

114 | 115 | 116 |
117 |
118 |
119 |
120 | 121 | 122 |
123 |
124 | 125 | 126 |
127 |
128 | 129 | 130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 | 138 | 143 |
144 |
145 |
146 | 147 | 148 | 149 | 150 |
151 |

Payment successful

152 |

Thanks for trying Stripe Elements. No money was charged, but we generated a token: tok_189gMN2eZvKYlo2CwTBv9KKh

153 | 154 | 155 | 156 | 157 | 158 |
159 | 160 |
161 | Your card won't be charged 162 | 163 | 164 | 165 | 166 | View source on GitHub 167 | 168 |
169 |
170 | 171 | 172 |
173 |
174 |
175 |
176 |
177 | 178 | 179 |
180 |
181 |
182 |
183 |
184 | 185 | 186 |
187 |
188 |
189 | 190 | 191 |
192 |
193 |
194 | 195 | 196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 | 204 |
205 |
206 |
207 |
208 |
209 |
210 | 211 |
212 |
213 |
214 |
215 | 216 |
217 |
218 |
219 | 220 | 225 |
226 |
227 |
228 | 229 | 230 | 231 | 232 |
233 |

Payment successful

234 |

Thanks for trying Stripe Elements. No money was charged, but we generated a token: tok_189gMN2eZvKYlo2CwTBv9KKh

235 | 236 | 237 | 238 | 239 | 240 |
241 | 242 |
243 | Your card won't be charged 244 | 245 | 246 | 247 | 248 | View source on GitHub 249 | 250 |
251 |
252 | 253 | 254 |
255 |
256 |
257 | 258 | 259 | 260 |
261 |
262 |
263 |
264 |
265 | 266 |
267 | 268 | 273 |
274 |
275 |
276 | 277 | 278 | 279 | 280 |
281 |

Payment successful

282 |

Thanks for trying Stripe Elements. No money was charged, but we generated a token: tok_189gMN2eZvKYlo2CwTBv9KKh

283 | 284 | 285 | 286 | 287 | 288 |
289 | 290 |
291 | Your card won't be charged 292 | 293 | 294 | 295 | 296 | View source on GitHub 297 | 298 |
299 |
300 | 301 | 302 |
303 |
304 |
305 | 306 |
307 |
308 | Pay with card 309 | Or enter card details 310 |
311 |
312 | 313 |
314 |
315 | 320 |
321 |
322 |
323 | 324 | 325 | 326 | 327 |
328 |

Payment successful

329 |

Thanks for trying Stripe Elements. No money was charged, but we generated a token: tok_189gMN2eZvKYlo2CwTBv9KKh

330 | 331 | 332 | 333 | 334 | 335 |
336 | 337 |
338 | Your card won't be charged 339 | 340 | 341 | 342 | 343 | View source on GitHub 344 | 345 |
346 |
347 | 348 | 349 |
350 |
351 |
352 | 353 |
354 |
355 | Pay with card 356 | Or enter card details 357 |
358 |
359 | 360 | 361 |
362 |
363 |
364 |
365 | 366 | 367 |
368 |
369 | 370 | 371 |
372 |
373 |
374 |
375 |
376 | 377 | 378 |
379 |
380 |
381 |
382 | 383 | 384 |
385 |
386 | 387 | 388 |
389 |
390 | 391 | 392 |
393 |
394 |
395 |
396 |
397 | 398 |
399 |
400 |
401 | 402 |
403 | 408 |
409 |
410 |
411 | 412 | 413 | 414 | 415 |
416 |

Payment successful

417 |

Thanks for trying Stripe Elements. No money was charged, but we generated a token: tok_189gMN2eZvKYlo2CwTBv9KKh

418 | 419 | 420 | 421 | 422 | 423 |
424 | 425 |
426 | Your card won't be charged 427 | 428 | 429 | 430 | 431 | View source on GitHub 432 | 433 |
434 |
435 | 436 |
437 | 438 |
439 |
440 | 441 | 442 | 444 | 445 | 446 | 447 | 448 | -------------------------------------------------------------------------------- /JS/JS_Stripe_Example1.html: -------------------------------------------------------------------------------- 1 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /JS/JS_Stripe_Example2.html: -------------------------------------------------------------------------------- 1 | 110 | 111 | 112 | -------------------------------------------------------------------------------- /JS/JS_Stripe_Example3.html: -------------------------------------------------------------------------------- 1 | 98 | 99 | 100 | -------------------------------------------------------------------------------- /JS/JS_Stripe_Example4.html: -------------------------------------------------------------------------------- 1 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /JS/JS_Stripe_Example5.html: -------------------------------------------------------------------------------- 1 | 115 | 116 | 117 | -------------------------------------------------------------------------------- /JS/JS_Stripe_Index.html: -------------------------------------------------------------------------------- 1 | 208 | 209 | -------------------------------------------------------------------------------- /JS/JS_Stripe_Pay.html: -------------------------------------------------------------------------------- 1 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # stripe-js.v3-using-elements 2 | Stripe payment system using JS version 3 - This is an "In-App" payment system using Stripe Elements 3 | 4 | To view and download the code directly from the Apps Script code editor use link: https://script.google.com/d/1-T87Pyu9S-frRK7jq2G6TPa2Tn_XVIIglknyKi7q-CvZLBKwyN9TEfnR/edit?usp=drive_web 5 | 6 | To see the original stripe example code, use the link: https://github.com/stripe/stripe-payments-demo 7 | 8 | Most of the code in this example is code provided at the link above. The code provided by Stripe has an MIT license. This repo is a mix of code from Stripe and code from Alan Wells. Each file has it's own license. 9 | 10 | I have added some code to integrate the stripe code into an Apps Script Web App. This code uses "google.script.run.appsScriptFunctionName()" to run a server function from the browser (client side). This example code is set up in an Apps Script Web App, but can easily be used in a dialog box in a Google Sheet, Google Form or Google Doc. 11 | 12 | For this code to work, you must get two API secrets from your stripe account. One secret for the client side code and one secret for the server side code. Add the client secret (pk_test_12346) to the JS_Stripe_Index file. Add the server side secret sk_test_) to the GS_Stripe file. 13 | 14 | See the stripe documentation at: https://stripe.com/docs/keys to get your stripe keys. 15 | 16 | This example shows 5 different payment forms. Each payment form has it's own CSS and JavaScript file. Obviously, you won’t want to use all 5 stripe payment forms in your app, so you’ll only want to load one CSS file and one JavaScript file for your final payment form. In the example, the Web App loads 5 different CSS files, 5 JavaScript files, and the H_Stripe file has 5 payment forms in it. So, you need to edit the H_Stripe file and delete what you don’t need. You’ll need to load only one CSS file and one JS file into the H_Stripe file. 17 | 18 | In the H_Stripe file, there is a scriptlet that loads the CSS: 19 | 20 | 22 | 23 | You need to remove 4 of the 'CSS_Stripe_ExampleX' strings. Which ones you remove depends on which example you use for your payment form. Or you may rename the files, and edit them. 24 | 25 | The point is, that even though this is a fairly complete example, there could still be a lot of work to do to in order to customize the HTML and CSS to your needs. 26 | 27 | 28 | Stripe has a client side JavaScript library, which is in version 3 at the time of this commit, and a server side API which is still technically in version 1. But the server side API of version 1 is misleading, because there are new versions that go by date. So, even though the API is technically version 1, there are new versions by date that you should update to if possible. 29 | 30 | You must use both the client side library and server side code, unless you design your own customer input form that takes the customer credit card number. But creating your own credit card payment form is not recommended. 31 | 32 | The goal is to accept a payment from Stripe from a Google add-on, or Google Web App without the user needing to navigate to another tab in the browser or another browser window, for example, to your website. In other words, the goal is to provide the user with an “in-app” purchase. 33 | 34 | For this payment process, the user does NOT need to get a registration code from you, navigate back to your app, and enter it in order to prove that they paid. 35 | 36 | In order to provide a broad understanding of what Stripe offers for solutions, I will explain some options that you DON'T want, if you want an "In-App" payment solution. 37 | 38 | It's important to understand a subtle difference between prebuilt Stripe forms, and prebuilt Stripe Elements. Both use the word "prebuilt." Both the prebuilt Stripe forms and the prebuilt Stripe elements are capable of customizing a payment form. So, if you are trying to figure out what the difference is, it can be a little hard to determine that. Basically, the difference is the flow of events. With the prebuilt form you must redirect the person paying to your website to accept a payment. 39 | 40 | Stripe has “prebuilt” checkout forms ("Checkout"). Don't use this if you want an "In-App" payment solution. To use a prebuilt solution, you must redirect users to your hosted payment page. And after the customer has paid, they must be redirected back to the original place. And then you’d need to create a “webhook” to fulfill the order (Eg. Save the customers new expiration date into a database, and somehow make sure that every time the add-on code runs, that it “knows” that the customer has paid) 41 | 42 | In the prebuilt checkout process flow, the steps are: 43 | Create a checkout session on your server 44 | Redirect the user to the Checkout payment form somewhere else 45 | The customer pays 46 | Redirect the user to another place 47 | Fulfill the customers order - set up a webhook (Apps Script Web App) to receive confirmation from Stripe that the payment was completed 48 | 49 | Even after all the above steps have completed, you still need the add-on code to somehow access your stored customer data to verify whether the user has paid or not. 50 | 51 | Even though I will not be using the stripe “Checkout” (prebuilt form) I am giving information about it in case you want to read the stripe documentation yourself, hopefully my explanation will give you a broad overview. I’m trying to explain what the important differences are between the Checkout and Payment systems, so that you can be confident that you are choosing the best solution for your situation. 52 | 53 | Using the prebuilt “Checkout” form, the third step is to redirect the user somewhere (Your website - a confirmation of payment page) after they have paid. From there you could provide a message to the user to manually go back to their document. But I don’t think that you can automatically navigate the user back to their document, and then have the add-on code trigger to provide feedback of confirmation. The “Payment” system is different. With the Payment system, the user doesn’t need to be redirected to your website, and then to a payment confirmation page, and then instructed to go back to their document. 54 | 55 | To have a “built-in” payment form in your app, you can’t use the “Checkout” prebuilt form solution, but must use Stripe Elements to create your own checkout form. 56 | 57 | The stripe “Checkout” (prebuilt form) examples, have a setting for a success URL to direct the user to a link at your website, indicating that the charge to their credit card was successful. But, the goal is to confirm to the user that their payment was successful from within the add-on. This information is for providing an “in-app” message to the user that the charge was successful. The “Checkout” (prebuilt) examples are meant for a quick way to get started with stripe. But an in-app purchase in a Google add-on requires using Stripe Elements. 58 | 59 | The documentation that you need to look at is for “Payments” and you’ll need to look at the Web implementation. You won’t be using a library, because there is no library for Apps Script in the stripe documentation. 60 | 61 | The “Payments” documentation also uses the word “prebuilt” but it’s not for a payment form, but for UI components. In other words, you can pick and choose between individual payment form fields. So, the stripe “Checkout” documentation is for an entire prebuilt form, and the stripe “Payment” documentation uses prebuilt UI Components. (individual form fields) 62 | 63 | Both the Checkout system and the Payment system make a request from the sellers server (Google’s server from your google account) to stripes server. In the case of a Google add-on, from Apps Script, which is from Google’s server to Stripes server. So, in both the prebuilt Checkout system and the custom Payment system there is a server to server request. In the Checkout system, the server to server request is the very first step. In the Payment system, the server to server request is the last step which does the actual charge. 64 | 65 | In the Checkout system, the CHECKOUT_SESSION_ID must be passed in order for stripe to match up the customer from your app to the same customer in the checkout page on your website. 66 | 67 | With the Payment system, the Token ID is used to match up the customer information submitted from your app (Add-on) to the eventual charge made from the server. The actual payment doesn’t happen when the customer submits the payment form, it happens when you call stripes server with the Token ID from Apps Script. 68 | 69 | The Token ID is generated by the client side stripe library when the customer submits the payment form in your add-on. This is known as “client-side tokenization.” After stripes client side code tokenizes the customer information, the customer information is stored on stripes server, and associated with a Token ID, and the Token ID is provided to your app. Then your add-on code must get the Token ID from the client side code and send the ID to the server. , The Token ID is then used to make the charge to Stripe. So, your add-on code never “sees” the credit card number or other credit card information. The client side stripe code securely tokenizes the credit card information. And the way that stripe matches up the customers credit card information with your stripe account is with the Token ID. Quote from stripe documentation: 70 | 71 | “This ensures that no sensitive card data touches your server, and allows your integration to operate in a PCI-compliant way.” 72 | 73 | So, you can’t get the credit card number, expiration date, and CVC code from the payment form. 74 | 75 | Tokens can only be used once. 76 | 77 | How do you make the server to server request from your Apps Script code to Stripe’s server? 78 | You will need to use UrlFetchApp.fetch(url, options) to make the REST API requests to stripe. 79 | 80 | The curl examples in the documentation are the closest representation for that, since you won’t be using an SDK because there isn’t one available for Apps Script. 81 | 82 | The stripe payment form (for a web app) must use a
tag, and the form tag has an action attribute. But the stripe client side code prevents the default action, meaning that the form doesn’t get submitted. So if you notice the form tag, and know anything about what an HTML form does, don’t be confused about what actually happens. A POST request doesn’t get made when the user clicks the submit button even though the form has an action attribute. If you don’t set up the client side code correctly, then the form might get submitted, which will result in an error. 83 | 84 | In the example code for the index JS, an event listener is added to the submit button, and the code has a: 85 | 86 | e.preventDefault(); 87 | 88 | line which prevents the form from being submitted. You might wonder why the html would be set up to have an action attribute to submit the form, and then prevent the form from being submitted. It’s done that way in order to use the built-in html validation of form fields. 89 | 90 | You will be using the “google.script.run.my_Server_Function” call to send the payment information to the server. 91 | 92 | NOTE: In the U.S., unless you use a “Payment Intent” then your Stripe code will only accept payments from the U.S. and Canada. To accept payments globally, you must use a Payment Intent. 93 | To accept payments globally, see the following link: 94 | https://stripe.com/docs/payments/accept-a-payment 95 | 96 | The Payment process described above does not use a webhook. And you won’t need a web hook because the actual payment received happens when your Apps Script code calls stripe, and you will know whether the payment was successful because stripe sends back a code. 97 | 98 | You’d only need to use a web hook if you were using the Checkout system, sending your user to your website to pay, which can’t get a message back to your add-on code about whether the payment was successful or not. You could accept payments that way, but you’d need to have the web hook save the customer payment date to your database, and then the add-on would need to look up that customer in your database when the add-on code runs. 99 | 100 | You’d probably want to have a customer database anyway, even with the in-app Payment system. But with the in-app Payment system, the customer can get almost immediate access to the paid services. 101 | 102 | The steps needed for the entire process are outlined in the documentation at: 103 | 104 | https://stripe.com/docs/payments/accept-a-payment-charges 105 | 106 | The vast majority of the code that you need is provided in examples on GitHub. But those examples only get you as far as the custom input form, the user submission, and getting the token ID back. The code for sending the token from the client to the server, and then using the stripe API to get the actual payment from stripe from the Apps Script request is not provided in the GitHub code. Obviously, that part is specific to Apps Script, and not generic. But in my example, I will provide the Apps Script code for the last part of the process. 107 | 108 | 109 | -------------------------------------------------------------------------------- /appsscript.json: -------------------------------------------------------------------------------- 1 | { 2 | "timeZone": "America/New_York", 3 | "dependencies": { 4 | }, 5 | "webapp": { 6 | "access": "MYSELF", 7 | "executeAs": "USER_DEPLOYING" 8 | }, 9 | "exceptionLogging": "STACKDRIVER" 10 | } 11 | --------------------------------------------------------------------------------