tyren_api | Stripe Developers | Page 1

quick vectorBOT May 23, 2025, 9:01 AM

#

👋 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/1375398249954934824

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

#

upbeat bough May 23, 2025, 9:03 AM

#

I also understand that I can select the payment method for the payment intent to be complete, which I haven't tested yet. But I can't do this everytime it fails, the PaymentElement component should send method information shouldn't it ?

deep isle May 23, 2025, 9:15 AM

#

Hi, can you confirm which integration document you're following to build your flow? From looking at the request you shared, https://dashboard.stripe.com/logs/req_tSkmGpVckgipEU it looks like you created the PaymentIntent but you're not handling the client's side to the collect the payment method details.

Can you share your publicly accessible site so I can further review this with reproducable steps?

upbeat bough May 23, 2025, 9:17 AM

#

I'm following this document in "Advanced integration" with node environment

#

https://docs.stripe.com/payments/accept-a-payment?platform=web&ui=elements&lang=node

#

My marketplace is bluemarket.blue, however this transaction is private and reproduce the bug requires to access it and pay it

#

I can record a video of me doing the steps

#

I've just tested to pay again, this time I don't have any error in client side, the StripeElements sets up correctly then when I click on the submit button nothings happen

deep isle May 23, 2025, 9:20 AM

#

Can you confirm at what stage you're seeing the error? What is the exact full error? When do you see the error exactly?

#

So that is something wrong with your code

upbeat bough May 23, 2025, 9:20 AM

#

Yes, let me provide all evidences/screenshot

upbeat bough May 23, 2025, 9:21 AM

#

deep isle So that is something wrong with your code

I don't think so as other payments are working and i have exactly the same integration as in the guide

deep isle May 23, 2025, 9:21 AM

#

Can you follow this guide: https://docs.stripe.com/payments/quickstart?lang=node

#

This has a more detailed step-by-step guide.

#

You can also download the code

upbeat bough May 23, 2025, 9:21 AM

#

So I've created the payment intent on the 21/05 around half past 6 pm

#

Then my customer tried to pay using the StripeElement component

#

#

When he clicked submit this error occured :

#

#

And in the stripe dashboard I see this :

#

This is the payment ID

#

pi_3RRFYXGvkE6sQ4XA1Mluk6HX

deep isle May 23, 2025, 9:24 AM

#

Can you copy and paste the exact errors in red on here please?

#

What is your code doing when you click on on 'Payer'?

upbeat bough May 23, 2025, 9:24 AM

#

I can't, i only have the screenshot but i can rewrite it

deep isle May 23, 2025, 9:24 AM

#

Are you saying that other non-card payment methods are working?

upbeat bough May 23, 2025, 9:25 AM

#

async function onStripeFormSubmit(event : Event) {
        event.preventDefault();

        // loading = true;
        const { error } = await stripeClient.confirmPayment({
            //`Elements` instance that was used to create the Payment Element
            elements: stripeElements,
            confirmParams: {
                return_url: returnURL
            }
        });

        if (error) {
            // This point will only be reached if there is an immediate error when
            // confirming the payment. Show error to your customer (for example, payment
            // details incomplete)

            //error, useless

            // const messageContainer = document.querySelector('#stripe-error-message');
            // messageContainer.textContent = error.message;
        } else {
            // loading = false;
            // Your customer will be redirected to your `return_url`. For some payment
            // methods like iDEAL, your customer will be redirected to an intermediate
            // site first to authorize the payment, then redirected to the `return_url`.
        }
    }

upbeat bough May 23, 2025, 9:26 AM

#

deep isle Are you saying that other non-card payment methods are working?

No, I say this only occurs since this payment intent, previous ones worked fine

#

With card method or sepa

#

Both worked fine

#

Nothing changed in the code

#

But now, i got another similar failure this morning

#

When someone retries to pay, their is no error, just nothing happen

#

I just did try

deep isle May 23, 2025, 9:28 AM

#

It is hard to try to see what the issue might be without a site to reproduce this.

upbeat bough May 23, 2025, 9:29 AM

#

Has anything changed in both PaymentIntent and PaymentElement APIs recently ?

deep isle May 23, 2025, 9:29 AM

#

Can you write out the errors in red please? I'm helping someone else and I will check it in a few minutes

upbeat bough May 23, 2025, 9:29 AM

#

Ok

deep isle May 23, 2025, 9:29 AM

#

No, not that will impact what you see

#

Not that I'm aware of

#

Things are working on my end with my test integration

upbeat bough May 23, 2025, 9:30 AM

#

Failed to load resource: the server responded with a status of 401() https://api.hcaptcha.com/authenticate

#

I don't understand how a payment intent can be incomplete with no payment method selected

#

The exact same issue occured this morning on this payment pi_3RRrOGGvkE6sQ4XA0XzwSLkv

deep isle May 23, 2025, 9:37 AM

#

We document how PaymentIntents work here: https://docs.stripe.com/payments/paymentintents/lifecycle?intent=payment

As for the Dashboard status, if you hover over it, it should match the explanation of the status of the PaymentInent: 'The customer has not entered their payment method.'

upbeat bough May 23, 2025, 9:37 AM

#

Yes but how is this possible ?

#

I use the PaymentElement component, it should fill up the selected payment method

#

Click on "Payer" is not possible if the form is incomplete

#

And right now I try again using the same client secret, using the payment element component, as shown in my screenshot i filled the form but when i click "Payer" and submit it nothing happen

deep isle May 23, 2025, 9:39 AM

#

Can you share a recording of the issue? Please ensure that you share the logs from the developer inspector in the recording

upbeat bough May 23, 2025, 9:39 AM

#

Ok

deep isle May 23, 2025, 9:40 AM

#

Not having the page, and not being able to reproduce the issue is challenging to debug. You said it worked and nothing changed on your code as well

upbeat bough May 23, 2025, 9:40 AM

#

Yes i get it

deep isle May 23, 2025, 9:41 AM

#

Can you share your entire code here too?

upbeat bough May 23, 2025, 9:41 AM

#

Yes I can, I'm using svelte as a framework

deep isle May 23, 2025, 9:42 AM

#

I have not used that framework before

upbeat bough May 23, 2025, 9:42 AM

#

This is the StripeElement component client side

#

<script lang="ts">
    import { Button, Icon } from "@bm/score/components";
    import { onMount } from 'svelte';
    import { STRIPE_PUBLIC_KEY } from '@scripts/client/constants.js'

    type Props = {
        clientSecret : string;
        returnURL : string;
    };

    let {
        clientSecret,
        returnURL
    } : Props = $props();

    let stripeClient : any = $state();
    let stripeElements : any = $state();
    let mounttarget : HTMLElement | undefined = $state();

    async function onStripeFormSubmit(event : Event) {
        event.preventDefault();

        // loading = true;
        const { error } = await stripeClient.confirmPayment({
            //`Elements` instance that was used to create the Payment Element
            elements: stripeElements,
            confirmParams: {
                return_url: returnURL
            }
        });

        if (error) {
            // This point will only be reached if there is an immediate error when
            // confirming the payment. Show error to your customer (for example, payment
            // details incomplete)

            //error, useless

            // const messageContainer = document.querySelector('#stripe-error-message');
            // messageContainer.textContent = error.message;
        } else {
            // loading = false;
            // Your customer will be redirected to your `return_url`. For some payment
            // methods like iDEAL, your customer will be redirected to an intermediate
            // site first to authorize the payment, then redirected to the `return_url`.
        }
    }

    onMount(() => {
        const options = {
            clientSecret,
            appearance: {
                theme: 'stripe',
                variables: {
                    colorPrimary: '#35bbff',
                    colorBackground: '#ffffff',
                    colorText: '#0A2463',
                    colorDanger: '#C15757',
                    fontFamily: 'Montserrat, Ideal Sans, system-ui, sans-serif',
                    spacingUnit: '2px',
                    spacingGridRow: '4vw'
                    // borderRadius: '1px',
                }
            },
        };

        stripeClient = window.Stripe(STRIPE_PUBLIC_KEY);

        // Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in step 3
        stripeElements = stripeClient.elements(options);

        // Create and mount the Payment Element
        const paymentElement = stripeElements.create('payment');
        paymentElement.mount(mounttarget);
    });
</script>

<form id="payment-form" onsubmit={onStripeFormSubmit}>
    <div id="payment-element" bind:this={mounttarget}>
        <!-- Elements will create form elements here -->
    </div>

    <div class="buttons">
        <Button id="submit" type="submit" class="blue rectangle">
            <Icon glyph="credit_card" />
            <p>Payer</p>
        </Button>
    </div>

    <div id="stripe-error-message">
        <!-- Display error message to your customers here -->
    </div>
</form>

<style lang="scss">
    form#payment-form {
        padding: 1vw;

        .buttons {
            display: flex;
            justify-content: flex-end;
            padding-top: 2vw;
        }
    }
</style>

#

The Stripe js core is imported in a previous layer so window.Stripe does exists

#

The client secret is passed on by the server when server sied rendering

#

This is the backend function in charge of creating payment intent beforehand :

    async createPaymentIntent(idCustomer : string, amount : number | undefined, transfer_group? : string, metadata ? : any){
        
        return await this.#client.paymentIntents.create({
            amount : Math.floor((amount ?? 0) * 100),
            customer : idCustomer,
            currency: 'eur',
            transfer_group,
            payment_method_types : ["card", "sepa_debit"],
            metadata
        });
    }

#

A transfer_group is usually defined but should not impact payment

deep isle May 23, 2025, 9:48 AM

#

When you click on the 'Pay' button, does it make a call to your code? Can you add some logs to ensure that the confirm call is called? Can you debug your client-side code and trace what is happening there?

upbeat bough May 23, 2025, 9:49 AM

#

upbeat bough May 23, 2025, 9:49 AM

#

deep isle When you click on the 'Pay' button, does it make a call to your code? Can you ad...

I guess i have to check, i'll put a console log also in the "error" part

#

But I can't do it right now

#

I will do it during the week-end

#

Is it okay if i come back to you on monday with the results ?

deep isle May 23, 2025, 9:53 AM

#

Yes, absolutely!

upbeat bough May 23, 2025, 9:56 AM

#

Ok cool

quick vectorBOT May 23, 2025, 9:57 AM

#

#tyren_api