sergx_error

[winter sable]

👋 Welcome to your new thread!

⏲️ We'll be here soon! We typically respond in a few minutes, but in some cases we might need a bit more time (e.g., server's busy, you've got a complex question, etc.).

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can 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/1246076099419705386

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

[wet forge]

@push('scripts_body')
    <script src="{{ asset('js/checkout/subscription.js?v=' . rand(1, 999)) }}"></script>
    <script>
        const stripe = Stripe("{{ config('app.stripe_key') }}");
        const options = {
            mode: 'subscription',
            amount: 2420,
            currency: 'eur',
        }
        const elements = stripe.elements(options);
        const paymentElement = elements.create('payment');
        paymentElement.mount('#payment-element');
    </script>
    <script src="{{ asset('js/checkout/subscription-setup.js?v=' . rand(1, 999)) }}"></script>
@endpush

@push('scripts_head')
    <script src="https://js.stripe.com/v3/"></script>
@endpush

I don't know if it could it be because this amount quantity of 24,20€

[queen raft]

Hi, let me help you with this.

[wet forge]

thank you!

[queen raft]

The parameters you use to create the Payment Element and that you send to create a PaymentIntent are different, hence the error.

[wet forge]

The thing is that the checkout is really interactive

[queen raft]

Why are you setting off_session: "true" when creating the Subscription?

[wet forge]

I don't know why is that parameter

async function handleSubscriptionCreation() {
    const businessQuantityValue = document.querySelector('[name="business_quantity"]');
    const employeesQuantityValue = document.querySelector('[name="employees_quantity"]');
    const periodValue = document.querySelector('[name="period"]');

    // Call elements submit
    const {error: submitError} = await elements.submit();
    if (submitError) {
      handleError(submitError);
      return;
    }

    updateCustomerBillingDetails();

    const subscriptionEndpoint = `/checkout/subscription/create`;
    const subscriptionResponse = await fetch(subscriptionEndpoint, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('[name="_token"]').value
        },
        body: JSON.stringify({
            business_quantity: businessQuantityValue.value,
            employees_quantity: employeesQuantityValue.value,
            period: periodValue.value,
            coupon: coupon
        })
    });
    const { type, clientSecretStripe, succesUrl, error: subError } = await subscriptionResponse.json();
    if (subError) {
        errorMessage.textContent = subError;
        updateButtonLoadingState(false);
        return;
    }
    const confirmIntent = type === "setup" ? stripe.confirmSetup : stripe.confirmPayment;

    stopPreventingPageUnload();

    // Confirmamos el intento utilizando los datos del formulario
    paymentMethodData = {
        billing_details: {
            name: name.value,
            address: { city: city.value, line1: line1.value, postal_code: postalCode.value, state: state.value }
        }
    }
    console.log(paymentMethodData)
    const {error} = await confirmIntent({
        elements,
        clientSecret: clientSecretStripe,
        confirmParams: {
            payment_method_data: {
                billing_details: {
                    name: name.value,
                    address: { city: city.value, line1: line1.value, postal_code: postalCode.value, state: state.value }
                }
            },
            return_url: succesUrl,
        },
    });

    if (error) {
        console.log(error)
        errorMessage.textContent = error.message;
        updateButtonLoadingState(false);
    }
}

The problem is that the checkout is really interactive, depends on what quantity of business and employees you choose

The amoun that's going to be charged will be different

I set 24,20€ that was like an estimation

[queen raft]

Is it a requirement for you to show the Payment Element before creating the PaymentIntent?
Because you could allow the customer to select the quantity, and only the create the Subscription and show the Payment Element. That would be much easier to implement.

[wet forge]

In this case I think it would be possible to show the payment element after the creation of the paymentIntent

But it's weird this was working perfectly last week

[queen raft]

You can follow this guide: https://docs.stripe.com/billing/subscriptions/build-subscriptions?ui=elements

[queen raft]

Did you change anything?

[wet forge]

nope

I've checking and I think

it would be neccesary to collect the payment details before creating an Intent

[queen raft]

It might be easier then to use SetupIntents to create the Payment Method for future usage, and then attach it to a Subscription: https://docs.stripe.com/payments/save-and-reuse?platform=web&ui=elements

[wet forge]

it wouldn't be possible to fix this error using the code I pasted? Is that all the implementation was built and tested, was working perfectly don't know what could happen

the wird thing is that the amount is 42,35€ I don't know why, it should be 24,20€

"error": {
"message": "The provided setup_future_usage (null) does not match the expected setup_future_usage (off_session). Try confirming with a Payment Intent that is configured to use the same parameters as Stripe Elements.",
"param": "setup_future_usage",
"payment_intent": {
"id": "pi_3PEoJgKYINwhn6n411CyrEut",
"object": "payment_intent",
"amount": 4235,
"amount_details": {
"tip": {
}
},

okay the problem I think is that I use the same user and email for testing in Stripe

And each test I do it creates a customer

For some reason is trying to charge an amount of a previous testing, weird

[harsh kelp]

Hi taking over here

Were you able to resolve this?

[wet forge]

nope it wasn't that 😦

Is that I don't understand the error

Request: req_rRGdtgo7kCeBTx

What's the problem?

[harsh kelp]

Looks like you passed off_session: true when creating the subscription: https://dashboard.stripe.com/test/logs/req_JPe1XyEO31g7JA

You shouldn't do that

[wet forge]

here is how i create the subscription

is it correct?

[harsh kelp]

That looks fine, but that's not what you did with the above one

See the link I shared

[wet forge]

looking for it

[harsh kelp]

#1246076099419705386 message

[wet forge]

okay it seems it's a problem of logic implementation to detect if the subscription is being created or it's being updated, fixing it

fixed it, thank you very much!

[harsh kelp]

No problem

[wet forge]

the doubt I have

@push('scripts_body')
    <script src="{{ asset('js/checkout/subscription.js?v=' . rand(1, 999)) }}"></script>
    <script>
        const stripe = Stripe("{{ config('app.stripe_key') }}");
        const options = {
            mode: 'subscription',
            amount: 2420,
            currency: 'eur',
        }
        const elements = stripe.elements(options);
        const paymentElement = elements.create('payment');
        paymentElement.mount('#payment-element');
    </script>
    <script src="{{ asset('js/checkout/subscription-setup.js?v=' . rand(1, 999)) }}"></script>
@endpush

@push('scripts_head')
    <script src="https://js.stripe.com/v3/"></script>
@endpush

it's mandatory that the payment has to be 24,20€? Or for example if the payment is 50€ there's no problem?

[harsh kelp]

That should match the amount on the payment intent

If you don't know the amount client-side it's likely that you shouldn't be doing the deferred subscription creation anyway