How do you send additional data with a Stripe charge to be returned in a webhook?

Question

I'm transitioning a website from Google Wallet for Digital Goods to Stripe and I'm trying to duplicate the old flow of

1. Customer makes purchase and user_id, product_id, quantity, and other arbitrary data are passed to Google Wallet

2. A postback is sent to my server including all that extra data and a secret key so I know it's not a customer spoofing a postback

3. My server assumes that means a legitimate purchase has taken place and finishes up various processing

For each purchase, my site obviously needs to know

• What product was purchased (and charge.description can't be used as a unique identifier)
• Which of my site's user accounts the customer was logged in to when the purchase was made

I'm trying to integrate Checkout and don't see

• anything in its documentation that seems to allow arbitrary data to be passed along with a charge and
• nothing in the API's documentation for the charge object (which the webhook is sending back to my server) that passes back arbitrary data.

Use the customer object?

The customer object doesn't seem like the solution, since the API docs say "Customer objects allow you to perform recurring charges and track multiple charges that are associated with the same customer", neither of which apply to my situation.

Handle it in the local Javascript callback?

I can do something like this,

var handler = StripeCheckout.configure({
    token: function(token) {
        var user_id = 123;
        var product_id = 456;
        var quantity = 2;
        var arbitrary = 'data';
        // fire off a POST call to http://example.com/hey_look_a_charge with the above data
    }
});

But the Checkout example says that the token callback gets invoked "when the Checkout process is complete", not just for successful charges. The token.id could be stored along with the other data as a 'pending purchase' that becomes verified once the charge.succeeded event fires a webhook, but that might introduce a race condition, sounds convoluted as hell, and token.id isn't sent back with the webhook in the first place.

This seems like a really common requirement for payment processing, but I'm totally baffled how to practically pull it off with Stripe. Can anyone advise?

Answer 1

I think you're confused about how Stripe Checkout works. Getting the Stripe token is only the first step in the process of handling a payment. When using Stripe Checkout or Stripe.js you get a Stripe token back that you then need to send to your server where you then use the Create Charge API to create a charge and receive a payment.

So in your case you would be able to create the charge server-side and once the API call is made you don't need to wait for the charge.succeeded event in your webhook. You get either a charge object back indicating success or an error indicating the charge failed. You would then be able to update your database at that point.

Answer 2

You can add a hidden input field to the form containing the stripe script tag.

<form action="/your-server-side-code" method="POST">
  <input type="hidden" name="my_data" value="my_data_value">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_d2luBCpkXXuIVPKS7hBN43jR"
    data-amount="999"
    data-name="Demo Site"
    data-description="Widget"
    data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
    data-locale="auto">
  </script>
</form>

then you can receive the value in the '/your-server-side-code' url.