gmgarrison_code | Stripe Developers | Page 1

kindred foxBOT Oct 23, 2024, 12:57 PM

#

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1298631319932371017

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

#

void magnet Oct 23, 2024, 12:57 PM

#

hi there!

fluid valve Oct 23, 2024, 12:57 PM

#

Hello soma 🙂

void magnet Oct 23, 2024, 12:58 PM

#

so you want to save a card so you can charge it later?

fluid valve Oct 23, 2024, 12:58 PM

#

Yeah, I want customers to be able to add cards or bank accounts for later payments

void magnet Oct 23, 2024, 12:58 PM

#

then the first link you shared is correct: https://docs.stripe.com/payments/save-and-reuse?lang=php

fluid valve Oct 23, 2024, 12:59 PM

#

What's the difference between that and the second link?

void magnet Oct 23, 2024, 12:59 PM

#

the second link is to charge the card right away, and without saving it. so it's quite different.

fluid valve Oct 23, 2024, 12:59 PM

#

The opposite! Ha

#

Alright, I'll do some coding from the first link. Thanks for the quick help.

void magnet Oct 23, 2024, 1:00 PM

#

happy to help 🙂

kindred foxBOT Oct 23, 2024, 1:01 PM

#

fluid valve Oct 23, 2024, 1:17 PM

#

I'm not following step #2 - Create a Checkout Session. I don't see how to get the Elements UI loaded on the front-end. The first code section doesn't have any Stripe-specific code at and the second is the backend code to create a session, but then how is that session delivered to the front-end?

open scarab Oct 23, 2024, 1:18 PM

#

If you're using PaymentElement then you should switch tabs to "custom payment flow" guide
https://docs.stripe.com/payments/save-and-reuse?platform=web&ui=elements

fluid valve Oct 23, 2024, 1:18 PM

#

OH OH OH that makes sense - thank you

#

I didn't even see that tab at the top

open scarab Oct 23, 2024, 1:19 PM

#

All good!

fluid valve Oct 23, 2024, 1:27 PM

#

Okay, now we're making some progress. 🙂 I've got the Elements form showing up on my Manage Payment Methods page which is what I want, but it only shows a credit card entry form.

#

The Stripe account has bank accounts, Apple Pay, and Google Pay also enabled. Do I need to specifically enable them when creating the Elements form?

open scarab Oct 23, 2024, 1:29 PM

#

You would need to run the site under HTTPS and register the domain for the wallets to show - https://docs.stripe.com/payments/save-and-reuse?platform=web&ui=elements#apple-pay-and-google-pay

Also, if you're manually setting payment methods when you create a SetupIntent then you'd likely want to switch to automatic payment methods - https://docs.stripe.com/payments/save-and-reuse?platform=web&ui=elements#create-intent

fluid valve Oct 23, 2024, 1:30 PM

#

I understand about the Apply Pay and Google Pay - but I don't have to register a domain for bank accounts, do I? Shoudn't that still appear in my dev environment?

open scarab Oct 23, 2024, 1:31 PM

#

It should, can you share the example SetupIntent ID you're working with?

fluid valve Oct 23, 2024, 1:32 PM

#

I can if you tell me where to find it 🙂

open scarab Oct 23, 2024, 1:33 PM

#

https://support.stripe.com/questions/finding-the-id-for-an-api-request

fluid valve Oct 23, 2024, 1:36 PM

#

seti_1QD4NXH1Z1K59F9KPaXW1vak

open scarab Oct 23, 2024, 1:41 PM

#

Hmm the request that created the SetupIntent was made to /v1/checkout/sessions - which isn't the API endpoint you should be using for custom flow

fluid valve Oct 23, 2024, 1:43 PM

#

This is my front-end page:

#

<x-app-layout>
@section('title', 'Manage Payment Methods')

<h3 class="text-white">Manage Your Payment Methods</h3>

<div class=" mt-4 text-white">
    <div class="row">
        <p>Your Current Payment Methods</p>
    </div>
    <div class="row contentWidth">
        <ul id="payment-methods-list" class="list-group">
            @foreach($paymentMethods as $method)
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    {{ ucfirst($method->bank) }} ****{{ $method->last_4 }}
                    <button class="btn btn-danger btn-sm ms-2" onclick="removePaymentMethod('{{ $method->id }}')">Remove</button>
                </li>
            @endforeach
        </ul>
    </div>

    <div class="row">
        <p class="mt-5">Add a New Payment Method</p>
    </div>
</div>

<script nonce="{{ csp_nonce() }}" src="https://js.stripe.com/v3/"></script>
<script nonce="{{ csp_nonce() }}">
        const stripe = Stripe('');
</script>

<form class="bg-white p-3 rounded contentWidth" id="payment-form">
    <div id="payment-element"></div>
    <button id="submit">Submit</button>
    <div id="error-message"></div>
</form>

<script nonce="{{ csp_nonce() }}">
    const options = {
        mode: 'setup',
        currency: 'usd',
        setupFutureUsage: 'off_session',
        appearance: {/*...*/},
    };

    // Set up Stripe.js and Elements to use in checkout form
    const elements = stripe.elements(options);

    // Create and mount the Payment Element
    const paymentElement = elements.create('payment');
    paymentElement.mount('#payment-element');
</script>

</x-app-layout>

#

(with my API key removed)

open scarab Oct 23, 2024, 1:45 PM

#

Oh you're using defer intent flow - https://docs.stripe.com/payments/accept-a-payment-deferred?platform=web&type=setup

That's different from the guides I've shared above..

fluid valve Oct 23, 2024, 1:46 PM

#

Everytime I think I understand what's going on, I realize I don't

#

I don't know how to explain what I need... I'm not trying to collect a payment or create an intent. I want to create a new payment method that can be used later.

#

In our payment workflow right now, we offer a dropdown of payment methods the customer can choose to use. I'm trying to build the UI to add a method to that dropdown.

open scarab Oct 23, 2024, 1:51 PM

#

Right.. There are two flows you can use to do that..

The one you're currently using allows you to render PaymentElement without creating a SetupIntent first - https://docs.stripe.com/payments/accept-a-payment-deferred?platform=web&type=setup

The other one is where you create the SetupIntent prior to rendering the PaymentElement and configure elements to use the SetupIntent - https://docs.stripe.com/payments/save-and-reuse?platform=web&ui=elements

The difference between the both is quite subtle.

The defer intent flow looks directly at your payment method settings on your account to load supported payment methods..

The other flow will look at the SetupIntent that has been created to load supported payment methods.

fluid valve Oct 23, 2024, 1:51 PM

#

I don't think I understand what the role of the SetupIntent is. What does it represent?

open scarab Oct 23, 2024, 1:52 PM

#

Like PaymentIntent is an object that represent the attempt to Pay, SetupIntent is an object that represent the attempt to save the payment method for future use.

fluid valve Oct 23, 2024, 1:53 PM

#

So in the first flow, if I render the PaymentElement with no existing SetupIntent, is one created for me if the form is submitted successfully?

#

I guess I don't have any experience dealing with SetupIntents directly. In one of our payment flows, you're a new customer and all I do is create a PaymentIntent then show you the PaymentElement to capture payment.

#

In our other flow, I've already collected all your PaymentMethods and stored their IDs and then let you select one and then I again just create a PaymentIntent to be processed for payments.

#

I don't know what to do with SetupIntents

open scarab Oct 23, 2024, 1:56 PM

#

In our other flow, I've already collected all your PaymentMethods and stored their IDs
How exactly are you saving the PaymentMethods?

fluid valve Oct 23, 2024, 1:56 PM

#

But it sounds like I should use the second flow you described above to create the SetupIntent and then show the PaymentElement to complete it

#

I have a script that uses the Stripe API to iterate over customers and get PaymentMethods and then they're saved in the application database

#

I save the ID, fingerprint, type, last_4 and bank

#

(It used to be the case that I just rendered the PaymentElement every time for every payment. I finally figured out that I could save the PaymentMethods and save my customers from re-entering methods they've used before.)

open scarab Oct 23, 2024, 2:10 PM

#

I have a script that uses the Stripe API to iterate over customers and get PaymentMethods
Stripe does not store payment methods of customers by default

#

Are you setting setup_future_usage when you create the PaymentIntent?

fluid valve Oct 23, 2024, 2:11 PM

#

Yes

open scarab Oct 23, 2024, 2:11 PM

#

I see.

#

Yeah that wasn't clear from the thread prior. All good though..

So yeah you can use either of the flows I mentioned above to save payment methods and reuse them without charging them. To be clear, both flows use SetupIntents to save the payment method. The only difference is "when" do you create the SetupIntent.

Based on your current flow with PaymentIntent, yeah you should use the second flow.. So this guide - https://docs.stripe.com/payments/save-and-reuse?platform=web&ui=elements

fluid valve Oct 23, 2024, 2:15 PM

#

It's starting to make sense - thank you

kindred foxBOT Oct 23, 2024, 2:15 PM

#

fluid valve Oct 23, 2024, 2:15 PM

#

Then after the Elements form is submitted, can I listen for setup_intent.succeeded to look at the payment method ID and add it to my application database?

open scarab Oct 23, 2024, 2:16 PM

#

Correct

fluid valve Oct 23, 2024, 2:16 PM

#

Okay, finally. 🙂

#

I'm going to code on this now for a bit.

#

It looks like this is working the way I expected:

#gmgarrison_code