How to allow users to update Stripe card information (for subscription)?

Hey,

I’ve integrated Stripe subscription payments (using Cobubble’s Stripe.js Plus plugin) and I’m trying to allow users to change their card information (e.g. if they change cards or would like to pay the monthly fee with a new card).

My initial plan was to have forms containing the existing card information, and the user could edit these forms to update their payment card.

However, I can’t seem to call upon the card information.

I’ve created a new field called ‘card_information’ that is of type: Retrieve a card

The forms are all inside a group with ‘Retrieve a card’ set as the content. I’m not sure if information isn’t displaying due to the fact that I haven’t called a specific subscription?

Alternatively, maybe information isn’t displaying due to security reasons and instead I’ll have to go another way about it (e.g. a ‘change payment method’ button that reveals new payment forms, and the old payment information is just displayed as text – last 4 digits of card, card expiry etc.).

Does anyone know why/how to display the relevant information?

Hey @pc001,

Sensitive information, whether it be a credit card or identification number, should never be stored in a database or transmitted in a request through a unencrypted protocol. Tokenization yields a ‘symbol’ of that sensitive information that’s typically tokenized client-side and ready to be exchanged in forms needed. As far as Stripe is concerned, you cannot retrieve information about a card after it’s been created beside basics like brand and the last four digits. In fact, there shouldn’t be any experience on the web outside of specialized payment sources that should let you update a card. In your specific use case, you’d probably want to ask for card details from the user to create a new card for the user which would add it to their Stripe Customer object. Refer to Stripe’s quite-robust API documentation to learn more about what’s going on behind the scenes.

For the future, it’s a good idea to reach out to the plugin developer first to explore options. We don’t offer one-on-one support on the forums, so shooting an email to plugins@cobubble.com is a good idea. :slight_smile:

Ah that makes sense, in that case I’ll use my second idea of just displaying information as text (e.g. last 4 digits, as you mention) so that users can see which card is currently linked to their account. The only issue I’m having is calling up this information.

I do refer to Stripe’s API documentation that your team suggests, but it only makes sense up to a point. It’s very difficult to translate what Stripe states into Bubble actions, especially with a limited understanding of Ruby/PHP/Go etc.

I did reach out to you guys for a separate issue, but the suggestion in the end was to book a 1-2-1 session which I don’t really want to do at this stage. Fortunately I fixed that issue, so now I’m moving onto this one. I’ll email you guys about this one.

Thanks!

Sounds like a plan!

By the way, the code examples are just to show you structure in your language of choice. The value you should be extracting from Stripe’s API documentation are the descriptions they provide of request parameters in the center column of the page. We cover how to read API documentation and more specifically, payment method management for users in our Platform Payments course if it’ll be helpful while building your platform. :wink:

Hi pc001,

Did you figure out how to call the last four of a user’s card number? Would you mind posting the instructions/steps on how to do so? I’m trying to accomplish the same task. There’s no explicit direction in the current documentation.

Thanks!

Hey @pc001,

There are a number of properties like ‘Last 4’ and ‘Brand’ which Stripe returns with the Retrieve a card request via the :Get data from an external API module. As long you have the Card ID generated by the Create a card call to provide, you’ll be able to get back more information about it. :slight_smile:

Hey! I did the following:

  1. Get data from an external API

  2. API Provider: Stripe.js - Platform - Retrieve a customer

  3. Customer ID: Curren’t users Customer ID (if you don’t have this as a field for your user, you’ll need to add a text field called ‘Customer ID’ and save the customer ID when they create a subscription/make a payment).

  4. Click the ‘More’ text after ‘Retrieve a customer’ and you can select things such as ‘Sources’ and then ‘Last 4’ or ‘exp_month’ etc.

One thing I have noticed is that this information can take a while to load for your platform’s users, but I have been in contact with Bubble’s team and this has improved considerably.

Let me know if you need any further help!

1 Like

Awesome. This super helpful! Thank you @pc001 and @copilot!

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.