storedPaymentMethods in case of single paymentMethod

[gkueny]

Contexte

In our app, we show paiements methods in custom UI

• Card paiment
• Paypal
• ApplePay
• etc..

In case of card paiement, we want to show stored Payement method if any.

Issue

For now, it's just possible to show:

• All paiements methods with start('dropin')
• Only card paiement with start('scheme') (and other paiements type)

In our case, we do not want to show all available paiement in NativeModule because our user already choose CreditCard paiement

Workaround

For now, we patch this library to have this code in src/AdyenCheckoutContext.tsx

diff --git a/src/AdyenCheckoutContext.tsx b/src/AdyenCheckoutContext.tsx
index 1fcd523..2e0b063 100644
--- a/src/AdyenCheckoutContext.tsx
+++ b/src/AdyenCheckoutContext.tsx
@@ -134,7 +134,10 @@ const AdyenCheckout: React.FC<AdyenCheckoutProps> = ({
       startEventListeners(config, nativeComponent);

       if (paymentMethod) {
-        const singlePaymentMethods = { paymentMethods: [paymentMethod] };
+        const singlePaymentMethods = { 
+          paymentMethods: [paymentMethod],
+          storedPaymentMethods: paymentMethods.storedPaymentMethods,
+        };
         const singlePaymentConfig = {
           ...config,
           dropin: { skipListWhenSinglePaymentMethod: true },

Proposition

Is it possible to add a config to show stored paiement that match paymentMethod to show ?

[descorp]

Hey @gkueny

Thank you for reaching out! 💚

This is indeed not possible with current AdyenCheckoutContext. Drop-In on iOS and Android are not design to work with single stored payment method.

We have this on our backlog, and in next versions we will add way to initiate stored payment by its' ID:

start('HW9LL9ML73M84H82')

Potential workaround:

Instantiate this payment "API-Only" way without use of AdyenCheckoutContext; only problem - you wouldn't be able to handle native 3DS challenges (only web-redirect 3DS).

You might need encrypted CVV - you can use AdyenCSE module for this.

[gkueny]

thanks for your response !

[gkueny]

Hi @descorp ,

On this subject, to avoid using "API-Only" way or payment by ID,

Is it possible to show related stored payment on single payment method ? (with config optin ?)

I can imagine this API:

// config API
const configuration = {
   // ....
   showStoredPaymentForSinglePaymentMethod: true
}

// In AdyenContext

if (paymentMethod) {
        const storedPaymentMethods = config.showStoredPaymentForSinglePaymentMethod && paymentMethods.storedPaymentMethods 
          ? paymentMethods.storedPaymentMethods.filter(storedPaymentMethod => {
              return storedPaymentMethod.type === paymentMethod.type
            }) 
          : []
        const singlePaymentMethods = { 
          paymentMethods: [paymentMethod],
          storedPaymentMethods: storedPaymentMethods,
        };
        const singlePaymentConfig = {
          ...config,
          dropin: { skipListWhenSinglePaymentMethod: true },
        };
        nativeComponent.open(singlePaymentMethods, singlePaymentConfig);
      } else {
        nativeComponent.open(paymentMethods, config);
      }

With this API, we will be able to show storedPayments for single payment.

Here is the flow it would unlock:

• User select paymentMethod on App UI (we do not use Adyen SDK)
• User see AdyenSDK popin
• If selected paymentMethod have some storedPayement, we show them to the user, otherwise we show directly the paymentMethod form

[gkueny]

Hello @descorp !

do you think this feature could land in this module ?

for now we patch this lib to implement this feature and have used it in production succesfully (rc-2)

If you approve the API I can submit an PR

[descorp]

Hey @gkueny

Sorry for the long reply and not getting back to you.

Main issues with approach:

• the UI for a single stored card on DropIn is rather odd for a single stored payment and adding new UI can only be done via native SDKs.

We currently have showPreselectedStoredPaymentMethod: true, that will show:

However if you send only a single stored payment Method, UI looks odd:

---

One suggestion I could make - better search for StoredPaymentMethod.id rather then type - shopper might have several stored cards. I would encourage you to make PR - it will allow us to test and asses the idea faster.

---

showStoredPaymentForSinglePaymentMethod

This is great idea: we are looking to enable standalone stored payment methods, but it will require more work from Android side. Currently we are postponing all major work till upcoming Android v5 release, since it will effect multiple public APIs.

[gkueny]

thanks for your response @descorp .

I will make a PR, it will be easier to discuss / test the proposal indeed.

[descorp]

Hey @gkueny

Stored payment method could be performed via CSE + Standalone Action handling on v2. Feel free to check BETA version.

[camil-adyen]

Closing this issue as it's fixed on v2.0.0-BETA.