Adinarayana02 commited on
Commit
5ea1f9e
·
verified ·
1 Parent(s): 7e0c4ab

Create checkout.html

Browse files
Files changed (1) hide show
  1. checkout.html +74 -0
checkout.html ADDED
@@ -0,0 +1,74 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Checkout</title>
7
+ <link rel="stylesheet" href="static/styles.css">
8
+ </head>
9
+ <body>
10
+ <div class="checkout-container">
11
+ <h1>Secure Checkout</h1>
12
+ <form id="payment-form">
13
+ <label for="product-name">Product Name:</label>
14
+ <input type="text" id="product-name" name="product-name" placeholder="Enter product name" required>
15
+
16
+ <label for="amount">Amount (in USD):</label>
17
+ <input type="number" id="amount" name="amount" placeholder="Enter amount" required>
18
+
19
+ <label for="email">Email:</label>
20
+ <input type="email" id="email" name="email" placeholder="Enter your email" required>
21
+
22
+ <div id="card-element">
23
+ <!-- A Stripe Element will be inserted here. -->
24
+ </div>
25
+ <button type="submit" id="checkout-button">Proceed to Payment</button>
26
+ </form>
27
+ <small>Your payment information is secure and encrypted.</small>
28
+ </div>
29
+
30
+ <script src="https://js.stripe.com/v3/"></script>
31
+ <script>
32
+ const stripe = Stripe('pk_test_51P2EfNIS4MdDIAjNEABa0PlwvzI7GgHdEGtCzCNPG0hDODhI8qz46TqRbUvFYSTvAsnneCnW0UNlWLubpZ0TQqxo00VUTUTc3n
33
+ '); // Replace with your own publishable key
34
+ const elements = stripe.elements();
35
+ const cardElement = elements.create('card');
36
+ cardElement.mount('#card-element');
37
+
38
+ const form = document.getElementById('payment-form');
39
+ form.addEventListener('submit', async (event) => {
40
+ event.preventDefault();
41
+
42
+ const {token, error} = await stripe.createToken(cardElement);
43
+ if (error) {
44
+ // Display error.message in your UI
45
+ console.error(error.message);
46
+ return;
47
+ }
48
+
49
+ // Send the token to your backend for processing
50
+ const response = await fetch('/create-payment-intent', {
51
+ method: 'POST',
52
+ headers: {
53
+ 'Content-Type': 'application/json'
54
+ },
55
+ body: JSON.stringify({
56
+ productName: document.getElementById('product-name').value,
57
+ amount: document.getElementById('amount').value,
58
+ email: document.getElementById('email').value,
59
+ token: token.id
60
+ })
61
+ });
62
+
63
+ const result = await response.json();
64
+ if (result.error) {
65
+ // Display error.message in your UI
66
+ console.error(result.error);
67
+ } else {
68
+ // Redirect to success page
69
+ window.location.href = result.successUrl;
70
+ }
71
+ });
72
+ </script>
73
+ </body>
74
+ </html>