ameen-paymentelement-clientsecret

[pearl burrow]

Hello

[spare geode]

Note: this is with live keys

Hi

[pearl burrow]

Okay well first thing to do is to change to your test keys

To debug

Are you using Connect here?

[spare geode]

Yes I am

[spare geode]

Ok the thing is it works on test keys

[pearl burrow]

Have you checked that you are initializing Stripe.JS as your Connected Account like we show in https://stripe.com/docs/connect/authentication#adding-the-connected-account-id-to-a-client-side-application

[spare geode]

Also while using it I will like to avoid passing the client secret to the redirect url

The error results from my payment element form not loading on the page

[earnest escarp]

Hi 👋

I"m stepping in as @pearl burrow needs to go.

First can we confirm you are initializing Stripe.js with the stripeAccount parameter?

[spare geode]

Yes

[earnest escarp]

Okay. Can you share an example payment intent you are trying to confirm?

[spare geode]

  <script type="text/javascript">
            const options = {
                clientSecret: '{{$client_secret}}',
                // Fully customizable with appearance API.
                appearance: {/*...*/},
            };

            // Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous step
            const elements = stripe.elements(options);

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


            const form = document.getElementById('payment-form');

            form.addEventListener('submit', async (event) => {
                event.preventDefault();

                const {error, paymentIntent} = await stripe.confirmPayment({
                    //`Elements` instance that was used to create the Payment Element
                    elements,
                    redirect: 'always',
                    confirmParams: {
                        return_url: 'https://www.example.com/tip-redirect',
                    },
                });

                if (error) {

                    console.log(error);
                    const messageContainer = document.querySelector('#error-message');
                    messageContainer.textContent = error.message;
                } else {
                    console.log('Intent gotten');
                }
            });
        </script>```

and this is my form ```html
<form id="payment-form" data-secret="{{$client_secret}}">
<div id="payment-element">
<!-- Elements will create form elements here -->
</div>

                            <br>
                            <button id="submit" type="submit" class="btn btn-primary rounded btn-lg">Submit</button>
                            <div id="error-message">
                                <!-- Display error message to your customers here -->
                            </div>
                        </form>

error ```js

v3/:1 Unhandled payment Element loaderror
{error: {…}}
error
:
message
:
"The client_secret provided does not match any associated PaymentIntent on this account."
param
:
"client_secret"
request_log_url
:
"https://dashboard.stripe.com/test/logs/req_t2e3lODFrwMRIa?t=1701985164"
status
:
400
type
:
"invalid_request_error"
[[Prototype]]
:
Object
[[Prototype]]
:
Object```

[earnest escarp]

Okay and what is the ID for the payment intent you are trying to confirm here?

[spare geode]

Let me check if it creates a payment intent to begin with

Strange it works with test keys

[earnest escarp]

The client_secret will need to come from a Payment Intent. Otherwise you won't have anything to confirm