Type onAdditionalDetails argument in CoreOptions

[dimitriBouteille]

The argument state is any actuality for CoreOptions.onAdditionalDetails :

adyen-web/packages/lib/src/core/types.ts

Line 136 in 78bfdd5

onAdditionalDetails?(state: any, element?: UIElement): void;

Maybe add type for this argument, something like that :

export interface OnAdditionalDetailsData {
  data: {
    details: {
      [key: string]: unknown;
    };
  };
}

[ribeiroguilherme]

Hey @dimitriBouteille .

We are fixing all typescript interfaces/types for the new major version that will come in the upcoming weeks. This includes fixing the type of this callback as well. I will keep this ticket open until we release the new major version containing its fix.

Cheers.

[ashrafnazar]

@ribeiroguilherme - Could you also please provide examples of how to use this?

Not sure if the example in the docs is correct:

function handleOnAdditionalDetails(state, component) {
   state.data // Provides the data that you must pass in the `/payments/details` call.
   component // Provides the active component instance that called this event.
 }

TypeScript examples would be much appreciated as well

[ribeiroguilherme]

Hey @ashrafnazar could you please share the Docs link? I will ask the team to fix this.

I don't believe that adding a Typescript example would change something in this case. Ideally the types must be inferred by the IDE, and the logic is the same as Javascript code.

For now, you can check the onAdditionalDetails that we have on our playground here. In summary, you need to make an API request sending the data received on the state object to your own endpoint (which will send to Adyen /payment/details endpoint), and depending on the response you will do different things (that depends of the payment methods that you are going to support). You can check this in the example I gave.

[ashrafnazar]

Hi @ribeiroguilherme - thanks for the reply. Here is the link. You'll have to scroll down a little bit.

Having an example in the documentation (or at least links which point to them) would be beneficial. I still think having TS examples would be useful, as types cannot always be inferred.

I haven't seen examples for the checkout.createFromAction method either.

[ribeiroguilherme]

I reached out to the Docs team and we will fix the onAdditionalDetails code sample in the next days.

Can you elaborate what do you expect to see about checkout.createFromAction ?
It is a helper to create your 3DS component. As the documentation says: you pass the action from /payments response to it and optionally you can pass a threeDSConfiguration. Then you mount it in the DOM node. After that, you should see the 3DS in your webpage.

[ashrafnazar]

@ribeiroguilherme - appreciate you reaching out.

As I'm working on a Next.js app, an example on handling how to retrieve the action property from the /payments response would be good.

So what I'm having to do is use React's Context API to retrieve the property from the initial API call and then pass it into createFromAction. If you feel there is a better way to do it, then please expound on this.