react-native-adyen-payment icon indicating copy to clipboard operation
react-native-adyen-payment copied to clipboard

Question: support for tokenization?

Open m3co-code opened this issue 5 years ago • 5 comments

Hi! First of all thanks for your work in building this library!

We're just in the first steps of integrating adyen and have a working version for the web so far. We wanted to integrate this now also in our apps, but I'm not sure whether this library supports tokenization of cards in order to be used at a later point.

In specific, we're tokenizing the cards in our server with the following config in the /payments call towards Adyen:


{
    amount: { currency: "EUR", value: 0 },
    paymentMethod: paymentMethod, // this contains the encrypted payment method data from the FE
    reference: "tokenize-" + Date.now(),
    recurringProcessingModel: "UnscheduledCardOnFile",
    storePaymentMethod: true,
    shopperReference: accountId,
    merchantAccount: merchantAccount,
    returnUrl: "https://dummy.url", // Dummy URL. Needs to be adapted for the app (see JSDoc of the property).
}

The above call is exposed from our server on a custom POST /api/methods/tokenize endpoint and called in the onSubmit handler of the web adyen drop in.

Is it possible to realize the tokenization with this library? Sorry if my question is off. Please just let me know if this is the case. As said I'm pretty new and just getting into the whole topic. Thanks big times :teddy_bear:

m3co-code avatar Jun 10 '20 12:06 m3co-code

@marco-jantke Will defenitely have a look into it.

mkharibalaji avatar Jun 26 '20 14:06 mkharibalaji

Short answer: Yes it is possible (at least on Android, will try for iOS next week)

In order to enable it you have to add the property showStorePaymentField to the component data:

var componentData = {
    scheme: {
       card_public_key : CARD_PUBLIC_KEY,
       showStorePaymentField: true,
    },
    bcmc: {
       card_public_key : CARD_PUBLIC_KEY,
       showStorePaymentField: true,
    }
}

I did not find this anywhere in the documentation, so it is probably a good idea to add this somewhere (as I won't expect anyone to go through the source code of this wrapper to figure it out).

ChielBruin avatar Mar 04 '21 15:03 ChielBruin

I checked on iOS and it seems not to work using the same solution as shown above for Android. Seems like I have to dive into the implementation to figure out the correct call in the coming days.

ChielBruin avatar Mar 11 '21 14:03 ChielBruin

I found the issue on iOS. It turns out that the properties have different names on Android and iOS. On Android it is called showStorePaymentField and on iOS it is called showsStorePaymentMethodField (note the extra 's' after show).

TLDR of the messages above: Yes, tokenization is supported on both iOS and Android. In order to enable it you have to pass two properties to the componentData:

const componentData = {
    scheme: {
       card_public_key : CARD_PUBLIC_KEY,
       showStorePaymentField: true,   // For Android
       showsStorePaymentMethodField: true, // For iOS
    },
    bcmc: {
       card_public_key : CARD_PUBLIC_KEY,
       showStorePaymentField: true,   // For Android
       showsStorePaymentMethodField: true, // For iOS
    }
}

ChielBruin avatar Mar 16 '21 14:03 ChielBruin

Thanks a lot for digging into this. Very appreciated!

On Tue, Mar 16, 2021, 3:31 PM Chiel Bruin @.***> wrote:

I found the issue on iOS. It turns out that the properties have different names on Android and iOS. On Android it is called showStorePaymentField and on iOS it is called showsStorePaymentMethodField (note the extra 's' after show).

TLDR of the messages above: Yes, tokenization is supported on both iOS and Android. In order to enable it you have to pass two properties to the componentData:

const componentData = { scheme: { card_public_key : CARD_PUBLIC_KEY, showStorePaymentField: true, // For Android showsStorePaymentMethodField: true, // For iOS }, bcmc: { card_public_key : CARD_PUBLIC_KEY, showStorePaymentField: true, // For Android showsStorePaymentMethodField: true, // For iOS }}

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mkharibalaji/react-native-adyen-payment/issues/17#issuecomment-800308547, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABFNCTJ62E6RZXEPSWW3SHTTD5TSRANCNFSM4N2K2WKA .

m3co-code avatar Mar 18 '21 16:03 m3co-code