GrabPay component mounting throws an exception

[geekyme]

Describe the bug

GrabPay component is not mounting

To Reproduce
Follow the directions here to create a grab pay component - https://docs.adyen.com/payment-methods/grabpay/web-component

checkout.create('grabpay_SG', {
  onSubmit: handleOnSubmit // Optional, only if you want to override the onSubmit defined in your AdyenCheckout instance
}).mount('#grabpay-container');

Exception:

Error: The passed payment method is not a valid Checkout Component

Expected behavior
No errors should result as expected from the docs.

Desktop (please complete the following information):

• OS: Mac
• Browser: Chrome
• Version: 87.0.4280.88

Additional context

adyen-web version:

"@adyen/adyen-web": "^3.20.0",

[marcperez]

Hi @geekyme,

Thanks for reaching. Could you double check the paymentMethodsResponse is correctly passed in the main instance (AdyenCheckout constructor)? Also, please check if grabpay_SG is present in the paymentMethods part of the /paymentMethods response.

This is the relevant part of the docs page:

2. Pass the full response from the /paymentMethods call as the paymentMethodsResponse object when creating an instance of the AdyenCheckout.

https://docs.adyen.com/payment-methods/grabpay/web-component#show-grabpay-in-your-payment-form

Hope it helps!

[geekyme]

This is the configuration I am passing to new AdyenCheckout(configuration)

{
clientKey: 'xxx'
environment: "test"
locale: "en_SG"
onAdditionalDetails: ƒ handleOnAdditionalDetails()
onChange: ƒ handleOnChange()
paymentMethodsResponse: {
  name: "GrabPay"
  supportsRecurring: true
  type: "grabpay_SG"
}
}

Am I missing something @marcperez ?

[marcperez]

Hi @geekyme,

The value of paymentMethodsResponse seems to be incorrect, the property expects the full response of /paymentMethods. Something like the following:

// ...
paymentMethodsResponse: {
  paymentMethods: [
    {
      name: "GrabPay",
      type: "grabpay_SG"
    }
  ]
}
// ...

[geekyme]

thanks it works now!