Preventing Sensitive Data Exposure in Background: Hiding Stripe Payment Sheet in React Native

[shalini-mekala11]

trafficstars

Is your feature request related to a problem? Please describe. We use the Stripe payment sheet in our React Native app to collect payment details. To improve security, we want to hide sensitive fields or hide the sheet with an overlay when the app is in the app switcher or backgrounded, to prevent unauthorized screenshots. Is there a way to mask the fields or hide the sheet in these cases?

Describe alternatives you've considered We tried using a React Native modal in the background to hide the sheet, but it didn't work. Could you please suggest how we should proceed?

Additional context We are using the sheet in this way.

const { error } = await initPaymentSheet({
      merchantDisplayName: "**",
      customerId: setupIntent.customerId,
      customerEphemeralKeySecret: setupIntent.ephemeralKey,
      setupIntentClientSecret: setupIntent.clientSecret,
      billingDetailsCollectionConfiguration: {
        address: AddressCollectionMode.NEVER,
        name: CollectionMode.ALWAYS
      },
      intentConfiguration,
      allowsDelayedPaymentMethods: true,
      returnURL: "****",
      appearance: {
        colors: {
          primary: "*****"
        }
      }
    });

 const { error } = await presentPaymentSheet();