kevin-reactnative-paymentsheet

[unique sun]

kevin-reactnative-paymentsheet

Can you share the exact end to end doc you are following and your exact client-side code?

https://stackoverflow.com/questions/76042623/flutter-stripe-payment-sheet-does-not-appear is a common reason that every misunderstands

so if you share your code I can look at your initialization to confirm

[velvet jay]

sure, I follow this flow with setupIntent
https://stripe.com/docs/payments/accept-a-payment?platform=react-native&ui=payment-sheet

[unique sun]

yeah what's your exact code when you call initPaymentSheet

[unique sun]

that's a picture

please share code here as text, developer to developer

[velvet jay]

sorry

[unique sun]

all good, just that way I can copy-paste the incorrect line

[unique sun]

ephemeralKey: response?.data?.ephemeralKey,

what does that value look like? My gut tells me you incorrectly use the ekey_123

[velvet jay]

and the backend code:

async stripePaymentSheet(userId: string) {
const user = await Users.findOne(
{ _id: new ObjectId(userId) },
{ noCursorTimeout: false },
);
if (!user) throw new HttpException(User not found, 404);

const customer = user.stripeID
  ? await this.stripe.customers.retrieve(user.stripeID)
  : await this.stripe.customers.create({
      email: user.email,
      name: user.name,
    });
const ephemeralKey = await this.stripe.ephemeralKeys.create(
  { customer: customer.id },
  { apiVersion: '2022-11-15' },
);
const setupIntent = await this.stripe.setupIntents.create({
  customer: customer.id,
  automatic_payment_methods: {
    enabled: true,
  },
});

return {
  setupIntent: setupIntent.client_secret,
  ephemeralKey: ephemeralKey.secret,
  customer: customer.id,
  publishableKey: STRIPE_PUBLIC_KEY,
};

}

[unique sun]

ah no so you do return the secret there

[velvet jay]

yes, and the value similar to "ek_live_YWN...."

works perfectly in iOS

[unique sun]

does it work in Test mode first?

[velvet jay]

good question, probably itried yesterday but I'll do a quick test, just to be sure. 1 min pls

[unique sun]

sure

[velvet jay]

doesnt work in android

but works in ios

test mode

[unique sun]

And there's no error in the console after calling initPaymentSheet()?

[velvet jay]

no errors

just this one: No payment sheet has been initialized yet. You must call initPaymentSheet before presentPaymentSheet.

[unique sun]

might be worth adding a log before/after calling both initPaymentSheet()and presentPaymentheet() to make sure you get the code in the right order

@flat minnow is going to take over for me and can help further!

[flat minnow]

👋 catching up

[velvet jay]

thanks!

[flat minnow]

Yeah same question that if you add a log, would it be printed out in iOS and Android

Regardless this is weird

[velvet jay]

ios:

LOG initializePaymentSheet()...
LOG fetchPaymentSheetParams()... getting setupIntent, ephemeralKey, customer
INFO [request] ["user/me"]
INFO [request] ["user/payment-sheet"]
LOG initializePaymentSheet result =>>>>> {"paymentOption": undefined}
LOG openPaymentSheet()...
LOG {"paymentOptionPresentSheet": undefined, "platformOs": "ios", "presentPaymentSheetError": {"code": "Canceled", "declineCode": null, "localizedMessage": "The payment has been canceled", "message": "The payment has been canceled", "stripeErrorCode": null, "type": null}}
INFO [request] ["user/me"]

works ok in iOS, I have simply cancelled the payment sheet

[flat minnow]

👍

How about Android

[velvet jay]

i got it

I have detected the problem, in custom appareance I have specified a font that is not previously downloaded

[flat minnow]

👍