CODEWITHSUNDEEP
reactjstypescriptadyen
AshNaz87
AshNaz87

Reputation: 434

How to integrate an Adyen Native 3DS2 component into a custom form using React & TypeScript

When building your own payment form, the Adyen documentation mentions making use of the onAdditionalDetails property as part of a configuration object. The example they use is:

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.
}

Is this correct? In the .d.ts file, the type for state object is stated as any.

Also, the 5th point of Step 3: Handle the 3D Secure 2 action states that:

  1. Get the state.data from the onAdditionalDetails event, and pass it your server.

As I'm building the card component using React, does this mean state.data needs to be passed in as the payload?

There isn't an example that I've found for this scenario. Any help would be much appreciated

Upvotes: 1

Views: 332

Answers (1)

Beppe C
Beppe C

Reputation: 13993

In the onAdditionalDetails handler you can grab the state.data (you are correct) and you send that to Adyen with the /payments/details API call. This contains the details of the threeDSResult result:

{
  "details": {
   "threeDSResult": "eyJ0cmdssdsdsds="
  }
}

It is a little bit easier when using the Adyen Javascript API, as there is a method that you can use to perform this step (paymentsAPI.paymentsDetails({ details: PaymentCompletionDetails }.

Checkout the Adyen Node 3DS2 example.

Upvotes: 0

Related Questions