Credit card dropdowns with stripe JS

How so I pull a list of the customers’ saved payment methods in a dropdown with stripe JS?

I emailed copilot and never heard back.

When I inspect the dropdown element, the value says “(Data with ID “undefined” from an API)” and both the ‘Placeholder’ + the ‘Choices source’ says “An error occurred trying to evaluate this property.”

I’ve searched the Bubble forum and found two things:

(1) Ya’ll recommend inserting the word “Bearer” before the keys (in the plug-in settings); however if I do this none of the workflows work with Stripe; and

(2) Ya’ll recommend making sure “Authorization (shared headers)” is not empty; however I’m not sure where to get this from, or how to create it properly if I’m meant to do it via the plug-in ‘API Connector’.

Please help!

@beccijanereid no need to use Stripe.js to display the list of CCs - you can just save the Payment Method IDs (“pm_xxx”) for each CC in your Bubble DB, and then use a “Get Payment Method Data” API call to retrieve these Payment Methods information from Stripe (last 4 digits, card brand name, etc) and list them in your dropdown

Here is the GET Payment Method Data call:

Hope that helps
Ambroise

1 Like

Thanks so much!

Where is this image from? Where do I find it / how do I create it? Will this show as a dropdown list and/or table?

I’m new to APIs so thanks so much for your patience with me!

@beccijanereid you’re welcome! I just took this screenshot from one of my apps. You can reproduce it in API Connector in your app - just make sure you input the right Stripe Secret Key and initialize it with an existing payment method (which btw you can create manually in your Stripe Dashboard for a fake customer, then copy/paste the pm_xxx ID in the API Connector call)

This will return information for one Payment Method - if you want to display a list of Payment Methods, you can do so with a list (either through a dropdown or a RG of type “text”) as you normally would

How do I manually initialize it in Stripe? I’ve got test payment method IDs I can add under “value” as per the image - but it’s still asking me to initialize it…