branyoto_unexpected | Stripe Developers | Page 1

opaque flameBOT Aug 1, 2024, 1:26 PM

#

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

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

gentle dust Aug 1, 2024, 1:26 PM

#

Hello

#

Where are you looking for preferredNetworks here?

#

You are just logging out the PaymentMethod after it is created?

#

I don't think we return this client-side

#

Can you show me the full payload for that log?

spare condor Aug 1, 2024, 1:28 PM

#

{
  "AuBecsDebit": {
    "bsbNumber": null,
    "fingerprint": null,
    "last4": null
  },
  "BacsDebit": {
    "fingerprint": null,
    "last4": null,
    "sortCode": null
  },
  "Card": {
    "availableNetworks": [
      "cartes_bancaires",
      "visa"
    ],
    "brand": "Visa",
    "country": "FR",
    "expMonth": 3,
    "expYear": 2033,
    "fingerprint": null,
    "funding": "credit",
    "last4": "1001",
    "preferredNetwork": null,
    "threeDSecureUsage": {
      "isSupported": true
    }
  },
  "Fpx": {
    "bank": ""
  },
  "Ideal": {
    "bankIdentifierCode": "",
    "bankName": ""
  },
  "SepaDebit": {
    "bankCode": null,
    "country": null,
    "fingerprint": null,
    "last4": null
  },
  "Sofort": {
    "country": null
  },
  "USBankAccount": {
    "accountHolderType": "Unknown",
    "accountType": "Unknown",
    "bankName": null,
    "fingerprint": null,
    "last4": null,
    "linkedAccount": null,
    "preferredNetworks": null,
    "routingNumber": null,
    "supportedNetworks": null
  },
  "Upi": {
    "vpa": null
  },
  "billingDetails": {
    "address": {
      "city": "Houston",
      "country": "US",
      "line1": "1459  Circle Drive",
      "line2": "Texas",
      "postalCode": "77063",
      "state": null
    },
    "email": "email@stripe.com",
    "name": null,
    "phone": "+48888000888"
  },
  "customerId": null,
  "id": "pm_1PiyxWH8Rz8h5V3q9LU0AnG2",
  "livemode": false,
  "paymentMethodType": "Card"
}

gentle dust Aug 1, 2024, 1:28 PM

#

I'm pretty sure you need to pass to your server and check via https://docs.stripe.com/api/payment_methods/object#payment_method_object-card-networks-preferred

spare condor Aug 1, 2024, 1:29 PM

#

okay but how can I send it to the server if I don't have it in the app ?

gentle dust Aug 1, 2024, 1:29 PM

#

What do you mean?

spare condor Aug 1, 2024, 1:31 PM

#

when we initialize the setup intent, we send from the application the stripeCustomerId, stripeIntentId, stripePaymentMethodId, stripeRedirectUrl and preferredNetwork to the backend who's building the request before sending it to Stripe

#

If I put preferredNetworks={[CardBrand.Visa]} in CardField, I have the preferredNetwork in paymentMethod payload with "visa"

gentle dust Aug 1, 2024, 1:39 PM

#

Is CardBrand.Visa just the string visa?

#

And what version of the React Native SDK are you using here?

spare condor Aug 1, 2024, 1:39 PM

#

CardBrand is an enum exported from @stripe/stripe-react-native

gentle dust Aug 1, 2024, 1:40 PM

#

Ah indeed

spare condor Aug 1, 2024, 1:40 PM

#

i'm using react native 0.73.6

gentle dust Aug 1, 2024, 1:40 PM

#

Which version of the Stripe React Native SDK?

spare condor Aug 1, 2024, 1:40 PM

#

0.38.3

gentle dust Aug 1, 2024, 1:40 PM

#

Gotcha

#

Okay give me a minute to spin up my sample and see if I can reproduce

spare condor Aug 1, 2024, 1:41 PM

#

Thank you 🙏

gentle dust Aug 1, 2024, 1:44 PM

#

In the meantime can you share you relevant client-side code here?

spare condor Aug 1, 2024, 1:45 PM

#

I can but be aware that this is realy not great 😂

gentle dust Aug 1, 2024, 1:45 PM

#

That's okay

spare condor Aug 1, 2024, 1:47 PM

#


export const onStripeSuccess = (stripePaymentMethod) => {
  const preferredNetwork = stripePaymentMethod.Card.preferredNetwork
  console.log(preferredNetwork, stripePaymentMethod)
}

export const StripePayment = (props) => {
  const { initStripePaymentMean, paymentInfo } = props

  const [isSubmitting, setIsSubmitting] = useState(false)

  useEffect(() => {
    initStripePaymentMean()
  }, [])

  const onSubmit = useCallback(() => {
    setIsSubmitting(true)
    return createPaymentMethod({
      paymentMethodType: 'Card',
    })
      .then(({ error, paymentMethod }) => {
        if (error) {
          return onStripeError(error)
        }

        return onStripeSuccess(paymentMethod)
      })
      .catch((error) => onStripeError(error))
      .finally(() => {
        setIsSubmitting(false)
      })
  }, [])

  if (!paymentInfo?.stripeIntentId) {
    return <LoadingPage testID="newPaymentMeanPageContainer" />
  }

  return (
    <PageTemplate title={I18n.t(`NewPaymentMeanPage.web.title`)}>
      <StripeProvider publishableKey={config.STRIPE_PUBLISHABLE_KEY} urlScheme={config.DEEPLINK_URL}>
        <Text>{I18n.t('NewPaymentMeanPage.web.cardDetails')}</Text>
        <CardField 
          postalCodeEnabled={false}
          autofocus
          preferredNetworks={[CardBrand.Visa, CardBrand.CartesBancaires]}
        />
        <PrimaryFullButton
          isLoading={isSubmitting || props.isConfirmingPayment}
          text={I18n.t('NewPaymentMeanPage.web.confirmOrder')}
          onPress={onSubmit}
        />
      </StripeProvider>
    </PageTemplate>
  )
}

gentle dust Aug 1, 2024, 1:48 PM

#

Hmm you aren't passing anything to CardField there for preferredNetworks.... ?

spare condor Aug 1, 2024, 1:50 PM

#

Oh sorry that wass a test

#

Is that better ? It's hard coded only for testing purposes

gentle dust Aug 1, 2024, 1:54 PM

#

Okay and can you run a fresh test with that code?

spare condor Aug 1, 2024, 1:55 PM

#

Yes give 5-10 minutes

#

As you can see the preferredNetwork is no longer empty but it's not the selected one either

gentle dust Aug 1, 2024, 2:06 PM

#

Hmm okay one sec

#

I need to update my sample to latest as it does look like a fix went out in 0.38.1: https://github.com/stripe/stripe-react-native/blob/master/CHANGELOG.md#0381---2024-06-28

#

But based on your video it looks like a bug to me

spare condor Aug 1, 2024, 2:16 PM

#

Is this a regression ? Because I still can go back to an older version of the sdk if you think this could fix it

gentle dust Aug 1, 2024, 2:17 PM

#

No I don't think so but give me a minute

opaque flameBOT Aug 1, 2024, 2:17 PM

#

gentle dust Aug 1, 2024, 2:33 PM

#

Hmm yeah I'm not getting any preferredNetworks at all

#

Ah whoops was using a US account

#

Yeah okay I can repro where even once I select Cartes Bancaires it still returns visa

#

So yeah I'll file a bug report internally about this

#

Will also check real quick if same behavior on 0.37.2

#

Yeah no seeing same behavior on older version too

#

So don't think a regression, may just have been broken on CardField for a bit, or maybe this is a test-mode only issue. Unclear but I'll file a bug report

#

I'd recommend watching the changelog at https://github.com/stripe/stripe-react-native/blob/master/CHANGELOG.md as that will indicate when a new version is released with a fix

spare condor Aug 1, 2024, 2:49 PM

#

Okay thank you, in about how many days will this be available ?

gentle dust Aug 1, 2024, 2:49 PM

#

I can't say, sorry.

spare condor Aug 1, 2024, 2:50 PM

#

Okya no problems

#

Thanks you for your help

gentle dust Aug 1, 2024, 2:53 PM

#

Sure, sorry about the inconvenience here.

#branyoto_unexpected