Edit a credit card using Stripe checkout.js

Question

Checkout from Stripe has a great way to add a credit card for a transaction, by simply invoking StripeCheckout.open().

<

Answer 1

There is no way to edit a card that way. What you can do though is use Stripe Checkout to ask your customer for a new card without asking him to pay anything. The idea is to avoid setting the amount or data-amount parameter.

<form action="/charge" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_XXX"
    data-name="Demo Site"
    data-description="Update Card Details"
    data-panel-label="Update Card Details"
    data-label="Update Card Details">
  </script>
</form>

You would get a new card token for that new card and you could then use the Update Customer API to save the new card on the customer.

As for your second question, there is unfortunately no unminified version of Checkout.js accessible at the moment.

Answer 2

Try http://unminify.com/ to see an unminified version of checkout.

I saw this done for the first time today. If you have an app where users log in, you should be able to do it with a custom Checkout integration (the above is the simple integration) found here https://stripe.com/docs/checkout#integration-custom

On the server side you would retrieve the customer via Stripe's API. From the linked custom example, you can pass the retrieved ID through to Checkout via session data so it knows which customer to update here:

$('#customButton').on('click', function(e) {
// Open Checkout with further options
handler.open({
  name: 'Your Company Name',
  email: customer_email,
  id: customer_id,
  zipCode: false,      
  });

I have not yet tested this, if I get a chance I'll report back.