CODEWITHSUNDEEP
phphtmlformsstripe-payments
ThorNiLs
ThorNiLs

Reputation: 55

Stripe custom checkout - form submit

I'm trying out the Stripe API & functions, but I am twisting my head around this one issue - how to submit a form after the (test) payment is successful?

Here's my current code:

<script>
    var handler = StripeCheckout.configure({
        key: 'pk_test_mykey',
        image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
        locale: 'sv',
        token: function(token) {
            // You can access the token ID with `token.id`.
            // Get the token ID to your server-side code for use.
        }
    });


    document.getElementById('customButton').addEventListener('click', function(e) {
        stripe_spots = document.getElementById("spots").value;
        stripe_total = (stripe_spots) * 70;
        // Open Checkout with further options:
        handler.open({
            name: 'Revy!',
            description: stripe_spots + " platser",
            zipCode: true,
            currency: 'sek',
            amount: stripe_total * 100
        });

        e.preventDefault();
     });

     // Close Checkout on page navigation:
     window.addEventListener('popstate', function() {
         handler.close();
     });
 </script>

Where or when am I supposed to submit the form?

Thanks!

Upvotes: 1

Views: 2444

Answers (3)

Jonathon Philip Chambers
Jonathon Philip Chambers

Reputation: 509

Editing my earlier answer, because I've got it working so I can share the code snippet. (Was struggling with the same problem when I discovered this.)

Here is my solution. It works. This assumes your next page is named "PaymentComplete.php". Edit accordingly.

token: function(token) {
// You can access the token ID with `token.id`.
// Get the token ID to your server-side code for use.
var form = document.createElement("form");
var tokenPassed = document.createElement("input");
form.method = "POST";
form.action = "PaymentComplete.php";
tokenPassed.value = token.id;
tokenPassed.name = "token";
form.appendChild(tokenPassed);
document.body.appendChild(form);
form.submit();
}

There may be a better way of doing it, but this works for me.

Source: creating and submitting a form with javascript

Upvotes: 0

terdia07
terdia07

Reputation: 493

You submit the form using the token callback function update your handle like so 

var handler = StripeCheckout.configure({
key: 'pk_test_mykey',
image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
locale: 'sv',
token: function (token) {
    $.ajax({
        type: 'POST',
        url: '/checkout.php',
        data: {stripeToken: token.id, stripeEmail: token.email},
        success: function (data) {
            //handle success response here
        },
        error: function(data){
            //handle error response here
        }
    });
   }
});

Upvotes: 2

Nur Zico
Nur Zico

Reputation: 2447

After retrieving Stripe TOKEN you should send your data to your server including TOKEN to make Stripe Charge or create Subscription

Here is an example tutorial to create Customer for Subscription

Upvotes: 0

Related Questions