· 5 years ago · Aug 07, 2020, 03:34 PM
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <title>Stripe Checkout Sample</title>
6 <meta name="description" content="A demo of Stripe Payment Intents" />
7
8 <link rel="icon" href="favicon.ico" type="image/x-icon" />
9 <link rel="stylesheet" href="css/normalize.css" />
10 <link rel="stylesheet" href="css/global.css" />
11 <!-- Load Stripe.js on your website. -->
12 <script src="https://js.stripe.com/v3/"></script>
13 </head>
14
15 <body>
16 <div class="sr-root">
17 <div class="sr-main">
18 <header class="sr-header">
19 <div class="sr-header__logo"></div>
20 </header>
21 <section class="container">
22 <div>
23 <h1>Single photo</h1>
24 <h4>Purchase a Pasha original photo</h4>
25 <div class="pasha-image">
26 <img
27 src="https://picsum.photos/280/320?random=4"
28 width="140"
29 height="160"
30 />
31 </div>
32 </div>
33 <div class="quantity-setter">
34 <button class="increment-btn" id="subtract" disabled>
35 -
36 </button>
37 <input type="number" id="quantity-input" min="1" value="1" />
38 <button class="increment-btn" id="add">+</button>
39 </div>
40 <p class="sr-legal-text">Number of copies (max 10)</p>
41
42 <button id="basic-photo-button">
43 Buy for $<span id="total">5</span>.00
44 </button>
45 </section>
46 <div id="error-message"></div>
47 </div>
48 </div>
49
50 <script>
51 // Replace with your own publishable key: https://dashboard.stripe.com/test/apikeys
52 var PUBLISHABLE_KEY = "pk_live_u65ZL9LLUZbieiNQJrod5kba00tSeLZOeq";
53 // Replace with the domain you want your users to be redirected back to after payment
54 var DOMAIN = window.location.origin;
55 // Replace with a Price for your own product (created either in the Stripe Dashboard or with the API)
56 // You can also supply a SKU or Plan ID for
57 var PRICE_ID = "price_1H4Q5RImjdUjPf7U31XupIgD";
58
59 if (PUBLISHABLE_KEY === "pk_1234") {
60 console.log(
61 "Replace the hardcoded publishable key with your own publishable key: https://dashboard.stripe.com/test/apikeys"
62 );
63 }
64
65 if (PRICE_ID === "price_1234") {
66 console.log(
67 "Replace the hardcoded SKU ID with your own SKU: https://stripe.com/docs/api/skus"
68 );
69 }
70
71 var MIN_PHOTOS = 1;
72 var MAX_PHOTOS = 10;
73
74 var stripe = Stripe(PUBLISHABLE_KEY);
75
76 var basicPhotoButton = document.getElementById("basic-photo-button");
77 document
78 .getElementById("quantity-input")
79 .addEventListener("change", function(evt) {
80 // Ensure customers only buy between 1 and 10 photos
81 if (evt.target.value < MIN_PHOTOS) {
82 evt.target.value = MIN_PHOTOS;
83 }
84 if (evt.target.value > MAX_PHOTOS) {
85 evt.target.value = MAX_PHOTOS;
86 }
87 });
88
89 var updateQuantity = function(evt) {
90 if (evt && evt.type === "keypress" && evt.keyCode !== 13) {
91 return;
92 }
93
94 var isAdding = evt.target.id === "add";
95 var inputEl = document.getElementById("quantity-input");
96 var currentQuantity = parseInt(inputEl.value);
97
98 document.getElementById("add").disabled = false;
99 document.getElementById("subtract").disabled = false;
100
101 var quantity = isAdding ? currentQuantity + 1 : currentQuantity - 1;
102
103 inputEl.value = quantity;
104 document.getElementById("total").textContent = quantity * 5;
105
106 // Disable the button if the customers hits the max or min
107 if (quantity === MIN_PHOTOS) {
108 document.getElementById("subtract").disabled = true;
109 }
110 if (quantity === MAX_PHOTOS) {
111 document.getElementById("add").disabled = true;
112 }
113 };
114
115 Array.from(document.getElementsByClassName("increment-btn")).forEach(
116 element => {
117 element.addEventListener("click", updateQuantity);
118 }
119 );
120
121 // Handle any errors from Checkout
122 var handleResult = function(result) {
123 if (result.error) {
124 var displayError = document.getElementById("error-message");
125 displayError.textContent = result.error.message;
126 }
127 };
128
129 basicPhotoButton.addEventListener("click", function() {
130 var quantity = parseInt(
131 document.getElementById("quantity-input").value
132 );
133
134 // Make the call to Stripe.js to redirect to the checkout page
135 // with the current quantity
136 stripe
137 .redirectToCheckout({
138 mode: 'payment',
139 lineItems: [{ price: PRICE_ID, quantity: quantity }],
140 successUrl:
141 DOMAIN + "/success.html?session_id={CHECKOUT_SESSION_ID}",
142 cancelUrl: DOMAIN + "/canceled.html"
143 })
144 .then(handleResult);
145 });
146 </script>
147 </body>
148</html>
149