PERF-PaymentSheet

[gleaming fossil]

Hi, can you provide more details please? What are the steps to reproduce on my end? What does your code look like? Did it ever work? Or did it stop working?

[flint spade]

Create a setup intent & ephemeralkey via golang script

    key, err := ephemeralkey.New(&stripe.EphemeralKeyParams{
        Customer:      stripe.String(cust.ID),
        StripeVersion: stripe.String("2020-08-27"),
    })
...
re, err := setupintent.New(&stripe.SetupIntentParams{
        Customer: stripe.String(cust.ID),
    })

Use the emph secret and setup intent client secret to render payment setup sheet in a react-native app.

The code was never workin within Android but does work within iOS.

[lavish musk]

Are you seeing getting errors/anything in your logs when it crashes?

Can you also share what version of our sdk you're using?

[flint spade]

No visible logs when running it. Seems to just stall out.

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

[lavish musk]

Which specific line of code is it crashing on? And if you try an earlier version - like 0.12.0 do you still see the same issue?

[flint spade]

  const init = async ()=>{
    await initPaymentSheet({
      customerId: "customer_id",
      customerEphemeralKeySecret: "key_secret",
      setupIntentClientSecret: "setup_intent_secret"
    })
    await presentPaymentSheet() // <--- crashes here i believe
  }

[lavish musk]

Let me do some digging - my guess right now is that the Android SDK maybe changed something and now requires some additional fields that aren't well documented

I'll let you know what i find

[flint spade]

thank you @lavish musk !

[lavish musk]

Can you try adding merchantDisplayName: "placeholder" in your call to initPaymentSheet?

[flint spade]

bingo, that appears like it fixed the issue

[lavish musk]

nice! glad it worked 🙂

[flint spade]

Side note, can i ask a different question? unrelated to the original?

[lavish musk]

Yup! Go ahead

[flint spade]

the appearance field in the initPaymentSheet isn't working with android right?

the same field values in iOS change the appearance but in android they do not

such as

/** Describes the appearance of the primary "Pay" button at the bottom of your Payment Sheet */
primaryButton: PrimaryButtonConfig;

[lavish musk]

Can you share your code for setting appearance? In general, the Appearance is expected to work with Android so I wonder if there are some specific attributes that aren't working

[flint spade]

{
        primaryButton: {
          colors: {
            background: "#000000"
          },
          shapes: {
            borderRadius: 20,
          },
        },
      }

does change the background color of the button or the border radius

works on iOS though

looks like the following. some of the other fields work. it is kinda hit or miss though

[lavish musk]

👍 let me do some digging

[flint spade]

sweet

[lavish musk]

I think this is down to how the shape of the PrimaryButton differs in Android (see https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-primary-button/index.html) compared to ios (see https://stripe.dev/stripe-ios/docs/Classes/PaymentSheet/Appearance/PrimaryButton.html) - the Android one splits into light and dark, and doesn't have top-level background colors

[flint spade]

Yet the top level style prop doesn’t take over either right?

[lavish musk]

correct - if you look at the code it's not checking the top level property. it's just checking for light or dark (https://github.com/stripe/stripe-react-native/blob/d24aff85466efad622f6f635b17e8c2c4830d1b8/android/src/main/java/com/reactnativestripesdk/PaymentSheetAppearance.kt#L74)

[flint spade]

So customization of the button isn’t available on Android yet?

[lavish musk]

It is customizable - you just have to specify it for both light and dark mode. You can't specify an overarching override that will apply to both. You'll want to do a check like Platform.OS === 'android' and then set the PrimaryButton accordingly