Skip to content

Instantly share code, notes, and snippets.

@ashishkpoudel

ashishkpoudel/Checkout

Created July 3, 2020 06:00
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ashishkpoudel/aec1f14f2a5761cd6c9d041da3ec92ea to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ashishkpoudel/aec1f14f2a5761cd6c9d041da3ec92ea to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ashishkpoudel revised this gist Jul 3, 2020. No changes.
  2. ashishkpoudel created this gist Jul 3, 2020.
    116 changes: 116 additions & 0 deletions Checkout
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,116 @@
    <!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>