How to catch Stripe responses details with the default embedded payment form?

Question

After reading this:

Stripe Custom Checkout With Options

I understand that it is not possible to get the details from what is typed-in in the Stripe iframe.

What about the response's details? For example, when I click to pay with an expired test card, I can observe this in the console ( Network tab):

error {
  code: 'expired_card'
  doc_url: 'https://stripe.com/docs/error-codes/expired-card'
  message: 'Your card has expired.'
  param: 'exp_month'
  type: 'card_error'
}

My goal is to get that message and display it in my own popup (since Stripe only does this for a few types of errors).

I tried some Stripe error tags already (docs) in the page where I load their payment form, but they seem to not get updated with any content...

Is there any other way to catch these responses details? Or do I need something else for these to show up?

Note : I am not performing the requests myself - I need to use the default checkout form loaded by Stripe (similar to the "Pay by Card" button in this quickstart while using these Stripe test cards ).

Answer 1

Did you scroll down on the quickstart page? There's code right there on how to send the data to your server.

    <form action="your-server-side-code" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_6pRNASCoBOKtIshFeQd4XMUh"
    data-amount="999"
    data-name="Stripe.com"
    data-description="Example charge"
    data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
    data-locale="auto"
    data-zip-code="true">
  </script>
</form>

From there you can send whatever response you need back from the server to your front end.