Missing component for specific payment methods

[riftshadow]

Describe the bug
Specific payment methods are not displayed as web components, for example directEbanking and paysafecard
https://docs.adyen.com/payment-methods/sofort/web-component#show-sofort-in-your-payment-form

The npm package behaves inconsistent comparing it with the "old way" by including the SDK via the <script> tag,
the old implementation works flawlessly.

To Reproduce
Steps to reproduce the behavior:
checkout.create('directEbanking', ...).mount('#selector')

Expected behavior
The adyen web package should just render the continue button, instead of throwing a Error.

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

Screenshots

Desktop (please complete the following information):

• Browser: Chrome canary (latest)

Smartphone (please complete the following information):
nope

[marcperez]

Hi @Stormtroop,

Thanks for reaching. I think the reason why you're seeing this error is you're not providing the /paymentMethods response to the client library. We use that response to find those redirect payment methods (among other things).
You can see how this should be provided in our web components integration guide.

The contents of the NPM package are the same to the ones from the files served from our servers, but if you prefer, you can still use our library through a <script> tag as explained in the Step 2 of our web components documentation.

Hope this helps! If you have any further questions on our integrations, please contact our support team.

[riftshadow]

Hey @marcperez ,

no, im passing the /paymentMethods response to the client library when creating the AdyenCheckout object.
The Problem is that the error is thrown only for the two payment methods when trying to mount them,
for paypal and cc it works, also the /paymentMethods response contains both payment methods (paysafecard & directEbanking).

/paymentMethods response

{
  "groups": [
    {
      "name": "Credit Card",
      "types": [
        "visa",
        "mc",
        "amex",
        "maestro",
        "cup",
        "diners",
        "discover"
      ]
    }
  ],
  "paymentMethods": [
    {
      "type": "paypal",
      "name": "PayPal",
      "supportsRecurring": true
    },
    {
      "type": "scheme",
      "name": "Credit Card",
      "supportsRecurring": false,
      "details": [
        {
          "key": "encryptedCardNumber",
          "type": "cardToken"
        },
        {
          "key": "encryptedSecurityCode",
          "type": "cardToken"
        },
        {
          "key": "encryptedExpiryMonth",
          "type": "cardToken"
        },
        {
          "key": "encryptedExpiryYear",
          "type": "cardToken"
        },
        {
          "key": "holderName",
          "type": "text"
        }
      ]
    },
    {
      "type": "directEbanking",
      "name": "Online bank transfer.",
      "supportsRecurring": true
    },
    {
      "type": "sepadirectdebit",
      "name": "SEPA Direct Debit",
      "supportsRecurring": true,
      "details": [
        {
          "key": "sepa.ownerName",
          "type": "text"
        },
        {
          "key": "sepa.ibanNumber",
          "type": "text"
        }
      ]
    },
    {
      "type": "paysafecard",
      "name": "Paysafecard",
      "supportsRecurring": true
    },
    {
      "type": "giropay",
      "name": "GiroPay",
      "supportsRecurring": true
    },
    {
      "type": "unionpay",
      "name": "UnionPay",
      "supportsRecurring": true
    }
  ]
}

example:

const checkout = new AdyenCheckout({
countryCode: 'DE',
paymentMethodResponse: response,
enviroment: 'test',
clientKey: '....',
amount: {
currency: 'EUR',
value: 1000
},
onSubmit: () => {},
paymentMethodsConfiguration: {}
});
checkout.create('directEbanking`).mount('#container'); <-- doesnt work for paysafecard and directEbanking

[marcperez]

Could you confirm the format of the response variable? It should be an object, can you make sure it's not a string?

You could also try this, to discard any other formatting issue on that response:

paymentMethodsResponse: {
    paymentMethods: [
        {
            type: 'directEbanking',
            name: 'Online bank transfer.',
            supportsRecurring: true
        }
    ]
},

[riftshadow]

Hey @marcperez,
it seems like i had a typo in the AdyenCheckout config object (paymentMethodResponse -> paymentMethodsResponse).
It works now, thanks for your support

[marcperez]

Happy it's solved @Stormtroop! Cheers!