the Component on GitHub:
merchantAccount
Your merchant account name.
Web Components integration guide
Build your web payments form with our JavaScript Components.
Components is our pre-built UI solution for accepting payments on your website. Each component renders a payment method which you can place anywhere on your website. This integration requires you to make one API request to /sessions endpoint.
Adding new payment methods usually doesn’t require more development work. Components supports cards, wallets, and most local payment methods.
How it works
From an implementation perspective, a Components integration contains:
- Server-side: a single API call which creates the payment sessions.
- Client-side: the Component, which uses the payment session data to make the payment request and to handle any other actions like redirects or 3D Secure authentication.
- Webhook server: receives webhook events which tell you what is the outcome of each payment.
If you need to handle additional use cases, you need to implement additional endpoints and client-side configuration.
Try it out!
If you need to handle additional use cases, you need to implement additional endpoints and client-side configuration.
The payment flow is the same for all payments:
The shopper goes to the checkout page.
Your server uses the shopper’s country and currency information from your client to create a payment session.
Your client creates an instance of the Component using the session data from the server.
The Component collects the shopper’s payment details, handles additional actions, and presents the payment result to the shopper.
Your webhook server receives the event containing the payment outcome.
Step 1: Create a payment session
A payment session is a resource with information about a payment flow initiated by the shopper. This resource has all the information Components needs to handle all the stages of a payment flow. You can configure this resource with information like available payment methods, payment amount, or line items.
Parameter name
Required
Description
amount
The currency and value of the payment, in minor units. This is used to filter the list of available payment methods to your shopper.
returnUrl
URL to where the shopper should be taken back to after a redirection. The URL can contain a maximum of 1024 characters and should include the protocol: http:// or https://. You can also include your own additional query parameters, for example, shopper ID or order reference number.
expiresAt
The session expiry date in ISO8601 format, for example 2023-11-23T12:25:28Z, or 2023-05-27T20:25:28+08:00. When not specified, the expiry date is set to 1 hour after session creation. You cannot set the session expiry to more than 24 hours after session creation.
API error handling
If you don’t get an HTTP 201 response, use the errorCode field and the list of API error codes to troubleshoot.
Step 2: Set up Components
Use a Component to show each available payment method, and to collect payment details from your shoppers.
npm (recommended)
Embed script and stylesheet
npm (recommended)
Install the Adyen Web Node package:
npm install @adyen/adyen-web --save
Embed script and stylesheet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Pregúntale a la IA 