Tony_n | Stripe Developers | Page 1

opaque zodiacBOT Oct 10, 2022, 5:02 PM

#

terse pawn Oct 10, 2022, 5:02 PM

#

I'm not going to review the older threads. Can you summarize your question here?

stoic badger Oct 10, 2022, 5:04 PM

#

Clicking on it would take you right to it..

#

https://github.com/stripe/stripe-react-native/issues/1159

#

Hello, I am working on integrating stripe with react native. I have pretty much finished the integration successfully but one issue is that I cannot get the payment info from the payment sheet once a user has filled out the card. I get no error and everything works other than the payment info being undefined which based on my understanding it should not be.

I created an issue here but have yet to here a response back https://github.com/stripe/stripe-react-native/issues/1159

terse pawn Oct 10, 2022, 5:07 PM

#

And are you following this doc: https://stripe.com/docs/payments/accept-a-payment?platform=react-native&ui=payment-sheet?

stoic badger Oct 10, 2022, 5:08 PM

#

Yep, everything works perfectly. I can add the card to the paymentIntent and charge it and transfer money to my contractors

#

I am fairly certain it is a bug

terse pawn Oct 10, 2022, 5:08 PM

#

Which step, in this doc, is not doing what you expect?

stoic badger Oct 10, 2022, 5:08 PM

#

Based on the typescript defintions if there is no error then I should get the info back

#

const { error: openSheetError, paymentOption } = await presentPaymentSheet();

#

In this doc it only uses error

#

But on another doc and in the library itself it has paymentOption

#

Which comes back undefined even when there is no error

#

Basically I just want to show the card type and expiry to the user

#

So they have feedback on what card they added in case they want to edit

calm sparrow Oct 10, 2022, 5:22 PM

#

👋 stepping in as Snufkin needs to step away

#

Fairly certain this is expected currently

#

But let me double check

stoic badger Oct 10, 2022, 5:24 PM

#

Fair enough. Is there a way to show payment details then?

calm sparrow Oct 10, 2022, 5:24 PM

#

Ah actually paymentOption should resolve with a label and image: https://stripe.dev/stripe-react-native/api-reference/interfaces/PaymentSheet.PaymentOption.html

#

But it won't have your card type/expiry

stoic badger Oct 10, 2022, 5:24 PM

#

Yeah that is what the typings say

calm sparrow Oct 10, 2022, 5:24 PM

#

You would retrieve that server-side

stoic badger Oct 10, 2022, 5:24 PM

#

label and image is good enough I suppose

calm sparrow Oct 10, 2022, 5:24 PM

#

Okay so you are saying that it is just undefined currently

stoic badger Oct 10, 2022, 5:24 PM

#

Correct

calm sparrow Oct 10, 2022, 5:24 PM

#

And you aren't seeing any label/image

stoic badger Oct 10, 2022, 5:24 PM

#

Yep

calm sparrow Oct 10, 2022, 5:24 PM

#

Can you share your full code snippet?

#

And can you provide a PaymentIntent that you tested with?

stoic badger Oct 10, 2022, 5:25 PM

#

Yeah one moment

#

async function addPayment() {
setCardPaymentLoading(true);
const { total } = getTotalAdventureAmount();
let body = { amount: total * 100, paymentIntentId };
try {
const response = await fetch(${supabaseFunctionsUrl}/stripe?method=initPaymentSheet, {
method: 'POST',
headers: {
authorization: Bearer ${session?.access_token},
'Content-Type': 'application/json'
},
body: JSON.stringify(body)
});
const data = await response.json();
const { paymentIntent, ephemeralKey, customer, paymentIntentId: newIntent } = data;

  // deleted last payment type so need to disable (for edit flow)
  setDisabled(true);

  const { error: e } = await initPaymentSheet({
    customerId: customer,
    customerEphemeralKeySecret: ephemeralKey,
    paymentIntentClientSecret: paymentIntent,
    merchantDisplayName: 'Beta Bridge Inc.',
  });

  if (e) {
    throw new Error(e.message);
  }

  const { error: openSheetError, paymentOption } = await presentPaymentSheet();
  console.log('adsf', paymentOption, openSheetError)

  if (openSheetError?.code === 'Canceled') {
    return setCardPaymentLoading(false);
  }

  if (openSheetError) {
    throw new Error(openSheetError.message);
  }

  setCardPaymentInfo(paymentOption);
  setPaymentIntentId(newIntent);
  setDisabled(false);
  setCardPaymentLoading(false);
} catch (e) {
  showErrorModal(e?.message);
  return setCardPaymentLoading(false);
}

}

calm sparrow Oct 10, 2022, 5:28 PM

#

And what version of the RN SDK are you using?

stoic badger Oct 10, 2022, 5:28 PM

#

"@stripe/stripe-react-native": "^0.18.1",

calm sparrow Oct 10, 2022, 5:28 PM

#

Thanks

stoic badger Oct 10, 2022, 5:28 PM

#

Looking for the paymentintent now

calm sparrow Oct 10, 2022, 5:28 PM

#

Great

#

You could also run a fresh test

#

That might be best tbh

stoic badger Oct 10, 2022, 5:29 PM

#

ok one sec

calm sparrow Oct 10, 2022, 5:29 PM

#

👍

stoic badger Oct 10, 2022, 5:32 PM

#

pi_3LrPpCA5764Qahvb1QSZcDZi_secret_zum3qWITT6BB2mU8NAJVixBOn

#

Just occurred with a payment intent with an id of the above

#

I suppose I could just use a server side endpoint to get the info as a workaround

#

I will do that for now

calm sparrow Oct 10, 2022, 5:34 PM

#

That is mostly what you want to do any way. The image is returned as a base64 string that you then have to handle

#

And you won't get last4 or anything clientside

#

So just grabbing it serverside and returning it is really the best route

#

I'll still look into why image/label isn't being returned

stoic badger Oct 10, 2022, 5:35 PM

#

Ok thank you!

calm sparrow Oct 10, 2022, 5:36 PM

#

Can you do one test for me and just do const result = await presentPaymentSheet(); console.log("result: ", result);

stoic badger Oct 10, 2022, 5:38 PM

#

result: {paymentOption: undefined}

#

Did not even have the error key in there

#

I am also using test keys if that makes a difference

calm sparrow Oct 10, 2022, 5:39 PM

#

Nah shouldn't make a difference

#

Okay I'll need to repro myself... my sample is on 0.16.0 so I'll test it out with newer version later today and file a ticket if I can repro

#

But really, you should just ignore this and as long as you don't get an error you should fetch server-side for the info

stoic badger Oct 10, 2022, 5:42 PM

#

Sounds good thank you for the guidance and for looking at this

#Tony_n