adyen / adyen-web Goto Github PK

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",

Describe the bug
The Adyen Web Drop-in does not display an icon for the selected bank in the iDeal dropdown.

To Reproduce
Steps to reproduce the behavior:

1. Integrate the Adyen Web Drop-in.
2. Ensure you have iDeal as a possible method.
3. Select any bank.

Expected behavior
The selected bank icon is displayed to the right of the bank's title.

Screenshots
If applicable, add screenshots to help explain your problem

Desktop (please complete the following information):

• OS: Windows
• Browser: Internet Explorer
• Version 11

Is your feature request related to a problem? Please describe.
I am using the card component integration. I need to be able to show validation error for a field when a field is empty on blur.
The credit card fields currently get validated only on change.

Describe the solution you'd like
When a field loses focus, if the field is empty I want the field validated and the validation error message displayed.

Describe alternatives you've considered
Currently on blur I am checking if the field is invalid and if it is I am calling the showValidation() on the card component. For example if the field that has lost focus is the card number field, calling showValidation() marks the card number, expiry and CVV fields as invalid. I have also explored the state/component params on onBlur, onChange, onFocus to see if there is a way to validate a field on blur when it is empty.

Additional context

I have form with country selector and paypal smart button.
Change of the country will cause change of the currency and price.

I have written to the support and they said to umount and mount the component again to refresh the currency, so I did that.
Here is my code for it:

    onPlanChanged() {
      this.mountedPaypal.unmount();
      this.$nextTick(() => {
        this.mountPaypal();
      });
    },
    mountPaypal() {
      this.mountedPaypal = this.checkout
        .create("paypal", {
          environment: "test",
          countryCode: this.plan.country,
          amount: {
            currency: this.plan.currency,
            value: this.plan.price,
          },
          merchantId: "***",
          onSubmit: (data, component) => {
            data.handleAction = (action) => {
              component.handleAction(action);
            };
            this.$emit("submit", data);
          },
        })
        .mount(".pm-paypal-action");
    },

If currency is changed and button clicked, UI tries to open the paypal secure browser and then fails with error:
Expected currency from order api call to be EUR, got USD. Please ensure you are passing currency=USD to the sdk url.

Do I maybe need to wait for some amount of time between unmount and remount of the component or it is some other issue.

Note: when button is submitted we are sending the data to our api where latest plan with latest currency is used and they return us the action needed.

To Reproduce
Steps to reproduce the behavior:

1. Mount paypal component with some currency variable have "EUR" value
2. Change currency variable from "EUR" to "USD"
3. Unmount existing paypal component
4. Create and mount new paypal component with "USD" currency
5. Submit button and do api call to get the action
6. Provide action to mounted paypal component
7. You will get error Expected currency from order api call to be EUR, got USD. Please ensure you are passing currency=USD to the sdk url.

Expected behavior
Paypal component should open the secure browser with the USD currency plan

Screenshots

• OS: MacOS (Catalina)
• Browser: Chrome 83

Additional context
Version: checkoutshopper/sdk/3.11.0

Describe the bug
Hi, I'm trying to setup the web drop-in, adding card payment method to it.
My idea is to NOT show the supported card icons on the top-right corner of the dropin, and setup default installments with values 1 and 3. I found that, unless I specify the card types, both in the brands array and in the installments config, I'm unable to see the installments dropdown.
Even if I set up some supported cards in the brands array, and the default installments as described in the docs, the dropdown still doesn't show up.

To Reproduce
This works:
const adyenCheckout = new window.AdyenCheckout({ amount: 10000, locale: this.ctx.store.getters.locale, environment: this.PAYMENT_ENVIRONMENT, originKey, paymentMethodsResponse: parseToAdyenConfig({ paymentModes, storedCards: this.ctx.store.state.user.creditCards || [] }), showPayButton: false, paymentMethodsConfiguration: { card: { brands: ['visa'], hasHolderName: true, holderNameRequired: true, enableStoreDetails: isLogged, hideCVC: false, name: this.ctx.store.state.checkout.labels.cardData, installmentOptions: { visa: { values: [1, 3] } } } }, // Other stuff })

This doesn't (this is the setup that I need to achieve):
const adyenCheckout = new window.AdyenCheckout({ amount: 10000, locale: this.ctx.store.getters.locale, environment: this.PAYMENT_ENVIRONMENT, originKey, paymentMethodsResponse: parseToAdyenConfig({ paymentModes, storedCards: this.ctx.store.state.user.creditCards || [] }), showPayButton: false, paymentMethodsConfiguration: { card: { hasHolderName: true, holderNameRequired: true, enableStoreDetails: isLogged, hideCVC: false, name: this.ctx.store.state.checkout.labels.cardData, installmentOptions: { default: { values: [1, 3] } } } }, // Other stuff })

Expected behavior
The installment options appear even if any card is specified in the brands array.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Linux mint 19
• Browser chrome
• Version 81.0.4044.9

Additional context

Is your feature request related to a problem? Please describe.
Currently none of the callbacks are typed in CoreOptions.

Describe the solution you'd like

src/core/types.ts

    ...

    /**
     * OnLoad callback
     */
    onLoad?: (callbackObj: CbObjOnLoad) => void;

    /**
     * OnConfigSuccess callback
     */
    onConfigSuccess?: (callbackObj: CbObjOnConfigSuccess) => void;

    /**
     * OnFieldValid callback
     */
    onFieldValid?: (callbackObj: CbObjOnFieldValid) => void;

    /**
     * OnAllValid callback
     */
    onAllValid?: (callbackObj: CbObjOnAllValid) => void;

    /**
     * OnBrand callback
     */
    onBrand?: (callbackObj: CbObjOnBrand) => void;

    /**
     * OnError callback
     */
    onError?: (callbackObj: CbObjOnError) => void;

    /**
     * OnFocus callback
     */
    onFocus?: (callbackObj: CbObjOnFocus) => void;

    /**
     * OnBinValue callback
     */
    onBinValue?: (callbackObj: CbObjOnBinValue) => void;

    /**
     * OnAutoComplete callback
     */
    onAutoComplete?: (callbackObj: CbObjOnAutoComplete) => void;

    ...

To start off with a little more strict typing, I have updated the type field in CbObjOnConfigSuccess with keyof PaymentMethods.

src/components/internal/SecuredFields/lib/types.ts

import { PaymentMethods } from '../../../../types';

...
export interface CbObjOnConfigSuccess {
    iframesConfigured: boolean;
    type: keyof PaymentMethods;
}
...

Additional context
Tested changed above successfully locally.

Describe the bug
A promise is created and set in the handleSubmit() function, that promise is later referenced in handleAction()->updateWithAction(). This causes a typeError function can't be resolved if the payment button is overridden.

To Reproduce
Steps to reproduce the behavior:

1. Create a dropin with showPayButton: false
2. Directly call submit on dropin to enable payment
3. Error will occur since promise is not intialized

Expected behavior
Paypal should execute a payment.

Screenshots
react_devtools_backend.js:2430 TypeError: this.resolve is not a function
at t.updateWithAction (adyen.js:8951)
at t.handleAction (adyen.js:12602)

Desktop (please complete the following information):
N/A

Smartphone (please complete the following information):
N/A

Additional context
Initialize class variables in constructor to avoid wierd side effects.

Describe the bug
I'm trying to use the drop in solution to handle the paypal flow. This fails with an Error: Invalid Action.

To Reproduce
Steps to reproduce the behavior:

The paymentMethod is taken from the onSumit call within a checkout.create('dropin')

1. Payment request

curl https: //checkout-test.adyen.com/v65/payments \
-H "x-API-key: XXXX" \
-H "content-type: application/json" \
-d '{
    "additionalData": {
        "allow3DS2": true
    },
    "amount": {
        "currency": "EUR",
        "value": 12400
    },
    "billingAddress": {
        "city": "Berlin",
        "country": "DE",
        "houseNumberOrName": "63",
        "postalCode": "10117",
        "street": "Friedrichstrasse"
    },
    "channel": "Web",
    "countryCode": "DE",
    "deliveryAddress": {
        "city": "Berlin",
        "country": "DE",
        "houseNumberOrName": "63",
        "postalCode": "10117",
        "street": "Friedrichstrasse"
    },
    "lineItems": [
        {
            "amountIncludingTax": 11900,
            "description": "An Elephant",
            "id": "some-id",
            "quantity": 1,
            "taxCategory": "high"
        }
    ],
    "merchantAccount": "MyMerchantAccount",
    "origin": "http://localhost:3030",
    "paymentMethod": {
        "subtype": "sdk",
        "type": "paypal"
    },
    "reference": "my-order-id",
    "returnUrl": "http://localhost:3030/checkout/return?oid=my-order-id",
    "shopperEmail": "[email protected]",
    "shopperIP": "::1",
    "telephoneNumber": "0000"
}'

2. Returns CartOrderResponse

  {
    "resultCode": "Pending",
    "action": {        
        "paymentData": "Ab0...",
        "paymentMethodType": "paypal",
        "sdkData": {
            "token": "EC-3.."
        },
        "type": "sdk"
    },
    "details": [
        {
            "key": "token",
            "type": "text"
        }
    ],
    "outputDetails": {
        "token": "EC-3.."
    },
    "paymentData": "Ab0...",
}

3. Render within React

    const setupAdyenPayment = async (orderResponse: CartOrderResponse) => {
        try {
            // eslint-disable-next-line
            // @ts-ignore
            await import('@adyen/adyen-web/dist/adyen.css');

            const AdyenCheckout = await import('@adyen/adyen-web');
            const configuration = {
                locale: config.adyenLocale,
                environment: config.adyenEnv,
                clientKey: config.adyenClientKey,
                translations,
                onAdditionalDetails: async (state: any) => {
                    try {
                        await onSubmitChallenge(state.data);
                    } catch (err) {
                        console.log(err);
                    }
                }
            };
            if (containerRef.current) {
                const checkout = new AdyenCheckout.default(configuration);
                checkout.createFromAction(orderResponse.action).mount(containerRef.current);                
            }
        } catch (err) {
            console.log(err);
        }
    };

Expected behavior
Should not throw an error but handle paypal

Desktop (please complete the following information):

• OS: osx
• Browser ff
• Version: latest

It would make sense for Typescript projects also export typings such as CoreOptions.

Describe the bug
Dear development team, we have an unexpected issue with the library when we install it from the npm repository. The problem is that some imports aren't working as expected.

The only technical detail I can share with you is that the implementation is for an Angular 9 project.

To Reproduce

• Install the dependency with npm install @adyen/adyen-web
• Start the project with npm run start (or whatever command you have to start the project)

ERROR in node_modules/@adyen/adyen-web/dist/src/core/RiskModule/RiskModule.d.ts:2:47 - error TS2307: Cannot find module '~/components/BaseElement'.
2 import BaseElement, { BaseElementProps } from '~/components/BaseElement';
node_modules/@adyen/adyen-web/dist/src/components/UIElement.d.ts:3:46 - error TS2307: Cannot find module '~/types'.
3 import { PaymentAction, PaymentAmount } from '~/types';
node_modules/@adyen/adyen-web/dist/src/components/ApplePay/ApplePay.d.ts:3:59 - error TS2307: Cannot find module '~/components/ApplePay/types'.
3 import { ApplePayElementProps, ApplePayElementData } from '~/components/ApplePay/types';
node_modules/@adyen/adyen-web/dist/src/components/Giropay/Giropay.d.ts:2:29 - error TS2307: Cannot find module '~/components/Redirect'.
2 import RedirectElement from '~/components/Redirect';
node_modules/@adyen/adyen-web/dist/src/components/PayPal/types.d.ts:1:31 - error TS2307: Cannot find module '~/types'.
1 import { PaymentAmount } from '~/types';
node_modules/@adyen/adyen-web/dist/src/components/PayPal/types.d.ts:3:35 - error TS2307: Cannot find module '~/components/PayPal/config'.
3 import { SUPPORTED_LOCALES } from '~/components/PayPal/config';
node_modules/@adyen/adyen-web/dist/src/components/PayPal/Paypal.d.ts:3:31 - error TS2307: Cannot find module '~/types'.
3 import { PaymentAction } from '~/types';
node_modules/@adyen/adyen-web/dist/src/components/Dragonpay/types.d.ts:1:31 - error TS2307: Cannot find module '~/types'.
1 import { PaymentAmount } from '~/types';
node_modules/@adyen/adyen-web/dist/src/components/Dragonpay/types.d.ts:2:22 - error TS2307: Cannot find module '~/language/Language'.
2 import Language from '~/language/Language';
node_modules/@adyen/adyen-web/dist/src/components/Vipps/Vipps.d.ts:1:29 - error TS2307: Cannot find module '../Redirect'.
1 import RedirectElement from '../Redirect';
node_modules/@adyen/adyen-web/dist/src/components/Dropin/Dropin.d.ts:3:31 - error TS2307: Cannot find module '~/types'.
3 import { PaymentAction } from '~/types';
node_modules/@adyen/adyen-web/dist/src/components/index.d.ts:4:22 - error TS2307: Cannot find module './Donation'.
4 import Donation from './Donation';
node_modules/@adyen/adyen-web/dist/src/components/index.d.ts:9:24 - error TS2307: Cannot find module './QiwiWallet'.
9 import QiwiWallet from './QiwiWallet';
node_modules/@adyen/adyen-web/dist/src/components/index.d.ts:10:22 - error TS2307: Cannot find module './Redirect'.
10 import Redirect from './Redirect';
node_modules/@adyen/adyen-web/dist/src/components/index.d.ts:11:27 - error TS2307: Cannot find module './SecuredFields'.
11 import SecuredFields from './SecuredFields';
node_modules/@adyen/adyen-web/dist/src/components/index.d.ts:12:18 - error TS2307: Cannot find module './Sepa'.
12 import Sepa from './Sepa';
node_modules/@adyen/adyen-web/dist/src/components/index.d.ts:13:62 - error TS2307: Cannot find module './ThreeDS2'.
13 import { ThreeDS2DeviceFingerprint, ThreeDS2Challenge } from './ThreeDS2';
node_modules/@adyen/adyen-web/dist/src/components/index.d.ts:19:22 - error TS2307: Cannot find module './Giftcard'.
19 import Giftcard from './Giftcard';
node_modules/@adyen/adyen-web/dist/src/components/index.d.ts:22:17 - error TS2307: Cannot find module './Ach'.
22 import Ach from './Ach';

The tested versions from Adyen npm repository were (and all of them give the same error code):
3.10.1 | 3.10.0 | 3.9.5 | 3.9.4

Describe the bug
The dropin is not formatting the installments options correctly. It divides the price per 100. Example:

const adyenCheckout = new window.AdyenCheckout({
      locale: this.ctx.store.getters.locale,
      environment: this.PAYMENT_ENVIRONMENT,
      originKey,
      paymentMethodsResponse: parseToAdyenConfig({ paymentModes, storedCards: this.ctx.store.state.user.creditCards || [] }),
      showPayButton: false,
      paymentMethodsConfiguration: {
        card: {
          amount: { value: 330, currency: 'USD', // Doesn't matter if this is EUR, USD, or MXN, it fails every time...
          hasHolderName: true,
          holderNameRequired: true,
          enableStoreDetails: isLogged,
          hideCVC: false,
          name: this.ctx.store.state.checkout.labels.cardData,
          installmentOptions: installmentConfig?.paymentModes
        }
      }

To Reproduce

1. Set up the dropin like above
2. Doesn't matter which price or currency you introduce (I've tried with EUR, USD and MXN), the price always gets divided per 100.
3. See the installment options

Expected behavior
The price gets formatted correctly, not divided per 100.

Screenshots
Output:

Desktop (please complete the following information):

• OS: Linux Mint
• Browser chrome
• Version 81.0.4044.92

Additional context
Add any other context about the problem here.

Describe the bug
onError callback not called for cardholder name field when submit is called.

To Reproduce
Steps to reproduce the behavior:

1. mount component with the following configuration:
   card: { hasHolderName: true, holderNameRequired: true },
2. Fill in all fields apart from card holder
3. Trigger submission via component submit() method and log onError function.

Expected behavior
Field should be marked as invalid AND onError method should be called

Actual behavior
Field is shown as invalid but onError method is not called. (It is called for the other CC fields)

Desktop:

• OS: Windows 10
• Browser Chrome
• Version 87.0.4280.141

Describe the bug
Dear Adyen Team we have found an issue with the Credit Card where sometimes fall in an endless loading loop because cannot load the iframes.

To Reproduce
We do not have a specific "follow to reproduce" but we have a stack trace of the error:

edp-checkout-page-module-es2015.bc67bb5be7048eccdc49.js:1 GET https://checkoutshopper-live.adyen.com/checkoutshopper/securedfields/{CLIENTKEY}/3.2.6/securedFields.html?type=card&d=aHR0cHM6Ly93d3cuYWxsaWFuemRpcmVjdC5kZQ== net::ERR_CACHE_WRITE_FAILURE 200 (OK)
stacktrace noise....
edp-checkout-page-module-es2015.bc67bb5be7048eccdc49.js:1 GET https://checkoutshopper-live.adyen.com/checkoutshopper/securedfields/{CLIENTKEY}/3.2.6/securedFields.html?type=card&d=aHR0cHM6Ly93d3cuYWxsaWFuemRpcmVjdC5kZQ== net::ERR_CACHE_WRITE_FAILURE 200 (OK)
stacktrace noise....
securedFields.html?type=card&d=aHR0cHM6Ly93d3cuYWxsaWFuemRpcmVjdC5kZQ==:149 The devicemotion events are blocked by feature policy. See https://github.com/WICG/feature-policy/blob/master/features.md#sensor-features

Additional context
We know that it is happening most of the times in Google Chrome but we could not find any way to solve it or to reproduce it based on a pattern. The people that fall in the endless loading loop they refresh the browser and they are able to use the credit card normally.

The library version is 3.17

Thank you very much.

Describe the bug
There is an accessibility issue with the Adyen Drop-in component: when navigating with the keyboard (using the Tab key) it is not possible to navigate out of the Drop-in without also selecting a different payment method.

To Reproduce
This can easily be reproduced in the example provided with the Drop-in documentation (https://docs.adyen.com/checkout/prebuilt-ui#drop-in):

1. Make sure the "Credit Card" payment method is selected.
2. Place focus on one of the visible input fields.
3. Use the Tab key to navigate through the input fields, until reaching the final field (the "Pay" button).
4. Press the Tab key again. Now the next payment method is activated.

Expected behavior
What should happen after step 3 (from an accessibility perspective), is for the next focusable element after all payment methods to be focused.

The current behavior makes it practically impossible to use the form with a keyboard, especially if a custom submit button outside of the Drop-in is used (which is officially supported behavior, with the showPayButton option).

Suggested fix: remove the tabindex attribute from the payment method <li> elements. This would make the Tab behavior work properly. Then, to allow keyboard users to switch between payment methods, standard radio button behavior should be applied to the (currently faked) radio buttons.

Screenshots Screencasts
I recorded a short screencast showing the reproduction steps:
https://www.youtube.com/watch?v=u6Yi-xL4vMU

Desktop (please complete the following information):

• OS: Ubuntu & Windows
• Browser: Google Chrome
• Version: 88

Smartphone (please complete the following information):
N/A

Additional context
Add any other context about the problem here.

Describe the bug
Dear development team, using the version 3.11.0 of the adyen-web component from npm I see that the package @adyen/adyen-web it's not exporting all the resources needed to instance the Checkout component.

To Reproduce
Steps to reproduce the behavior:

1. Install the @adyen/[email protected] in a Angular9 project
2. Import the library inside a component with the next notation
   import AdyenCheckout from '@adyen/adyen-web';
3. Create an instance of the AdyenCheckout with the next notation
   const checkout = new AdyenCheckout(this.config);

You will notice that the object "this.config" cannot be of type import { CoreOptions } from '@adyen/adyen-web which is the expected export for an important interface like that.

Instead of importing the interface from the core package right now the developer should import it from
import { CoreOptions } from '@adyen/adyen-web/dist/src/core/types'.

Expected behavior
Be able to import the package from the main package.

Describe the bug
The return URL to go to the confirmation page contains a queryparam MD. In some cases, this queryparam is extremely large which causes a 431 HTTP error on our page since it exceeds the maximum sice.

To Reproduce
Make a payment with LaCaixa and 3dSecure

Expected behavior
A valid HTTP URL

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser Chrome
• Version latest

Describe the bug
After submitting the payment data using the paypal smart button the pop up window stays in loading and it is not closed.
The action passed from backend is:
{ type: 'redirect', paymentData: '', method: 'GET', url: 'https://test.adyen.com/hpp/checkout.shtml' }
The only way that i had to handle the action from backend is using createFromAction method from adyen components.
I set the status of dropin to ready after action is received but nothing happens.

Expected behavior
Close the pop up window after createFromAction and redirection to paypal

Smartphone (please complete the following information):

• Device: iPhone 6s
• OS: iOS 14.2
• Browser Safari

Additional context
As backend i use magento with magento-adyen 6.6.5 plugin and as front end the PWA using Vuestorefront and adyen-web 3.18.2

Is your feature request related to a problem? Please describe.
Would like to have access to a prop containing an array or object with all form errors. Currently the callback receives only one field error which makes it difficult to control the form errors within a react state since the callbacks triggering a re-render. Receiving form.state.errors within onError or onChange will give us more flexibility on how we want to handle our input errors.

Describe the solution you'd like
Receiving form state errors (form.state.errors) when using onError or `onChange to keep tracking all form errors our own.

....
onError: ({ errors }) => {
 // iterate and update error(s)
}
...

Describe alternatives you've considered
Tried using react hook useState to store and keep tracking form field errors. This won't work since we're having a re-render when onError or onChange callbacks are called.

....
onError: ({ fieldType, i18n }) => {
 setErrors({
   ...errors,
   [fieldType]: i18n,
 });
}
...

Additional context
When the form is valid, we've access to the form state which contains state.errors, but we're only able to access it when the form is valid.

The project I'm working on is using custom giftcards configuration along with other payment methods.

At the moment DropIn component supports only predefined set of types.

But my giftcard payment method has a custom type (like "mygiftcard").
So I have to render Giftcard component next to DropIn in this case.
That causes some UX issues and complexities in the implementation.

Also It worth to mention that I have a CustomGiftcard component with extra functionality, like checking balance.

I'd like to be able develop a custom payment component (maybe extended from UIElement?) and to register it DropIn component.

Is your feature request related to a problem? Please describe.
The bundle size of the SDK is huge. There seems to be lots of i18n in the bundle that I will never use. As well as functionality for unused payment methods.

Describe the solution you'd like
It would be great if it was possible to include only the languages and paymentmethods that you need in the bundle to reduce the size.

Describe alternatives you've considered
Same as above

Additional context

Is your feature request related to a problem? Please describe.
I need to intercept button click to like i can do with Google Pay.

Describe the solution you'd like
Exactly the same as Google Pay button.

Describe alternatives you've considered
Rendering button myself and adding logic myself.

Describe the bug
Trying to compile a Typescript project referencing this module results in the following error.

node_modules/@types/applepayjs/index.d.ts:9:39 - error TS2689: Cannot extend an interface 'EventTarget'. Did you mean 'implements'?

9 declare class ApplePaySession extends EventTarget {
                                        ~~~~~~~~~~~

node_modules/@types/applepayjs/index.d.ts:780:25 - error TS2304: Cannot find name 'Node'.

780         composedPath(): Node[];
                            ~~~~

To Reproduce
Steps to reproduce the behavior:

1. import this module anywhere in a codebase that compiles with TypeScript.
2. Compile
3. See error

Expected behavior
I expect the types to be OK, so that the project referencing this module can compile.

Screenshots

Desktop (please complete the following information):

• OS: macOS Catalina
• Runtime: NodeJS v12.18.0
• Version: 3.13.1

Additional context
TypeScript 4.0.2

Describe the bug
I'm getting a typescript error from the latest version of the library (3.11.1). When running tsc I get the following error

$ tsc --noEmit
node_modules/@adyen/adyen-web/dist/src/components/helpers/IssuerListContainer.d.ts:25:53 - error TS2559: Type 'IssuerListProps' has no properties in common with type 'UIElementProps'.

25 declare class IssuerListContainer extends UIElement<IssuerListProps> {
                                                       ~~~~~~~~~~~~~~~

To Reproduce
Steps to reproduce the behavior:

1. Install the package
2. Compile your code with the typescript compiler (tsc)

Additional context
The typescript build was fixed in 3.11.0 but this issue seems to have been introduced in 3.11.1

Is your feature request related to a problem? Please describe.

We want the user to be redirected to PayPal automatically to fit our user flow.

Example user flow:

• Click a native button in our app
• Load a webview and instantly see the PayPal form

A possible solution would be to hide the entire container and automatically click on the PayPal button when it is ready. This isn't currently possible due to the button being inside an iframe.

Describe the solution you'd like

Provide a callback onReady (similar to onSubmit) as well as a function on the component to trigger the button.

e.g.

onReady: (state, component) => {
  component.click();
}

Describe alternatives you've considered

I've considered triggering the button via javascript. As state above, this isn't possible because of the iframe.

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

Describe the bug
We used version 3.6.3 and in configuration showPayButton : false, because we use our own button.
When we try to update to a version above 3.6.3 it shows always at the paypal payment the "PayPal" button and payment with our own button, results in js exception.

To Reproduce
Steps to reproduce the behavior:
Use Version webdrop above 3.6.3
set const configuration = {{
showPayButton:false,

Expected behavior
Hide the paypal button and process payment like in version 3.6.3

Desktop (please complete the following information):

• OS: Windows 10
• Browser chrome

To Reproduce
Steps to reproduce the behavior:

1. Load the web drop in with PayPal
2. Click the PayPal button
3. Wait for the window to open
4. Close the window
5. BOOM. No event onCancel is send.

Expected behavior
As it's explained in the documentation to be triggered the onCancel https://docs.adyen.com/payment-methods/paypal/web-drop-in

Desktop (please complete the following information):

• OS: Windows, Ubuntu
• Browser Chrome, Firefox, Brave, Edge

When configuring AdyenCheckout options, the locale key is typed from the locales Adyen supports translations for. Since we should be able to add any locale we want, which might required to integrate our own translations, it should be possible to use our own locales beside the supported ones. As an example, using a locale such as uk-UA is not possible at this moment.

https://github.com/Adyen/adyen-web/tree/master/packages/lib/src/language/locales

Describe the bug
It is no longer possible with the newest api to display stored card informations correctly.

The issue is the following one, the call to https://docs.adyen.com/api-explorer/#/PaymentSetupAndVerificationService/v53/post/paymentMethods returns the following result (reducted to relevant part):

{
  ....
  "storedPaymentMethods": [
    {
      ....
      "id": "8315980248.....",
      ....
      "type": "scheme"
    }
  ]
}

The adyen web components are expecting the following format to work tho:

{
  ....
  "storedPaymentMethods": [
    {
      ....
      "storedPaymentMethodId": "8315980248.....",
      ....
      "type": "scheme"
    }
  ]
}

So by using the newest api with the adyen components it is no longer possible without replacing the raw id with the storedPaymentMethodId to get the stored payment method properly displayed. Passing the information in the raw format is actually defined in the documentation here: https://docs.adyen.com/payment-methods/cards/web-component#show-a-stored-card-in-your-payment-form

To Reproduce
Steps to reproduce the behavior:

1. Inititialize a checkout via the following code and use the exact response you get for the request from with a shopperId https://docs.adyen.com/api-explorer/#/PaymentSetupAndVerificationService/v53/post/paymentMethods

if (paymentMethodsResponse != null && paymentMethodsResponse.storedPaymentMethods.length > 0) {
        const storedPaymentMethod = paymentMethodsResponse.storedPaymentMethods[0];
        const oneClick = checkout.create('card', storedPaymentMethod).mount('#component-container-one-click');
}

2. The user has to enter the credit card data again

Expected behavior

1. Initialize request as mentioned above
2. User only has to enter the cvc from the stored payment method again

Screenshots
If applicable, add screenshots to help explain your problem.

Expected result:

Actual result:

Desktop (please complete the following information):

• OS: Windows
• Browser Chrome

Hope i have written down the issue clear enough. :)

best regards,
David

The paypal component doesn't seem to allow shipping address/option configuration at this moment. Shipping address editing is disabled and there is no way to pass the required callback onShippingChange() as documented here:
https://developer.paypal.com/docs/checkout/integration-features/shipping-callback/#:~:text=The%20Shipping%20Change%20callback%20is,address%20they%20chose%20on%20PayPal.

is this something that can be added/customized someway? Any plan to add this like in other components for supporting express checkout using paypal address book?

Describe the bug
I am unable to use the test card numbers from your documentation in the Bancontact (bcmc) checkout form starting at version 3.11.0. The number is working fine on version 3.10.1 and below.

To Reproduce
Steps to reproduce the behavior:

1. Add version 3.11.0 or higher
2. Create the bcmc checkout form
3. Fill in a Bancontact test card number
4. Test card numbers are invalid

Expected behavior
The test card numbers are working and I will be able to pay with them.

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser: Firefox Developer Edition
• Version: 80.0b7 (64-bit)

Additional context
When I check the binLookup request, the detected brand is mc instead of bcmc.

Hi,

Your docs state:
In addition, you can also configure a window size in case the issuer decides to initiate a challenge authentication flow.

But if we look at the code, we see that size '05' is hardcoded for threeDS2Challenge component and cannot be overwritten:

Is this a bug in the code or a bug in the documentation?

Thanks!

Is your feature request related to a problem? Please describe.
When importing this package into a React component which is being rendered on the server, the code is getting executed on the server side resulting in a crash with messages like ReferenceError: window is not defined.

Describe the solution you'd like
As I don't always have control over the component being rendered on the server or client side it would be nice for the code to not crash if this code is being executed on the server side.

Describe alternatives you've considered
As mentioned above I don't have control over the general architecture and config of the project thus I can't control whether this packge should only be imported on the client side or vice versa. There is this hacky way that I tried:

let AdyenCheckout

try {
  // eslint-disable-next-line global-require
  AdyenCheckout = require('@adyen/adyen-web')
} catch (_) {
  AdyenCheckout = class {}
}

This works but it isn't the way we should do it when using a React component, right? 😉

Additional context
I've tried myself to fix this by adding a globalThis polyfill and replacing all occurences of window with globalThis but it was to no avail. Build was good, tests too and the sample pages seemed to work fine but when I copied the built files over to my project, the dev server crashed imemdiately upon startup. Maybe I just missed something and additionally I'm not a TypeScript pro ... 🤔

Describe the bug
Dear Adyen Team, we spotted that it's possible to use a invalid date for the date field and it returns that it's valid.

Additional context
The library version is 3.17

Is your feature request related to a problem? Please describe.
Even though the browsers natively offer this feature, this is not consistent across browsers/devices. So on the mobile web when users are prompted with the card form they are very reluctant to type in the card details. And this results in user drop-offs at the checkout forms.

Describe the solution you'd like
Is it possible to add this capability as a feature and make it visible on the form as a card icon? This way we can ensure that the behavior is consistent across devices.

I did come across a few OCR js libraries which can help us build this capability. So wanted to understand if this is a possibility or is this something that is in the works already by the team?

Describe the bug
Node.js server doesn't work without adding basic auth credentials.

To Reproduce
Steps to reproduce the behavior:

1. configure api key, setup origin in ws account
2. run npm devserver
3. access card component
4. See error

> node ./server/node/index.js

Listening on localhost:3000
Request to /originKeys ended with status 401 - 401
Request to /payments ended with status 401 - 401

Expected behavior
Expect to have the example running with setting the described params in .env file

Additional context
I managed to get the example running by adding the basic auth "Authorization: Basic ...." header in
server/node/utils/getPostParameters.js

Describe the bug
When using v3.13.0 web drop-in, the paypal button gets an error on click.
It says, that the currency is not set like expected, see attached screenshot.

To Reproduce
Steps to reproduce the behavior:

1. Include JS SDk v3.13.0 and include the Drop-In.
2. Click on the PayPal Button

Expected behavior
The user should be redirected to paypal with a valid transaction initialization.

Screenshots

Desktop (please complete the following information):

• OS: OSX
• Browser Chrome
• Version 84

Additional context
The last working version for me is v3.6.3.

Describe the bug
When trying to test BLIK payment I can't process it to the final stage.

To Reproduce
Steps to reproduce the behavior:

1. Start adyen-web project, go to Components->BLIK with a predefined amount of 144.00 (http://localhost:3020/components?amount=14400)
2. Type test BLIK code: 777777
3. Click on "Pay" button
4. See "Waiting for confirmation" message with spinner. It never shows any success or failure message

Expected behavior
Expected to see "user declined" refusal reason as described here:
https://docs.adyen.com/payment-methods/blik/web-drop-in

Screenshots

Desktop (please complete the following information):

• OS: Windows 10 Pro
• Browser Chrome
• Version 85

Additional context
Tried on 3.15.1 in the real site and 3.17.0 adyen-web from the repository (master branch).
Moreover there were no BLIK payments in Customer Area > Transactions > Payments.

Using adyen-web in capacitor on IOS results in sending the request to "https://checkoutshopper-test.adyen.com/checkoutshopper/" with the "origin" header set as "capacitor://appname.com".

This results in "Invalid client key or unknown origin". Probably because of adyen not accepting "capacitor://" as a valid scheme for the origin. (it accepts "capacitor://appname.com" in the "allowed origin" on your account page of adyen, but it's not working).

We could use a plugin for capacitor for native HTTP requests, but then we need to be able to overwrite the "default" fetch method used in several locations.

• Is this a use case adyen-web wants to support?
• Is it maybe a bug in adyen for not accepting "capacitor://appname.com" as "allowed origin"?

@marcperez?

Describe the bug
When using the test cards found in your documentation many cards don't work, take the first one for instance 3700 0000 0000 002.
https://docs.adyen.com/development-resources/test-cards/test-card-numbers

To Reproduce
You can test this yourself using the checkout component and filling in: 3700 0000 0000 002

Expected behavior
It should be valid since it's in your documentation

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: macOS Catalina
• Browser: Chrome
• Version: 80.0.3987.122 64 bit

Is your feature request related to a problem? Please describe.
This lib only works if transpiled and bundled

Describe the solution you'd like
I would like to be able to write a simple js example and for this to work in plain JS or plain es6

Describe alternatives you've considered
The only way I see to make this work is with a transpiler and bundler

Describe the bug
Paypal webview crashes when using dynamic zero auth ($0 authorization)

Following the documentation here:
https://docs.adyen.com/payment-methods/paypal/web-component

To Reproduce
Steps to reproduce the behavior:

1. Setup the Paypal web component with intent: "authorize"
2. Setup the payments API call with a $0 amount and PreAuth authorization type
3. Click on the Paypal button
4. See Paypal webview loading then crashing with the following error showing up in the console:

Expected intent from order api call to be authorize, got capture. Please ensure you are passing intent=capture to the sdk url.

Expected behavior

• The Paypal login window should be displayed for a $1 authorization.
• The $1 authorization should be automatically canceled (dynamic zero auth expected behavior)

Tried in Chrome (85) and other browsers. Not a browser or platform issue.

I also tried to change the intent to capture and remove the pre-auth authorization, no dice.

Appreciate your help!

I'm having a lot of trouble getting Klarna to work (same with Drop in) with the Magento 2 module.

hppCheckout.create('klarna_account', {
    countryCode: 'en_GB',
    visibility: {
        personalDetails: 'editable',
    },
    onSubmit(state) {
        handleOnSubmit(state);
    },
    onChange(state) {
        console.log(state);
    },
}).mount(HPPPayEl);

So when you click the button, I'm seeing logs from the onSubmit, but nothing happens.

One difference between my code and the Magento JS is the details element:

details: self.filterOutOpenInvoiceComponentDetails(value.details),

However, I don't seem to get any details to pass from the Payment Methods endpoint. On the Magento 2 documentation it does not suggest this is required: https://docs.adyen.com/plugins/magento-2/magento-pwa-storefront#collect-shopper-details

I'm completely at a loss as to how to get this to work correctly. If I need to add the submit behaviour myself, what am I submitting to and what data? This information seems absent from the documentation, and I'm also finding it difficult to cross reference the Adyen Web documentation with the documentation for the Magento module.

Describe the bug
We're trying to test different credit card numbers. In the page below, there are some cards listen. We tried to use the one marked in the screenshot:

https://docs.adyen.com/development-resources/test-cards/test-card-numbers#test-3d-secure-2-authentication

But there's one issue: CVC is always mandatory in the dropin, and I could not find any option to make the dropin recognise when the CVC is mandatory or not, or at least make it not mandatory at all. The only option I found is hideCVC, but that's not what we intend to do.

To Reproduce
Steps to reproduce the behavior:

1. Set up the dropin as you would normally do.
2. Fill the fields with the previously mentioned test credit card.
3. Try to submit the dropin.
4. Verify that the CVC field is marked as incorrect

Expected behavior
The dropin should recognise when the CVC is required or not, or at least allow to instantiate the dropin with the CVC not mandatory at front-end level.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• iOS
• chrome
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Describe the bug
After updating the latest version of Adyen (3.8.1), we found an issue that the Paypal button not showing correctly every time. We experienced it most of the time when we changed from Credit card to Paypal. We can also see the issue in your demo shop. Here is a video for better insights.

To Reproduce
Steps to reproduce the behavior:

1. In the drop-in component, choose PayPal as the payment method
2. Change to Credit Card
3. Change back to PayPal

The issue is not always visible, but we experienced it a few times.

Screenshots

Desktop:

• OS: Windows 10
• Browser: Chrome
• Version 83.0.4103.106

When using the adyen-web npm package, i get an error when compiling in typescript with the following information:

ERROR in ~/project/node_modules/@adyen/adyen-web/dist/src/components/PayPal/Paypal.d.ts
ERROR in ~/project/node_modules/@adyen/adyen-web/dist/src/components/PayPal/Paypal.d.ts(6,47):
TS2344: Type 'PayPalElementProps' does not satisfy the constraint 'UIElementProps'.

ERROR in ~/project/node_modules/@adyen/adyen-web/dist/src/components/PayPal/types.d.ts
ERROR in ~/project/node_modules/@adyen/adyen-web/dist/src/components/PayPal/types.d.ts(90,18):
TS2430: Interface 'PayPalElementProps' incorrectly extends interface 'UIElementProps'.
  Types of property 'onError' are incompatible.
    Type '((state: any, element: UIElement<any>) => void) | undefined' is not assignable to type '((error: any, element?: UIElement<any> | undefined) => void) | undefined'.
      Type '(state: any, element: UIElement<any>) => void' is not assignable to type '(error: any, element?: UIElement<any> | undefined) => void'.
        Types of parameters 'element' and 'element' are incompatible.
          Type 'UIElement<any> | undefined' is not assignable to type 'UIElement<any>'.
            Type 'undefined' is not assignable to type 'UIElement<any>'.

Describe the solution you'd like
When using a drop-in with a custom payment button I would like to be able to receive an event indicating that the payment information that has been filled in is valid, when this event is received I would then be able to enable my payment button

Describe alternatives you've considered
Don't use a drop-in.

Is your feature request related to a problem? Please describe.
I find difficult to configure (too much magic behind the scenes) and not quite custom the way the installment options are configured, because they use the drop-in format, which in some cases does not result in the expected output.

Describe the solution you'd like
Allow custom text in the installments dropdowns, instead of the current format that is done behind the scenes.

Describe alternatives you've considered

Allow the developer to, instead of proving a simple array of numbers, each for every installment, allow to provide custom item labels, like:
installmentOptions: { card: { values: [ { value: 1, label: 'Pay 10000€ at once' }, { value: 2, label: 'Pay 5000€ in two times' } ] } }

Maybe something like:

const installmentItemsMapper = value => ({
  id: value,
  name: typeof value === 'object' && value.label ? value.label : amount.value ? `${value}x ${getPartialAmount(value)}` : value
})

Additional context
Add any other context or screenshots about the feature request here.

Describe the bug
If to add setState call inside of onChange, onSubmit or onAdditionalDetails, adyen will fail with error 'Cannot read property 'state' of null' http://prntscr.com/vpscsz

To Reproduce
Steps to reproduce the behavior:

1. Create clear react project
   npx create-react-app test-adyen
2. Add "@adyen/adyen-web": "^3.18.2", in package.json dependencies
   npm i
3. Define component state
   const [dropinState, setDropinState] = useState(null);
4. In App.js create dropin component with minimum config that contain
   onChange: (state) => setDropinState(state)
   Example code for App.js:

import React, { createRef, useEffect, useState } from 'react';
import './App.css';
import AdyenCheckout from '@adyen/adyen-web';

function App() {
  const dropinContainer = createRef();
  const [dropinState, setDropinState] = useState(null);

  const onChange = (state) => setDropinState(state);
  const config = {
    environment: "test",
    originKey: 'pub.your_pub_key_here',
    paymentMethodsResponse: {
      paymentMethods: [
        {
          brands: ["mc","visa"],
          details: [
            { key: 'encryptedCardNumber', type: 'cardToken' },
            { key: 'encryptedSecurityCode', type: 'cardToken' },
            { key: 'encryptedExpiryMonth', type: 'cardToken' },
            { key: 'encryptedExpiryYear', type: 'cardToken' },
            { key: 'holderName', optional :true, type: 'text' }
            ],
          name: "Credit Card",
          type:"scheme",
        }
      ]
    },
    onChange,
  };
  useEffect(() => {
    if (dropinContainer) {
      const adyenCheckout = new AdyenCheckout(config);
      adyenCheckout.create('dropin').mount(dropinContainer.current);
    }
  }, [dropinContainer, config]);

  return (
    <div className="App">
      <div ref={dropinContainer} className='dropin-component' data-test-id='dropin-container' />
    </div>
  );
}

export default App;

5. Run project, change any field (i.e. card number)

Expected behavior
Dropin component works without errors

Screenshots

Desktop (please complete the following information):

• OS: Windows 10 64bit
• Browser: Chrome
• Version: 87.0.4280.66

Additional context
error in formatted adyen.js is in line 8523: http://prntscr.com/vpsvq8

The adyen-web project can't handle null values within the Payment-Methods response.

I tried to follow the basic web-drop-in integration described here: https://docs.adyen.com/checkout/drop-in-web?tab=codeBlockcd1zg_3
I started a spring boot Web-API project for the backend and an angular project for the frontend.

It is not possible to call checkout.create('dropin').mount('#dropinContainer'); within the frontend with the payment-methods object loaded from the java backend. It leads to the following error:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'filter' of null
TypeError: Cannot read property 'filter' of null

To Reproduce
Steps to reproduce the behavior:

1. Create Java Backend to serve Payment-Methods from Adyen for a Test-Account to a frontend (adyen Library com.adyen.adyen-java-api-library version 8.2.0)
2. Load Payment-Methods from the Frontend (serialized PaymentMethodsResponse object, adyen Library "@adyen/adyen-web": "^3.14.1")
3. Mount Web-Drop-In with the received Payment-Methods Json Object
4. See error

Expected behavior
The JavaScript library should not crash for JSON Objects from a Backend which uses the adyen Library as well.

Desktop (please complete the following information):

• OS: Windows / Docker for Windows
• Chrome
• Version 85.0.4183.102 (Offizieller Build) (64-Bit)

Payment-Methods Object from Java Backend (serialized PaymentMethodsResponse Object)

{
    "oneClickPaymentMethods": null,
    "paymentMethods": [
        {
            "brands": [
                "visa",
                "mc",
                "amex"
            ],
            "configuration": null,
            "details": [
                {
                    "configuration": null,
                    "details": null,
                    "itemSearchUrl": null,
                    "items": null,
                    "key": "encryptedCardNumber",
                    "optional": null,
                    "type": "cardToken",
                    "value": null
                },
                {
                    "configuration": null,
                    "details": null,
                    "itemSearchUrl": null,
                    "items": null,
                    "key": "encryptedSecurityCode",
                    "optional": null,
                    "type": "cardToken",
                    "value": null
                },
                {
                    "configuration": null,
                    "details": null,
                    "itemSearchUrl": null,
                    "items": null,
                    "key": "encryptedExpiryMonth",
                    "optional": null,
                    "type": "cardToken",
                    "value": null
                },
                {
                    "configuration": null,
                    "details": null,
                    "itemSearchUrl": null,
                    "items": null,
                    "key": "encryptedExpiryYear",
                    "optional": null,
                    "type": "cardToken",
                    "value": null
                },
                {
                    "configuration": null,
                    "details": null,
                    "itemSearchUrl": null,
                    "items": null,
                    "key": "holderName",
                    "optional": true,
                    "type": "text",
                    "value": null
                }
            ],
            "group": null,
            "name": "Kreditkarte",
            "paymentMethodData": null,
            "supportsRecurring": null,
            "type": "scheme"
        },
        {
            "brands": null,
            "configuration": null,
            "details": null,
            "group": null,
            "name": "Sofort.",
            "paymentMethodData": null,
            "supportsRecurring": true,
            "type": "directEbanking"
        },
        {
            "brands": null,
            "configuration": null,
            "details": null,
            "group": null,
            "name": "Rechnung mit Klarna.",
            "paymentMethodData": null,
            "supportsRecurring": true,
            "type": "klarna"
        },
        {
            "brands": null,
            "configuration": null,
            "details": null,
            "group": null,
            "name": "Paysafecard",
            "paymentMethodData": null,
            "supportsRecurring": true,
            "type": "paysafecard"
        },
        {
            "brands": null,
            "configuration": null,
            "details": [
                {
                    "configuration": null,
                    "details": null,
                    "itemSearchUrl": null,
                    "items": null,
                    "key": "bic",
                    "optional": true,
                    "type": "text",
                    "value": null
                }
            ],
            "group": null,
            "name": "GiroPay",
            "paymentMethodData": null,
            "supportsRecurring": true,
            "type": "giropay"
        },
        {
            "brands": null,
            "configuration": null,
            "details": null,
            "group": null,
            "name": "Ratenkauf mit Klarna.",
            "paymentMethodData": null,
            "supportsRecurring": true,
            "type": "klarna_account"
        },
        {
            "brands": null,
            "configuration": null,
            "details": null,
            "group": null,
            "name": "Sofort bezahlen mit Klarna.",
            "paymentMethodData": null,
            "supportsRecurring": true,
            "type": "klarna_paynow"
        },
        {
            "brands": null,
            "configuration": null,
            "details": [
                {
                    "configuration": null,
                    "details": null,
                    "itemSearchUrl": null,
                    "items": null,
                    "key": "paywithgoogle.token",
                    "optional": null,
                    "type": "payWithGoogleToken",
                    "value": null
                }
            ],
            "group": null,
            "name": "Google Pay",
            "paymentMethodData": null,
            "supportsRecurring": true,
            "type": "paywithgoogle"
        }
    ],
    "storedPaymentMethods": null,
    "groups": [
        {
            "groupType": null,
            "name": "Credit Card",
            "types": [
                "visa",
                "mc",
                "amex"
            ]
        }
    ]
}