#thejohndonner_code

1 messages ¡ Page 1 of 1 (latest)

past elmBOT
#

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

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

Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.

swift hemlock
#

Hey Soma! I just reopened it

weak iron
#

hi there!

#

The provided setup_future_usage (off_session) does not match the expected setup_future_usage (null). Try confirming with a Payment Intent that is configured to use the same parameters as Stripe Elements.
can you share the Request ID (req_xxx) that returned that error?

swift hemlock
#

Here is a dev id: req_4RmzsRJaLbJ9aB

#

(under account acct_1IhzV2ESL7WIR4DA)

weak iron
#

I think the error is pretty clear:

  • since you use setup_future_usage: "off_session" when creating the PaymentIntent
  • then you also need to set the same thing when you initialize the payment element
swift hemlock
#

What does it mean, "when you initialize the payment element"? Isn't that the same as when we "create" the payment intent?

weak iron
#

can you share your code that creates the Payment Element (with the amount, currency, etc.)?

swift hemlock
#

In the backend, We call:

      if post_params[:is_storing_credit_card_enabled] == true
        intent_params[:setup_future_usage] = 'off_session'
      end

        ::Stripe::PaymentIntent.create(
          intent_params,
          stripe_account: camp.stripe_account_id
        )
weak iron
#

this is the backend code. I'm talking about the frontend code with Stripe.js

swift hemlock
#

(with correct intent_params otherwise, this is code that's functioning in our production server)

#

One moment...

# 
const stripePublicKey = import.meta.env.VITE_STRIPE_PUBKEY;

const [stripePromise, setStripePromise] = useState<Promise<Stripe | null>>()
  useEffect(() => {
    setStripePromise(
      loadStripe(
        stripePublicKey,
        { stripeAccount: props.camp.stripe_account_id }
      )
    )
  }, [])

  const stripeOptions: StripeElementsOptions = {
    mode: "payment",
    amount: Math.round(Number(priceDetails?.total) * 100.0),
    currency: camp.currency,
    paymentMethodTypes: camp.booker_payment_methods,
    appearance: {
      variables: {
        fontSizeBase: '14px', // Smaller base font size
        borderRadius: '4px', // Optional: customize border radius
      },
      rules: {
        '.Input': {
          padding: '8px 12px', // Adjust input field padding
        },
        '.Input--invalid': {
          borderColor: '#e3342f', // Optional: customize invalid state border
        },
      },
    }
  }

  return (
         <Elements stripe={stripePromise} options={stripeOptions}>
            {/* Child */}
          </Elements>
  )

And then in the Child component:

const stripe = useStripe()
  const handleSubmit = async (event: React.FormEvent) => {
      if (!stripe || !elements) {
        console.error("[STRIPE] stripe or elements not loaded")
        props.setErrorMessage(
          "There's an issue loading the Stripe payment processor. Please reload the page and try again.",
        )
        return
      }

      const pdParams = buildPriceDetailParams()
      const { id: intentId, clientSecret } = await upsertIntent(pdParams)
      const payload = await stripe.confirmPayment({
        elements,
        clientSecret,
        confirmParams: {
          return_url: `${window.location.origin}/reservations/${reservation.id}`,
        },
        redirect: "if_required",
      })
weak iron
#

in StripeElementsOptions you need to add setupFutureUsage to be consistent with how you create the PaymentIntent later.

swift hemlock
#

Ok, we will test this shortly, thank you!