feat: add support for paymentMethodOrder

[charliecruzan-stripe]

Summary

Adds support for paymentMethodOrder to PaymentSheet, and also adds support for the experimental field allowsRemovalOfLastSavedPaymentMethod. This could be removed/changed at any time

Motivation

parity with native libraries

closes #1656

[mariobrubio]

Hey @charliecruzan-stripe. I was testing this allowsRemovalOfLastSavedPaymentMethod flag and it seems it doesn't work.

I'm using 0.38.2 and I can actually delete the card if I only have one. The sheet should prevent the user to delete the last saved card.

[charliecruzan-stripe]

can you share how you're using it? Are you using Expo?

[mariobrubio]

can you share how you're using it? Are you using Expo?

Thanks for replying @charliecruzan-stripe I'm not using expo, I'm using rn-cli.

Here's how I'm using it.

<CustomerSheetBeta.CustomerSheet
  visible={customerSheetVisible}
  setupIntentClientSecret={setupIntent}
  customerEphemeralKeySecret={ephemeralKeySecret}
  customerId={customer}
  allowsRemovalOfLastSavedPaymentMethod={false}
  returnURL={'stripe-example://stripe-redirect'}
  onResult={({ error, paymentOption, paymentMethod }) => {
    console.log('error', error);
    setCustomerSheetVisible(false);              
    if (paymentOption) {
      setSelectedPaymentOption(paymentOption);
      console.log(JSON.stringify(paymentOption, null, 2));
    }
    if (paymentMethod) {
      setSelectedPaymentMethod(paymentMethod);
      console.log(JSON.stringify(paymentMethod, null, 2));
    }
  }}
  
/>

I based my work from the CustomerSheetScreen

The only difference would be that I'm not passing a CustomerAdapter

[charliecruzan-stripe]

and you re-ran pod install after upgrading to 0.38.2? is this on ios or android or both

[mariobrubio]

and you re-ran pod install after upgrading to 0.38.2? is this on ios or android or both

Just did it, deleted pods and re-installed them. Still unable to "prevent" the users to delete the last saved card.

I'm testing on iOS.

[mariobrubio]

Also - if you have two cards and you delete the "selected" one, shouldn't the other card get selected automatically? - what if the card is expired? These cases are apparently not covered and I'm not seeing any props that help with this.

[mariobrubio]

@charliecruzan-stripe - just a friendly reminder on the above. 🙏

[mariobrubio]

Isn't this always defaulting to true? if I inject allowsRemovalOfLastSavedPaymentMethod being false this code would default to true @charliecruzan-stripe

[charliecruzan-stripe]

no, the elvis operator tests whether the left hand side is non-null: https://kotlinlang.org/docs/null-safety.html#elvis-operator

here's some sample code to prove this will evaluate to false if allowsRemovalOfLastSavedPaymentMethod is false

[mariobrubio]

As I'm testing on iOS I forced the following to be false and it worked.

@_spi(STP) public var allowsRemovalOfLastSavedPaymentMethod = false

That means the variable is not getting changed in between the bridge and the native code.

[charliecruzan-stripe]

This is working on iOS for me as well, can you share a sample project that reproduces this?

[mariobrubio]

This is working on iOS for me as well, can you share a sample project that reproduces this?

@charliecruzan-stripe I'm literally now running the example app from this repository and the following does not work:

allowsRemovalOfLastSavedPaymentMethod={false}

within:

{useComponent && customerAdapter && (
        <CustomerSheetBeta.CustomerSheet
          visible={customerSheetVisible}
          setupIntentClientSecret={setupIntent}
          customerEphemeralKeySecret={ephemeralKeySecret}
          customerId={customer}
          allowsRemovalOfLastSavedPaymentMethod={false}
          returnURL={'stripe-example://stripe-redirect'}
          onResult={({ error, paymentOption, paymentMethod }) => {
            setCustomerSheetVisible(false);
            if (error) {
              Alert.alert(error.code, error.localizedMessage);
            }
            if (paymentOption) {
              setSelectedPaymentOption(paymentOption);
              console.log(JSON.stringify(paymentOption, null, 2));
            }
            if (paymentMethod) {
              console.log(JSON.stringify(paymentMethod, null, 2));
            }
          }}
          customerAdapter={customerAdapter}
        />
      )}

[mariobrubio]

I managed to understand why this was happening.

I was referencing both the component and the programmatically initialized sheets. When I removed the component one the flag started to work. It is tricky, hope this gets documented so future devs won't spend much time troubleshooting. Thanks for the support @charliecruzan-stripe

[davidme-stripe]

Approved