abhishekashyap_code

[viral moon]

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

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

[little lava]

On mobile vs on web

This is the payment methods i'm getting in payment intent response

[iron hemlock]

Hi 👋

Okay so it looks like you are using the Payment Element on the Web and the Payment Sheet in mobile, correct?

[little lava]

Yes, that is correct

  const { initPaymentSheet, presentPaymentSheet } = useStripe();

[iron hemlock]

Okay, and are you using the same code we show here to initialize the Payment Sheet?
https://docs.stripe.com/payments/accept-a-payment?platform=react-native#react-native-collect-payment-details

[little lava]

Yes, this is exactly how I'm using it. Only ephemeralKey is missing from this

[iron hemlock]

So you are using
allowsDelayedPaymentMethods: true,
?

[little lava]

Yes

 const { error: errorInInitialization } = await initPaymentSheet({
      merchantDisplayName: Constants.BOOKING_SCREEN_MERCENT_NAME,
      paymentIntentClientSecret: client_secret,
      allowsDelayedPaymentMethods: true
    });

[iron hemlock]

Okay, that was my first concern.

Can you try adding an ephemeral key to your integration?

[little lava]

That will take some time as it will require backend changes as well. My concern is that it s working correct for the web with same config, is there some issue with react-native sdk that im missing

[iron hemlock]

Can you share the code you are using the initialize the Payment Element in your web UI?

[little lava]

const initializeStripeScript = async (
  setClientSecret: (clientSecret: string) => void,
  setPaymentState: (paymentState: string) => void,
  paymentData: any,
) => {
  const data = {
    payment: {
      state: "initiated",
      new_payment_flow: "true",
      automatic_payment_methods_enabled: "true",
      gateway_details: {
        ...paymentData?.gateway_details,
        type: "session",
      },
    },
  };

  try {
    const response = await updatePaymentHelper(paymentData.token, data);
    setPaymentState(paymentStates.INIT);
    if (response?.data?.intent_details?.client_secret) {
      setClientSecret(response?.data?.intent_details?.client_secret);
    } else {
      setPaymentState(paymentStates.FAILED);
    }
  } catch (error) {
    if (typeof window !== undefined && typeof window.Sentry !== "undefined") {
      window.Sentry.captureException(`Payment Intent update api -> ${error} `, {
        extra: { request: JSON.stringify(data), response: error },
      });
    }
    // @ts-ignore
    if (error?.body?.message) {
      setPaymentState(paymentStates.FAILED);
    } else {
      setPaymentState(paymentStates.FAILED);
    }
  }
};

[iron hemlock]

Okay, maybe I'm missing something but I'm looking for the parameters you pass when initializing Stripe elements and the Payment Element specifically:
https://docs.stripe.com/js/elements_object/create
https://docs.stripe.com/js/elements_object/create_payment_element

I don't see those here

[little lava]

This one, right?

[iron hemlock]

That is ... a lot

I'm reviewing it to see what is going on here

[little lava]

The main gist is in:

const stripePromise = loadStripe(config.STRIPE_API_KEY);

const options = {
  clientSecret,
  appearance: {
    theme: "stripe",
    rules: rulesForStripeOptions,
  },
};

return (
  <Elements options={options} stripe={stripePromise}>
      <PaymentSummaryChild
        isNewLeadFormFlow={isNewLeadFormFlow}
        isMobile={!isDesktop}
        paymentData={paymentData}
        tncLink={tncLink}
        isPaymentFormWithAccommodationCard={isPaymentFormWithAccommodationCard}
      />
    </Elements>
)

[iron hemlock]

Ah, prefect

[little lava]

the clientSecret is what I'm getting from the backend after creating an intent

The creation of intent has all the necessary values like currency, amout etc

[iron hemlock]

Is it possible to share two Payment Intent IDs

• One created for your mobile app
• One created for your website

I'm just trying to rule things out

[little lava]

No