Created
July 3, 2020 06:00
-
-
Save ashishkpoudel/aec1f14f2a5761cd6c9d041da3ec92ea 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>Checkout Page</title> | |
| </head> | |
| <body> | |
| <h1>Payment Information</h1> | |
| <hr> | |
| <form id="payment-form" style="width: 550px;"> | |
| <div id="card-element"> | |
| <!-- Elements will create input elements here --> | |
| </div> | |
| <!-- We'll put the error messages in this element --> | |
| <div id="card-errors" role="alert"></div> | |
| <br> | |
| <button id="submit">Pay</button> | |
| </form> | |
| <script src="https://js.stripe.com/v3/"></script> | |
| <script> | |
| var stripe = Stripe('pk_test_7aGqxys147CyD07zhH2PwyF600vn0doRz5'); | |
| var elements = stripe.elements(); | |
| var clientSecret = '{{ $clientSecret }}'; | |
| var style = { | |
| base: { | |
| color: "#32325d", | |
| } | |
| }; | |
| var card = elements.create("card", { style: style }); | |
| card.mount("#card-element"); | |
| var form = document.getElementById('payment-form'); | |
| form.addEventListener('submit', function(ev) { | |
| ev.preventDefault(); | |
| stripe.confirmCardPayment(clientSecret, { | |
| payment_method: { | |
| card: card, | |
| billing_details: { | |
| name: 'Ashish K. Poudel' | |
| } | |
| } | |
| }).then(function(result) { | |
| if (result.error) { | |
| alert('Payment failed due to insufficient funds'); | |
| console.log(result.error.message); | |
| } else { | |
| if (result.paymentIntent.status === 'succeeded') { | |
| alert('Payment succeeded do redirect to success page or something else'); | |
| // Show a success message to your customer | |
| // There's a risk of the customer closing the window before callback | |
| // execution. Set up a webhook or plugin to listen for the | |
| // payment_intent.succeeded event that handles any business critical | |
| // post-payment actions. | |
| } | |
| } | |
| }); | |
| }); | |
| </script> | |
| <!--- | |
| <script> | |
| var stripe = Stripe('pk_test_7aGqxys147CyD07zhH2PwyF600vn0doRz5'); | |
| var elements = stripe.elements(); | |
| var clientSecret = '{{ $clientSecret }}'; | |
| var style = { | |
| base: { | |
| color: "#32325d", | |
| } | |
| }; | |
| var card = elements.create("card", { style: style }); | |
| card.mount("#card-element"); | |
| var form = document.getElementById('payment-form'); | |
| form.addEventListener('submit', function(ev) { | |
| ev.preventDefault(); | |
| stripe.confirmCardPayment(clientSecret, { | |
| payment_method: { | |
| card: card, | |
| billing_details: { | |
| name: 'Ashish K. Poudel' | |
| } | |
| } | |
| }).then(function(result) { | |
| if (result.error) { | |
| alert('Payment failed due to insufficient funds'); | |
| console.log(result.error.message); | |
| } else { | |
| if (result.paymentIntent.status === 'succeeded') { | |
| alert('Payment succeeded do redirect to success page or something else'); | |
| // Show a success message to your customer | |
| // There's a risk of the customer closing the window before callback | |
| // execution. Set up a webhook or plugin to listen for the | |
| // payment_intent.succeeded event that handles any business critical | |
| // post-payment actions. | |
| } | |
| } | |
| }); | |
| }); | |
| </script> | |
| --> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment