interface PaymentMethodData is not correct. paymentMethod does not exists on type PaymentMethodData

[JBlazej]

Describe the bug Hi, I upgraded to a new version 1.2.0, and found out that the interface PaymentMethodData is not correct.

When I call onSubmit should return data: PaymentMethodData ` export interface PaymentMethodData { paymentMethod: { type: string;

checkoutAttemptId?: string;

}; .... } `

but got instead

` export interface PaymentMethodData { paymentData: { type: string;

checkoutAttemptId?: string;

}; .... } `

Can you fix the interface definition to be the right shape with paymentData or did I do something wrong?

Tested on Android "react-native": "0.73.2", "@adyen/react-native": "1.2.0",

[descorp]

Hey @JBlazej

The source code is correct. Could you provide log and check what is inside this object ?

console.log(JSON.stringify(paymentData, null, ' '))

---

Make sure to redact all sensitive data

[JBlazej]

const onSubmit = async (
    payload: Omit<PaymentMethodData, 'paymentMethod'> & {paymentData: PaymentData},
    _?: AdyenActionComponent
  ) => {
    console.log(JSON.stringify(payload, null, ' '))
  }
// console.log result
{
 "paymentData": {
  "storePaymentMethod": false,
  "browserInfo": {
   "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148"
  },
  "paymentMethod": {
   "encryptedExpiryYear": "eyJhbGciOiJSU0EtT0FFUC0yNTYiLCJ2ZXJzaW9uIjoiMSIsImVuYyI6IkEyNTZDQkMtSFM1MTIifQ.FoqS_Mm8SPO9vQ5QYHzNSlHIh2i6onF0pFXJlzLG5NPkVpUPgVTC4qRrrvA2xfa4o8neehELctVqE-at7l4VhcyGUB_6TP748aObygPKC1wYk2a_-TCKrTdgC8_II9NNbqHwbBCoWmindHvkTkzOpljMcygozeck4wfoCRLGQgLP5C27Lk8efjnquMH_Rsy6h9SwYO4vNwyn_3KnjIVF94ua3VWZQraxeobKZxGOdTwGW240AWPhgKuX_hDJfSUdlm5_5IijU6nCIKMbFNiJaa55YC1eWgGyZ4l5XckLy2sVRtk2AnGHHqtTng69c0whbH1bBgslqM5IlAVN05cEFQ.YOzgPvXISMbdptk88NhaHw.xHaiWfErcNYtW-U7nStXHyEp1Sdnhwfgu8msEiAxh0SkzXkU6d7jmwaarWV0vB2sjYuL8bX8xizCeVM9LxGdvQ.Uf6qPUuhzR4yNE-RtbvQhfnw7h1NBk-aQjsktVwl6iM",
   "encryptedSecurityCode": "eyJhbGciOiJSU0EtT0FFUC0yNTYiLCJ2ZXJzaW9uIjoiMSIsImVuYyI6IkEyNTZDQkMtSFM1MTIifQ.Fb1e5GTXHANt0NnEEVm_y3ZVfwolfCj6sbCGxY10tmI449J2aPsOFwGuMybXM2HH3rch3u4gVqGaGSai7b0sFQbwi5Jeo1zWi5rajktVx5YSTpgTc8m8rykHit1LpUyIGYqJGb3Sh9fr_RKacl3Ep-7vYM6MQmGgDainkusJaohuq7zp2QcbjvwWS6vCZdU9GvLFb1R8w5AaM0xsDCE4FdJc7-Lef2ySNjcTPtNH2ELj98q-W6mWFwCZy3r_SmfwnaR_Uv2KEkf_XJs-x7QG3YqtrKdcT5pgH1RLcrbAzQSefamTgLH-3CrwmjsxnHkXaZnc5BTCVBqo0497qmK6Lw.Xk1ceBETvinDmOmREwpR_Q.XlZUNZ7Vh_KOs5BJ_PBj-vAVrRvdAL9YN1LdAp4lsQ5c8S4OthMIPc__CTV17QylEGP_DD6ybrZEXcgvEIvVwg.xCcIXo924BGKYToswu-iwFiz-dpzi0iGlwc2J1gA76c",
   "encryptedCardNumber": "eyJhbGciOiJSU0EtT0FFUC0yNTYiLCJ2ZXJzaW9uIjoiMSIsImVuYyI6IkEyNTZDQkMtSFM1MTIifQ.THVqvdYj86XUnZMKIQpGeBvxTksYBZgPDs8WhyEU-EGUCLYUxOG7CVtk_QKmAF7PF-ppiicenuHwvUgJmGA2VkVG87znF6YM4dkIJlgAEFGeO6-D9QijfTWDUJBD9hSwxAAUwvi2pM8SqngFkbzWCBC9LofjONhbAJ83JeStNeGxWPIiGnYLaFGl5DHv-XHcdIrmNV8DELHSnLCBQK2lxs7A_cDOpTBbjCkU69YXdQywzjiQPmn2RL7ubKK3AGPIU8nI__hjDiPlxQFDeHZYnhsgSl6v5omsCkf82HjPFPyRAMaqr3zdnALhOtpsgbaRqfYN_TUbvjXm9pWNeaCBeA.QqxmkJenIZkwEprNif9u5Q.ZwPKDpTns_lrQPakthrwTDmvT2Fm3qTDrMI_QaVYA1D8WdLYzLB1QicbBlJSoPg4IVHAWOM7dRjp_TpghE7lcDHP8Tkr63PmaTVWuKexxNs.IHTEdC8w3xgYiniRXXambbgjXMQVkQ6kmw2sj_IgxJw",
   "brand": "mc",
   "threeDS2SdkVersion": "2.3.3",
   "type": "scheme",
   "encryptedExpiryMonth": "eyJhbGciOiJSU0EtT0FFUC0yNTYiLCJ2ZXJzaW9uIjoiMSIsImVuYyI6IkEyNTZDQkMtSFM1MTIifQ.tGowKPGSYcSYmXJkHbm_7sMkzXQUdfrDYu0Ydn0hX_RAuKvO8JqkcPeQasoPpprGt1qJimm6thKLQhQ0vRrjOynNgKWC5iBFudSR3QPKB3JMsaU5pApaa0FRVw_ouxXTDLIOSDG45tABVnNfs2sQHmWSCOll55EZEtzd__q9240-kX7CgKGHiU60AH9f_lSCJx0lyQLVe-Jvz4-L3mNyWbTy3JQ9yJNL8WiAvQDT3qyFYDlRMzwFWVE1CXN_fOQzQODkcd2anBW1j4KvpIvEmRHI4azuHoaenhDpl6z0-FjKtUVS6P85hGoJUqF05VPASk1Vd8goS73mV75vqLr3Ww.7Hx8nMIk4r_Y20WjGnplHw.dLxd5uopnEZm7c5CMz_AGAixBr6R-sAUkWS-oHBAZihYjJmzBshn7irGD07umcU7iSnsBQqwmUVibD_XtcHi4Q.mz0aO21rWD_8cidpOV4v06z_glPxkUkU9MfsPac4x54"
  }
 },
 "extra": null
}

I am using AdyenDropIn.open(paymentMethods, newConfig) with combiniation NativeEventEmitter() and emitter.addListener(Event.onSubmit, event => onSubmit(event))

Payment method is nested in paymentData object

[gunnartorfis]

I am experiencing the same bug.

The first parameter passed to the onSubmit callback is of the following type:

{
  amount: {
    value: number;
    currency: string;
  },
  browserInfo: {...},
  paymentMethod: {
    brand: string;
    encryptedCardNumber: string;
    ....
  },
  returnUrl: string;
  storePaymentMethod: boolean
}

While the Typescript interface is:

interface PaymentMethodData {
    data?: any;
    supportedMethods: string;
}

Similar thing is happening for onAdditionalDetails. There I receive an object that followis this schema:

{
  details: {
    threeDSResult: string;
  }
}

Whereas the Typescript interface states that it should be of type PaymentMethodData (described above).

@adyen/react-native: 2.0.0-beta.1 Expo: SDK 50

[descorp]

Hey @JBlazej

I am using AdyenDropIn

that is the reason 😅

Raw payload from native event is a bit more complicated - it consist of paymentData and extra properties.

Here paymentData is PaymentMethodData and extra - any additional from "express-payments" like ApplePay and GooglePay.

---

Make sure to set redirectUrl from paymentData: https://github.com/Adyen/adyen-react-native/blob/develop/src/AdyenCheckoutContext.tsx#L127-L141.

[descorp]

Hey @gunnartorfis

Thanks for feedback! Indeed, now I see that reference to PaymentMethodData is missing on src/AdyenCheckoutContext.tsx.

Weird coincidence that VS Code can still resolve it from "Window APIs" 🤯

---

PR https://github.com/Adyen/adyen-react-native/pull/360

[gunnartorfis]

Hey @descorp Any idea when BETA 2 will be released?

To give context, we are essentially just about to release our Adyen integration. We don't feel very comfortable releasing it since it depends on a beta version of this package, and getting the fixes from beta 1 -> beta 2 out before releasing would at least be much better.

[descorp]

@gunnartorfis Plan is to release it today :)

[descorp]

Released 2.0.0 BETA 2

[gunnartorfis]

Hey @descorp this has indeed been fixed for onSubmit. However, the onAdditionalDetails is still incorrectly typed - the data I receive in the callback is defined here: https://github.com/Adyen/adyen-react-native/issues/352#issuecomment-1921316469 - and it does not include a paymentMethods object as the onSubmit does.

[gunnartorfis]

The same goes for the standalone action handling. The object I receive has a "details" key, but the type suggests a "data" key.

[descorp]

Thanks @gunnartorfis 💚

Indeed! We will look into that..

[descorp]

373 PR

[camil-adyen]

Hey @gunnartorfis, can you please confirm that we can close this issue?

[descorp]

I am closing this ticket. Please feel free to provide extra feedback.