Created
November 14, 2022 20:17
-
-
Save cjavdev/c46f25bb7793ada617bfbee9b5f10811 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Confirm subscription</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <link href="css/base.css" rel="stylesheet" /> | |
| <script src="https://js.stripe.com/v3/"></script> | |
| <script src="subscription.js" defer></script> | |
| </head> | |
| <body> | |
| <main> | |
| <h1>Confirm subscription</h1> | |
| <hr /> | |
| <form id="confirm-subscription-form"> | |
| <button type="submit"> | |
| Confirm subscription | |
| </button> | |
| <div id="messages"></div> | |
| </form> | |
| </main> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // helper method for displaying a status message. | |
| const setMessage = (message) => { | |
| const messageDiv = document.querySelector('#messages'); | |
| messageDiv.innerHTML += "<br>" + message; | |
| } | |
| // Fetch public key and initialize Stripe. | |
| let stripe, sub; | |
| fetch('/config') | |
| .then((resp) => resp.json()) | |
| .then((resp) => { | |
| stripe = Stripe(resp.publishableKey); | |
| }); | |
| // Get subscription ID from URL search params | |
| const subscriptionId = new URLSearchParams(window.location.search).get('subscription'); | |
| fetch(`/subscription?id=${subscriptionId}`).then((resp) => resp.json()).then(({subscription}) => { | |
| sub = subscription; | |
| }) | |
| const form = document.querySelector('#confirm-subscription-form'); | |
| form.addEventListener('submit', async (e) => { | |
| e.preventDefault(); | |
| stripe.confirmCardPayment( | |
| sub.latest_invoice.payment_intent.client_secret | |
| ).then((result) => { | |
| if(result.error) { | |
| setMessage(`Payment failed: ${result.error.message}`); | |
| } else { | |
| // Redirect the customer to their account page | |
| setMessage('Success! Redirecting to your account.'); | |
| window.location.href = '/account.html'; | |
| } | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment