Stripe Subscriptions - Credit Cards and Updating Payment Information

[andrew.davidson]

Hi Bubblers,

I’m going through setting up Stripe for subscriptions. So far so good. Easy enough setup for subscription and cancellation .

Now… here’s the problem(s)…
I’m struggling with two issues:

1. Displaying Credit Cards (that are associated with an invoice/subscription payment)
2. Updating the payment information for a subscription.

Displaying Credit Cards (that are associated with an invoice/subscription payment)

I tried researching and found tried this article which I thought was a winner - since it spoke directly to my problem. However, after changing privacy settings to “View All” I still don’t have any luck.

In essence, when using Current User’s Credit Card’s (or Card) the list or individual object is empty. However, I’m able to retrieve the subscription and invoices without a problem. What is surprising is I can’t see the credit card that was used to make the payment to the invoice.

Stripe - Bubble Plugin - Last 4 Credit Card Numbers not showing

I’ve installed the Bubble Stripe plugin and my User’s are showing up as Customers in Stripe in Test mode and getting subscribed and unsubscribed. But I’m not getting any data back from Stripe about the User’s last 4 digits or expiry date to show in the User’s Account page. The database fields I’ve created for the User to hold this information remain blank after they subscribe. My Stripe workflow is very simple: [Stripehelp] I thought maybe it was because I need to use ‘Result of Step 1’, bu…

2. Changing the Credit Card linked to the subscription - Under the optional workflows, there isn’t anything immediately obvious that offer users a way to change their billing card. Is this a matter or cancelling and re-subscribing (within the update flow)?

Appreciate any help. I know I’m missing something. I just don’t see what the piece is at the moment.

SETTING INFO:

• Stripe Checkout is V3 SCA Compliant

Thanks.

Andrew

[cowontherun]

Hi Andrew, I’ve looked up the app my query was related to and it looks like I went with the other third party plugin stripe.js instead, and not the one built by Bubble.

[andrew.davidson]

@cowontherun - Ahh… awesome… thanks for the clarification. That is helpful albeit still leaves me in a bit of quandary to the problem.

[kenneth.ettinger]

Hi @andrew.davidson,

Were you able to resolve this? I’m facing exactly the same issues:

1. I want to show the last 4 credit card digits to the user so they know what card they used to sign up
2. They need to be able to update the credit card they are paying with

I’m also using the Bubble Stripe plugin, not the stripe.js (I was having trouble with stripe.js implementation).

Alternatively, is there a way to direct the user to a separate Stripe website where they could edit their payment info?

Cheers,
Ken

[andrew.davidson]

Hi Ken,

It pushed it into my backlog as I spent too long with too little result. I plan to revisit it in a couple of weeks.

AD

[ambroisedlg]

@andrew.davidson @kenneth.ettinger

I’m getting the last4 digits from Customer (not subscription). I don’t think that one Stripe customer can be charged with multiple CCs across multiple subscriptions (otherwise I’d be interested if you could show me how!)

I’m personally using a combination of API Connector calls and Stripe.js calls for all payments as well, but from what I recall you can store the cus_ id in your DB with Bubble’s Stripe plugin.

Question is, can you store the payment method id (“pm_”) too?
If so, you should be able to replicate and initialize these calls in API Connector:

1. Displaying CC’s last 4 digits

Use the pm_ stored in your DB:

Use this call in a Text Element > Get data from External API

2. Changing the CC

I never found a way to update the CC with Bubble’s Stripe plugin, so you would need to use the Stripe.js plugin (with a Stripe Element) to generate a new pm_. Run the following actions in a workflow:

Step 1: Add a new Payment Method
Step 2: Attach Payment Method to Customer
Step 3: Set the new payment method to default with the following call:

The exact parameter key is invoice_settings[default_payment_method]

I don’t see how that would affect SCA as the authorization was accepted using the V3 Checkout at first. Hope this helps

[kenneth.ettinger]

Hi @ambroisedlg @andrew.davidson

Thanks so much for the detailed walkthrough! I haven’t yet used the API Connector so will dig into your solution to start familiarizing myself with it.

I was however able to solve these 2 problems with Stripe.js rather than the Bubble Stripe plugin. This is with the newest 1.9xx version of Stripe.js (Sidenote: Stripe.js Stripe Element wasn’t working for me initially because I had another plug, Styled Checkbox, that was interfering).

-You can get last 4 digits on Bubble’s Stripe plugin (I think), but only available on Stripe v2, not the latest Stripe v3. v3 gives strong customer authentication and better UI, and v2 wasn’t good enough.

-I am now able to get last 4 digits on Stripe.js, using the Stripe.js - Retrieve a PaymentMethod orkflow, and then accessing “Result of previous step’s… last 4 digits”

-I am also able to update the credit card using Stripe.js, with the Stripe.js - Update Subscription workflow, combined with a new PaymentMethod input through the “Stripe element”

-It should be easy to store the payment method id (“pm_”) using the Stripe element as well; when the user sets up the Stripe element payment you can store their pm_id to their user element

My next challenge is that there doesn’t seem to be any way to apply coupon codes with Stripe.js 1.9.xx – is that something that would be possible with API Connector?

Cheers,
Ken

[ambroisedlg]

@kenneth.ettinger great that you got it working and thanks for bringing me up to speed on that!

Any call is do-able with API Connector, I haven’t done any calls related to coupons so I’m not sure what the exact config would be. Surely you can find it in Stripe’s API Reference docs though

[boston85719]

Hi @ambroisedlg

I’m trying to set up an API call for the credit card as I am not using the payment_method inside of Stripe.JS plugin and instead I’m using the Token Element to create a Card Token to add a credit card to the customer.

When setting up the API Connector I’m looking at the Stripe API docs and feel like I’ve done most things correctly, however I keep getting an error saying the ID is not valid as if it doesn’t exist, but in my testing data inside of Stripe I see the ID.

This is my API Connector setup

This is what I see in my Stripe Testing data

And this is the error message I get when trying to initialize the call

Any idea what I am doing wrong in the API connector? I’ve tried using the card ID from the Stripe Docs as well but that still returns the same error message

https://stripe.com/docs/api/cards/retrieve

[ambroisedlg]

Hey @boston85719 apologies for the late reply - have you solved this? If not happy to have a look

Cheers
Ambroise

[boston85719]

Hi Ambroise

No worries. I did actually get it solved. Took a bit of tinkering around, but my first step was to get the user API setup so I knew it was possible. After that I had a better understanding of how things work to comprehend more of the Stripe docs.

Cheers

Matt