How can i get a stripe token on my controller with checkout?

Question

i'm trying to get a stripe token when i use checkout, but when i submit the embeded form i don't have a POST method and i don't know how i can have the token on my php controller too. Here is my code :

<script>
var handler = StripeCheckout.configure({
    key: 'pk_test_WWlLRtqEY2yfJUlfA4TRRcyf',
    image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
    locale: 'auto',
    token: function(token) {
        console.log(token.id);
    }
});

document.getElementById('customButton').addEventListener('click', function(e) {
    // Open Checkout with further options:
    handler.open({
        name: 'Musée du Louvre',
        description: 'Biletterie en ligne',
        currency: 'eur',
        amount: '{{ price }}' * 100,
        email: '{{ mail }}',
        allowRememberMe: false,
    });
    e.preventDefault();
});

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

i tried with this :

<form post="" method="post">
my script code
</form>

but when i click on pay the page don't resfresh.

Someone can help me?

Answer 1

The idea is to change the code in the token callback to send the token to your server instead of logging it to the console.

Change your form to have a hidden field for the stripe token id and the email entered by the customer:

<form action="/your/route" method="POST" id="payment-form">
    <input type="hidden" id="stripeToken" name="stripeToken" value="tok_XXX" />
    <input type="hidden" id="stripeEmail" name="stripeEmail" value="email@example.com" />
</form>

And then change your JS to set those values and submit the form:

token: function(token) {
  $("#stripeToken").val(token.id);
  $("#stripeEmail").val(token.email);
  $("#payment-form").submit();
}

This will submit your form and your route on the server will receive the stripeToken and the stripeEmail values in the POST parameters.