---
title: "Checkout components"
description: "Use Adyen's prebuilt components to show a checkout page with various payment methods to your users."
url: "https://docs.adyen.com/platforms/online-payments/checkout-components"
source_url: "https://docs.adyen.com/platforms/online-payments/checkout-components.md"
canonical: "https://docs.adyen.com/platforms/online-payments/checkout-components"
last_modified: "2026-05-15T12:56:28+02:00"
language: "en"
---

# Checkout components

Use Adyen's prebuilt components to show a checkout page with various payment methods to your users.

Adyen offers several options for integrating online payments in your platform's user interface (UI). These options include:

* **Web API only**: this integration requires you to implement multiple API calls and to build the checkout UI yourself.
* **Web Hosted Checkout**: with this integration, the shopper is redirected to an Adyen-hosted page to make a payment.
* **Web Drop-in**: this integration offers a prebuilt checkout UI, where you can customize the styling of the list of payment methods.
* **Web Component**: this integration provides prebuilt components that enable you to create your checkout UI. You can add a component for each payment method you want to offer and customize how it appears in your UI.

We recommend using the Web Component integration as it provides the convenience of prebuilt UI and the flexibility of customizing each payment method.

This page explains how to create a checkout page in your platform's UI by using the Checkout components. Select a version of the Web Component integration and follow the integration steps.

## Web Components

Use our customizable UI components

### Version Update

## Introducing Web v6

### Improvements

The Web v6 library introduces the following improvements:

* Reduced bundle size through tree shaking
* Enhanced design
* Enhanced Typescript developer experience
* Better alignment of express payment methods
* Added support for 6 localizations
* Support for Apple Pay Order tracking
* Improve AVS checks for Google Pay and Apple Pay

To upgrade your existing integration, see [Upgrade to Adyen Web v6](/online-payments/upgrade-your-integration/upgrade-to-web-v6)

## How it works

For a Components integration, you must implement the following parts:

* **Your payment server**: sends the API requests to get available payment methods, make a payment, and send additional payment details.

* **Your client website**: shows the the Component UI where the shopper makes the payment. The Component uses the data from the API responses to handle the payment flow and additional actions on your client website.

* **Your webhook server**: receives webhooks that include the outcome of each payment.

### Integration steps

To integrate Components in your web application:

1. [Install an API library](#install-api-library) on your server.
2. [Create a session](#create-payment-session) from your server.
3. [Install the Adyen Web library](#install-adyen-web) on your front end.
4. [Create a DOM element](#create-container-element) for Components.
5. [Configure and create an instance of `AdyenCheckout`](#configure).
6. [Configure and create an instance of the Component](#create-instance).
7. [Handle redirects](#handle-the-redirect).
8. [Show the payment status](#inform-the-shopper) to your shopper.
9. [Update your order management system](#update-your-order-management-system).
10. [Test your integration and go live](#test-and-go-live).

### Payment flow

The parts of your integration work together to complete the payment flow. The payment flow is the same for all payments:

1. The shopper goes to the checkout page.
2. Your server uses the shopper's country and currency information from your client to create a payment session.
3. Your client creates an instance of the Component using the session data from the server.
4. The Component collects the shopper's payment details, handles additional actions, and presents the payment result to the shopper.
5. Your webhook server receives the notification containing the payment outcome.

![](/user/pages/filters/sessions-flow-integration/web/5-12-0/02.how-it-works/sessions-components.svg?decoding=auto\&fetchpriority=auto)

If you are integrating these parts separately, you can start at the corresponding part of this integration guide:

[![](/user/pages/reuse/online-payments/how-it-works-parts/servers.svg?decoding=auto\&fetchpriority=auto)](/#install-api-library)

[Payment server](/#install-api-library)

[Go to the integration steps for your server.](/#install-api-library)

[![](/user/pages/reuse/online-payments/how-it-works-parts/browser-developers.svg?decoding=auto\&fetchpriority=auto)](/#prepare-your-front-end)

[Client website](/#prepare-your-front-end)

[Go to the integration steps for your client website.](/#prepare-your-front-end)

[![](/user/pages/reuse/online-payments/how-it-works-parts/event-code.svg?decoding=auto\&fetchpriority=auto)](/#update-your-order-management-system)

[Webhook server](/#update-your-order-management-system)

[Go to the integration steps for your webhook server.](/#update-your-order-management-system)

### Before You Begin

## Requirements

Before you begin, take into account the following requirements, limitations, and preparations.

| Requirement                                                                     | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| ------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Integration type**                                                            | Use this information to build an online payments integration.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| **[Customer Area roles](/account/user-roles)**                                  | Make sure that you have the following roles:- **Merchant admin role**
- **Manage API credentials**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| **[Adyen API credentials](/development-resources/api-credentials)**             | Make sure that you have created the following:- [API credential](/development-resources/api-credentials/#new-credential)
- [API key](/development-resources/api-credentials/#generate-api-key)
- [Client key](/development-resources/client-side-authentication/#get-your-client-key)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| **[Adyen API credential roles](/development-resources/api-credentials/roles/)** | Make sure that you have the [roles for payments](/development-resources/api-credentials/roles/#roles-for-payments) that are assigned by default.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| **[Webhooks](/development-resources/webhooks)**                                 | Subscribe to the following webhooks:- Standard webhook with [default event codes](/development-resources/webhooks/webhook-types/#default-event-codes)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| **Limitations**                                                                 | Make sure that your integration follows our recommended best practices:- **[\<iframe>](/online-payments/best-practices/#avoid-iframe-elements)**: an \<iframe> must be hosted on the same domain as the parent window to support payment flows that use redirects.
- **[WebViews](/online-payments/best-practices/#avoid-webviews)**: we do not recommend using WebViews in native apps due to security and functionality limitations. Use native equivalents instead.
- **[Server-side Rendering (SSR)](/online-payments/best-practices/#manage-server-side-rendering-ssr-)**: if you use SSR, ensure the `AdyenCheckout` instance and Components are initialized on the client side.
- **[Browser support](/online-payments/best-practices/#supported-browsers)**: we support recent versions of all major browsers.For [3D Secure 2](/online-payments/3d-secure):- A strict [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) can prevent native 3D Secure 2 challenges from being loaded on your website, because loading the 3D Secure 2 interface requires adding more URLs to your CSP. Adyen does not maintain a list of all URLs. You can specify to use the redirect flow when creating a session if you do not want to adjust your CSP. |
| **Setup steps**                                                                 | Make sure that you have done the following:- [Set up your test account](/online-payments/integration-checklist/#set-up-your-test-account).
- [Got an overview of what is required before you accept live payments](/online-payments/integration-checklist/#set-up-your-test-account).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |

### Install Api Library

## Install an API library

Payment server

We provide server-side API libraries for several programming languages, available through common package managers, like Gradle and npm, for easier installation and version management. Our API libraries will save you development time, because they:

* Use an API version that is up to date.
* Have generated models to help you construct requests.
* Send the request to Adyen using their built-in HTTP client, so you do not have to create your own.

### Tab: Java

##### Try our example integration

![](/reuse/development-resources/install-api-library/java/gitpod-icon.png)  [Run it in Gitpod](https://github.com/adyen-examples/adyen-java-spring-online-payments#checkout-example).\
![](/reuse/development-resources/install-api-library/java/github-icon.png)  [Clone the repository](https://github.com/adyen-examples/adyen-java-spring-online-payments).

#### Requirements

* Java 11 or later.

#### Installation

You can use [Maven](https://maven.apache.org), adding this dependency to your project's POM.

**Add the API library**

```xml
<dependency>
  <groupId>com.adyen</groupId>
  <artifactId>adyen-java-api-library</artifactId>
  <version>LATEST_VERSION</version>
</dependency>
```

You can find the latest version on GitHub. Alternatively, you can download the [release on GitHub](https://github.com/Adyen/adyen-java-api-library/releases).

#### Setting up the client

Create a singleton resource that you use for the API requests to Adyen:

**Set up your client**

```java
// Import the required classes.
package com.adyen.service;

import com.adyen.Client;
import com.adyen.service.checkout.PaymentsApi;
import com.adyen.model.checkout.Amount;
import com.adyen.model.checkout.CreateCheckoutSessionRequest;
import com.adyen.model.checkout.CreateCheckoutSessionResponse;
import com.adyen.enums.Environment;
import com.adyen.service.exception.ApiException;

import java.io.IOException;

public class Snippet {

    public Snippet() throws IOException, ApiException {
        // Set up the client and service.
        Client client = new Client("ADYEN_API_KEY", Environment.TEST);
    }
}
```

### Tab: PHP

##### Try our example integration

![](/reuse/development-resources/install-api-library/php/gitpod-icon.png)  [Run it in Gitpod](https://github.com/adyen-examples/adyen-php-online-payments#run-this-integration-in-seconds-using-gitpod).\
![](/reuse/development-resources/install-api-library/php/github-icon.png)  [Clone the repository](https://github.com/adyen-examples/adyen-php-online-payments).

#### Requirements

* PHP 7.3 or later.
* cURL with SSL support.
* The JSON PHP extension.
* The list of dependencies from the composer require list.

#### Installation

You can use [Composer](https://getcomposer.org/). Follow the [installation instructions](https://getcomposer.org/doc/00-intro.md) if you do not already have composer installed.

**Install the API library**

```bash
composer require adyen/php-api-library
```

In your PHP script, make sure you include the autoloader:

**Include the autoloader**

```php
require __DIR__ . '/vendor/autoload.php';
```

Alternatively, you can download the [release on GitHub](https://github.com/Adyen/adyen-php-api-library/releases).

#### Set up the client

Create a singleton resource that you use for the API requests to Adyen:

**Set up your client**

```php
use Adyen\Model\Checkout\Amount;
use Adyen\Model\Checkout\CreateCheckoutSessionRequest;
use Adyen\Service\Checkout\PaymentsApi;

// Include your idempotency key when you make an API request.
$requestOptions['idempotencyKey'] = "YOUR_IDEMPOTENCY_KEY";

// Set up the client and service.
$client = new \Adyen\Client();
$client->setXApiKey('ADYEN_API_KEY');
$client->setEnvironment(\Adyen\Environment::TEST);

$service = new PaymentsApi($client);
```

### Tab: C\#

#### Requirements

* .NET standard 2.0 or later.

* For Terminal API certificate validation, set the application to either of the following:

  * .NET core 2.1 or later
  * .NET framework 4.6.1 or later

#### Installation

You can use [NuGet](https://www.nuget.org/packages/Adyen/):

**Install the API library**

```bash
PM> Install-Package Adyen -Version LATEST_VERSION
```

Alternatively, you can download the [release on GitHub](https://github.com/Adyen/adyen-dotnet-api-library).

#### Set up the client

Create a singleton resource that you use for the API requests to Adyen:

**Set up your client**

```cs
using Adyen;
using Adyen.Model.Checkout;
using Adyen.Service.Checkout;
using Environment = Adyen.Model.Environment;

class Program
{
    static void Main()
    {
        // Set up the client and service.
        var config = new Config
        {
            XApiKey = "ADYEN_API_KEY",
            Environment = Environment.Test
        };
        var client = new Client(config);
        var checkout = new PaymentsService(client);

        // Include your idempotency key when you make an API request.
        var requestOptions = new Adyen.Model.RequestOptions { IdempotencyKey = "YOUR_IDEMPOTENCY_KEY" };
    }
}
```

### Tab: NodeJS

##### Try our example integration

![](/reuse/development-resources/install-api-library/node-js/gitpod-icon.png)  [Run it in Gitpod](https://github.com/adyen-examples/adyen-node-online-payments#checkout-example).\
![](/reuse/development-resources/install-api-library/node-js/github-icon.png)  [Clone the repository](https://github.com/adyen-examples/adyen-node-online-payments).

#### Requirements

* Node.js version 18 or later.

#### Installation

You can use [npm](https://www.npmjs.com/):

**Install the API library**

```bash
npm install --save @adyen/api-library
npm update @adyen/api-library
```

Alternatively, you can download the [release on GitHub](https://github.com/Adyen/adyen-node-api-library/releases).

#### Setting up the client

Create a singleton resource that you use for the API requests to Adyen:

**Set up your client**

```js
// Require the parts of the module you want to use.
const { Client, CheckoutAPI, Types} = require("@adyen/api-library");

// Set up the client and service.
const client = new Client({ apiKey: "ADYEN_API_KEY", environment: "TEST" });
const checkoutApi = new CheckoutAPI(client);

// Include your idempotency key when you make an API request.
const requestOptions = { idempotencyKey: "YOUR_IDEMPOTENCY_KEY" };
```

### Tab: Go

##### Try our example integration

![](/reuse/development-resources/install-api-library/go/gitpod-icon.png)  [Run it in Gitpod](https://github.com/adyen-examples/adyen-golang-online-payments#run-this-integration-in-seconds-using-gitpod).\
![](/reuse/development-resources/install-api-library/go/github-icon.png)  [Clone the repository](https://github.com/adyen-examples/adyen-golang-online-payments).

#### Requirements

* Go 1.13 or later.

#### Installation

You can use [Go modules](https://github.com/golang/go/wiki/Modules):

**Install the API library**

```shell
go get github.com/adyen/adyen-go-api-library/vLATEST_VERSION
```

Alternatively, you can download the [release on GitHub](https://github.com/Adyen/adyen-go-api-library).

#### Set up the client

Create a singleton resource that you use for the API requests to Adyen:

**Set up your client**

```go
package main

import (
	"github.com/adyen/adyen-go-api-library/vLATEST_VERSION/src/adyen"
	"github.com/adyen/adyen-go-api-library/vLATEST_VERSION/src/checkout"
	"github.com/adyen/adyen-go-api-library/vLATEST_VERSION/src/common"
)

// Create a payment object.

func main () {
	client := adyen.NewClient(&common.Config{
		ApiKey: "ADYEN_API_KEY",
		Environment: common.TestEnv,
	})
	service := client.Checkout()
```

### Tab: Python

##### Try our example integration

![](/reuse/development-resources/install-api-library/python/gitpod-icon.png)  [Run it in Gitpod](https://github.com/adyen-examples/adyen-python-online-payments#run-this-integration-in-seconds-using-gitpod).\
![](/reuse/development-resources/install-api-library/python/github-icon.png)  [Clone the repository](https://github.com/adyen-examples/adyen-python-online-payments).

#### Requirements

* Python 3.6 or later.
* (Optional) Packages: Requests or PycURL

#### Installation

You can use [pip](https://pip.pypa.io/en/stable/):

**Install the API library**

```py
pip install Adyen
```

Alternatively, you can download the [release on GitHub](https://github.com/Adyen/adyen-python-api-library).

#### Set up the client

Create a singleton resource that you use for the API requests to Adyen:

**Set up your client**

```py
import Adyen

# Set up the client and service.
adyen = Adyen.Adyen()
adyen.client.xapikey = "ADYEN_API_KEY"
adyen.client.platform = "test" # The environment that the library is used in.
```

### Tab: Ruby

##### Try our example integration

![](/reuse/development-resources/install-api-library/ruby/gitpod-icon.png)  [Run it in Gitpod](https://github.com/adyen-examples/adyen-rails-online-payments#run-this-integration-in-seconds-using-gitpod).\
![](/reuse/development-resources/install-api-library/ruby/github-icon.png)  [Clone the repository](https://github.com/adyen-examples/adyen-rails-online-payments).

#### Requirements

* Ruby 2.7 or later.

#### Installation

You can use [RubyGems](https://rubygems.org/):

**Install the API library**

```bash
gem install adyen-ruby-api-library
```

Alternatively, you can download the [release on GitHub](https://github.com/Adyen/adyen-ruby-api-library/releases).

Run `bundle install` to install dependencies.

#### Set up the client

Create a singleton resource that you use for the API requests to Adyen:

**Set up your client**

```ruby
require 'adyen-ruby-api-library'

# Set up the client and service.
adyen = Adyen::Client.new
adyen.api_key = 'ADYEN_API_KEY'
adyen.env = :test # The environment that the library is used in.
```

## Create a session

Payment server

A payment session is a resource with information about a payment flow initiated by the shopper. This resource has all the information required 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.

To create a payment session, make a [/sessions](https://docs.adyen.com/api-explorer/Checkout/latest/post/sessions) request, including:

| Parameter name                                                                                                                                 | Required                                                                                    | Description                                                                                                                                                                                                                                                                                                     |
| ---------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `merchantAccount`                                                                                                                              | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | Your merchant account name.                                                                                                                                                                                                                                                                                     |
| `amount`                                                                                                                                       | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | The `currency` and `value` of the payment, in [minor units](/development-resources/currency-codes). This is used to filter the list of available payment methods to your shopper.                                                                                                                               |
| `returnUrl`                                                                                                                                    | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | URL to where the shopper should be taken back to after a redirection. If the URL to return to includes non-ASCII characters, like spaces or special letters, URL encode the value. The URL must not include personally identifiable information (PII), for example name or email address.                       |
| `reference`                                                                                                                                    | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | Your unique reference for the payment. Minimum length: three characters.                                                                                                                                                                                                                                        |
| `countryCode`                                                                                                                                  |                                                                                             | The shopper's country code. This is used to filter the list of available payment methods to your shopper. If not set, setting the `locale` is required in the front-end [global configuration](#configure).                                                                                                     |
| `channel`                                                                                                                                      |                                                                                             | The platform where the payment is taking place. Use **Web**.                                                                                                                                                                                                                                                    |
| `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.                                 |
| `shopperLocale`                                                                                                                                |                                                                                             | The language that the payment methods will appear in if the `locale` in your front-end [global configuration](#configure) isn't set. Set it to the shopper's language and country code. The default is **en-US**.                                                                                               |
| `shopperEmail`                                                                                                                                 |                                                                                             | The shopper's email address. Strongly recommended because this field is used in a number of [risk checks](/risk-management/configure-your-risk-profile/risk-field-reference), and for 3D Secure.                                                                                                                |
| `shopperReference`                                                                                                                             |                                                                                             | Your reference to uniquely identify this shopper. Strongly recommended because this field is used in a number of [risk checks](/risk-management/configure-your-risk-profile/risk-field-reference).                                                                                                              |
| [`applicationInfo`](/development-resources/building-adyen-solutions)                                                                           |                                                                                             | If you are building an Adyen solution for multiple merchants, include some basic identifying information, so that we can offer you better support.                                                                                                                                                              |
| [nativeThreeDS](https://docs.adyen.com/api-explorer/Checkout/latest/post/sessions#request-authenticationData-threeDSRequestData-nativeThreeDS) |                                                                                             | When set to **disabled**, the redirect flow is used for [3D Secure 2 authentication](/online-payments/3d-secure). This lets you use the redirect flow to avoid adjusting your [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) to load the 3D Secure 2 interfaces. |

Here is an example of how to create a session for a payment of **10** EUR:

The response contains:

* `sessionData`: the payment session data you need to pass to your front end.
* `id`: a unique identifier for the session data.
* The request body.

### API error handling

If you do not get an HTTP 201 response, use the `errorCode` field and the list of [API error codes](/development-resources/error-codes) to troubleshoot.

### Prepare Front End

## Prepare your front end

Client website

Use a Component to show each available payment method, and to collect payment details from your shoppers.

### Get Adyen Web

### Install Adyen Web

Use the Adyen Web npm package, or embed the Adyen Web script and stylesheet into your HTML file:

### Tab: npm (recommended)

Install the [Adyen Web Node package](https://www.npmjs.com/package/@adyen/adyen-web):

```bash
npm install @adyen/adyen-web --save
```

Import Adyen Web into your application.

```js
import { AdyenCheckout, Card } from '@adyen/adyen-web';
import '@adyen/adyen-web/styles/adyen.css';
```

### Tab: Embed script and stylesheet

Use the `integrity` attribute so browsers can verify that the script and stylesheet have not been changed unexpectedly.

The value of the `integrity` attribute is the [Subresource Integrity (SRI) hash](/online-payments/web-best-practices#implement-subresource-integrity-hashes) which Adyen provides for each version of the Adyen Web JavaScript and CSS files.

Get the SRI hashes in the [release notes](/online-payments/release-notes?integration_type=web), under **Updating to this version**.

**checkout.html**

```html
<!-- Embed the Adyen Web script element above any other JavaScript in your checkout page. -->
<script src="https://checkoutshopper-test.cdn.adyen.com/sdk/VERSION/adyen.js"
   integrity="JS_INTEGRITY_HASH_FOR_YOUR_VERSION"
   crossorigin="anonymous"></script>

<!-- Embed the Adyen Web stylesheet. You can add your own styling by overriding the rules in the CSS file -->
<link rel="stylesheet" href="https://checkoutshopper-test.cdn.adyen.com/checkoutshopper/sdk/VERSION/adyen.css"
    integrity="CSS_INTEGRITY_HASH_FOR_YOUR_VERSION"
    crossorigin="anonymous">
```

Components resources are available on the `window` global variable.

### Create Dom Element

### Create a DOM element for the Component

Create a DOM container element on your checkout page where you want the Component to be rendered and give it a descriptive `id`. We strongly recommend that you do not put it in an [iframe element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe), because it may cause issues.

For example, if you are implementing the Card Component:

**Create a DOM element**

```html
<div id="card-container"></div>
```

If you are using JavaScript frameworks such as Vue or React, make sure that you use references instead of selectors and that you do not re-render the DOM element.

### Configure And Create Instances

## Create the Component

Client website

Components consists of:

* `AdyenCheckout`: represents one payment and is linked to a payment session, environment, and amount to be paid.
* Components: represent the payment method-specific interface a shopper completes their payment with.

With the `AdyenCheckout` instance, you can create one or multiple Components.

### Create your instance of AdyenCheckout

Create a global configuration object that you use to create the instance of `AdyenCheckout`. The object contains configuration parameters and event handlers.

1. Add configuration parameters.

   | Parameter name    | Required                                                                                    | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
   | ----------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
   | `session`         | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | The payment session object from your call to `/sessions`. Contains a `session.id` and `session.sessionData`.                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
   | `environment`     | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | Use **test**. When you are ready to accept live payments, change the value to one of our [live environments](#test-and-go-live).                                                                                                                                                                                                                                                                                                                                                                                                                                          |
   | `amount`          | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | An object representing the amount to be displayed on the **Pay** Button. Its properties are `value` (the amount in the currencies smallest unit, for example cents for EUR) and `currency`.                                                                                                                                                                                                                                                                                                                                                                               |
   | `countryCode`     | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | The shopper's country code. This is used to filter the list of available payment methods to your shopper.                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
   | `locale`          | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | The language used in the the Component UI. For possible values, see the [list of available languages](https://github.com/Adyen/adyen-web/tree/main/packages/server/translations). By default, this is the either the `shopperLocale` from your `/sessions` request or, if this locale is not available on Components, **en-US**.                                                                                                                                                                                                                                          |
   | `showPayButton`   |                                                                                             | Shows or hides a **Pay** Button for each payment method. Defaults to **true**. The **Pay** button triggers the `onSubmit` event when payment details are valid. If you want to disable the button and then trigger the submit flow on your own, set this to **false** and call the `.submit()` method from your own button implementation. PayPal Smart Payment Buttons doesn't support the `.submit()` method.                                                                                                                                                           |
   | `secondaryAmount` |                                                                                             | Shows the payment amount in an additional currency on the **Pay** button. You must do the currency conversion and set the amount. This object has properties:- `currency`: The three-character [ISO currency code](/development-resources/currency-codes).
   - `value`: The amount of the transaction, in [minor units](/development-resources/currency-codes).
   - `currencyDisplay`: Sets the [currency formatting](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#currencydisplay). Default: **symbol**.
    |

2. Add event handlers, to handle events that get triggered during the payment.

   | Event handler name                               | Required                                                                                    | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
   | ------------------------------------------------ | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
   | `onPaymentCompleted(result, component)`          | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | Create an event handler, called when the payment is completed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
   | `onPaymentFailed(result, component)`             | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | Create an event handler, called when the payment failed. A failed payment has result code **Cancelled**, **Error** or **Refused**.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
   | `onError(error)`                                 |                                                                                             | Create an event handler, called when an error occurs in Components.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
   | `beforeSubmit(data, component, actions)`         |                                                                                             | Create an event handler, called when the shopper selects the **Pay** button. Do not use if you are implementing an [additional use case](/online-payments/build-your-integration#supported-use-cases). Allows you to add parameters to the payment request that the Component makes. For example, you can add shopper details like [`billingAddress` ](https://docs.adyen.com/api-explorer/#/CheckoutService/latest/post/payments__reqParam_billingAddress), [`deliveryAddress` ](https://docs.adyen.com/api-explorer/#/CheckoutService/latest/post/payments__reqParam_deliveryAddress), [`shopperEmail` ](https://docs.adyen.com/api-explorer/#/CheckoutService/latest/payments__reqParam_shopperEmail), or [`shopperName` ](https://docs.adyen.com/api-explorer/#/CheckoutService/latest/payments__reqParam_shopperName). When the `beforeSubmit` event is triggered, you need to continue or stop the payment flow using methods available in the event handler:- Continue the payment flow (`actions.resolve()`): You should call the `actions.resolve()` method regardless of the `resultCode`, including when the payment is unsuccessful.
   - Stop the payment flow (`actions.reject()`): Stop the payment flow only when your server-side API request to Adyen failed, or when experiencing network connection issues. |
   | `onSubmit(state, component, actions)`            |                                                                                             | Required if you need to [update the payment amount after rendering the Component](/online-payments/build-your-integration#supported-use-cases). For this additional use case, you need to integrate additional endpoints. Creates an event handler, called when the shopper selects the **Pay** button and payment details are valid. When the `onSubmit` event is triggered, you need to continue or stop the payment flow using methods available in the event handler:- Continue the payment flow (`actions.resolve()`): You should call the `actions.resolve()` method regardless of the `resultCode`, including when the payment is unsuccessful.
   - Stop the payment flow (`actions.reject()`): Stop the payment flow only when your server-side API request to Adyen failed, or when experiencing network connection issues.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
   | []()`onActionHandled`                            |                                                                                             | Create an event handler, called when an action, for example a QR code or 3D Secure 2 authentication screen, is shown to the shopper. The following `action.type` values trigger this callback:- `threeDS`
   - `qr`
   - `await`Returns data that contains:- `componentType`: The type of component that shows the action to the shopper.
   - `actionDescription`: A description of the action shown to the shopper.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
   | `onAdditionalDetails(state, component, actions)` |                                                                                             | Required if you need to [confirm an additional action on your server](/online-payments/build-your-integration#supported-use-cases). For this additional use case, you need to integrate additional endpoints. Create an event handler, called when a payment method requires more details, for example for native 3D Secure 2, or native QR code payment methods.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
   | `onChange(state, component)`                     |                                                                                             | Create an event handler, called when a change happens in the payment form.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |

   If an error occurs, the `onError` event returns an object which contains details about the error:

   | Error field     | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
   | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
   | `error.name`    | The type of error. Use the values it returns to configure localized error messages for your shoppers:- **NETWORK\_ERROR**: a call that the Component made to the server has failed, for example because of a timeout, or if there is missing information in the request. Ask the shopper to try again.
   - **CANCEL**: the shopper canceled the payment. Only applies for payment methods that allow explicit cancellation in the UI, for example Apple Pay or PayPal.
   - **IMPLEMENTATION\_ERROR**: the method or parameter is incorrect or not supported.
   - **ERROR**: generic catch-all error. Tell the shopper something went wrong and ask them to try paying again, maybe with a different payment method. |
   | `error.message` | Gives more information for each type of error. The message is technical so you shouldn't show it to your shoppers. For `error.name`: **NETWORK\_ERROR**, the information in the `message` field depends on the environment:- **test**: you get a message with a [generic error code](/development-resources/error-codes#generic-error-codes) to help you troubleshoot.
   - **live**: the message from the response.                                                                                                                                                                                                                                                                                             |
   | `component`     | The name of the variable where you [created the instance of the Component](#create-and-mount-instance), for example **cardComponent**.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |

   The `error` object may contain additional fields inherited from the [`Error()` constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/Error).

   Combine the configuration parameters and event handlers into your global configuration object.

   **Create a global configuration object**

   ```js
   const globalConfiguration = {
     session: {
       id: 'CSD9CAC3...', // Unique identifier for the payment session.
       sessionData: 'Ab02b4c...' // The payment session data.
     },
     environment: 'test', // Change to 'live' for the live environment.
     amount: {
       value: 1000,
       currency: 'EUR'
     },
     locale: 'nl-NL',
     countryCode: 'NL',
     clientKey: 'test_870be2...', // Public key used for client-side authentication: https://docs.adyen.com/development-resources/client-side-authentication
     onPaymentCompleted: (result, component) => {
       console.info(result, component);
     },
     onPaymentFailed: (result, component) => {
       console.info(result, component);
     },
     onError: (error, component) => {
       console.error(error.name, error.message, error.stack, component);
     }
   };
   ```

3. Use this global configuration object to create an instance of `AdyenCheckout`.

   **Create an instance of AdyenCheckout**

   ```javascript
   // All of the resources that you imported are properties of the window.
   // In this example you imported Card.
   const { AdyenCheckout, Card } = window.AdyenWeb;

   const checkout = await AdyenCheckout(globalConfiguration);
   ```

   **Initializing in a reactive framework**\
   Modern frameworks can re-render UI components, which can cause unexpected behavior in the checkout. As a rule, [initialize `AdyenCheckout` and mount your Components only once](/online-payments/web-best-practices#handle-web-framework-re-renders) when you are ready to display the payment methods.

### Create your instance of Components

1. Optionally create another configuration object for the Component. For some payment methods, you must add additional configuration. You can also add optional configuration for some payment methods. For example, you can add [additional configuration for cards](/payment-methods/cards/web-drop-in/#optional-configurationn).[]()

   **Payment method configuration**

   ```javascript
   const cardConfiguration = {
     // Optional configuration.
     billingAddressRequired: true, // Show the billing address input fields and mark them as required.
     brandsConfiguration: {
       visa: { icon: 'https://...' } // Custom icon for Visa.
     }
   };
   ```

   Configuration for payment methods overrides global configuration. In the following example, the `onError()` configuration for `card` overrides the global `onError()` configuration.

   **Override global configuration**

   ```js
   // Global configuration object.
   const globalConfiguration = {
     // Global configuration for onError.
     onError: () => {},
   };

   // Card configuration object.
   const componentConfiguration = {
     // onError configuration for card payments. Overrides the global configuration.
     onError: () => {}
   };
   ```

2. Use the `paymentMethodsResponse` property of the `AdyenCheckout` instance to check the available payment methods.

3. If the payment method is available, create an instance of the Component and mount it to the [container element](#create-container-element) you created.

   The Component you use depends on the payment method. You can find which Component to use for which payment method on the [payment method pages](/payment-methods). For example, for cards, use `Card`.

   **checkout.js**

   ```js
   // 1. Check the available payment methods from the AdyenCheckout instance.
   console.log(checkout.paymentMethodsResponse); // => { paymentMethods: [...], storedPaymentMethods: [...] }

   // 2. Create an instance of the Component and mount it to the container you created.
   const cardComponent = new Card(checkout, cardConfiguration).mount('#card-container')
   ```

   The Github repository also includes a [Components map](https://github.com/Adyen/adyen-web/blob/main/packages/lib/src/components/components-name-map.ts) that shows which payment methods use which Components.

**

### Components methods

The following methods are available on [your instance of Components](#create-instance):

| Method name       | Description                                                                                                                                                                                                                                                                                                    |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `mount(selector)` | Mounts the the Component into the DOM returned by the `selector`. The `selector` must be either a [valid CSS selector string](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#parameters) or an [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) reference. |
| `unmount()`       | Unmounts the the Component from the DOM. We recommend to unmount in case the payment amount changes after the initial mount.                                                                                                                                                                                   |
| `update()`        | Updates the properties and remounts the Component into the DOM, for example, if you want to change the properties of the configuration object after the Component is mounted.                                                                                                                                  |

### Optional Localization (optional)

**

### Localization

#### Supported languages

We include UI localizations for some languages. The fields and text are in the [files for the included locales](https://github.com/Adyen/adyen-web/tree/main/packages/server/translations).

To use a language or localization that isn't included, [create your own](#create-localization).

#### Change the language

The language of the UI is based on the `locale` set when creating your instance of `AdyenCheckout`.

If no `locale` is set when creating an instance of `AdyenCheckout`, the language displayed matches the `shopperLocale` from your [/sessions](https://docs.adyen.com/api-explorer/Checkout/latest/post/sessions) request.

If neither language is set or supported, the UI language defaults to US English.

#### Customize the localization

The text displayed in each localization can be customized, allowing you to replace the default text with your own.

To customize a localization:

1. Create a `translations` object on your payments page.

2. In this object, specify the `locale` you want to customize, and add key-value pairs corresponding to any text you want to customize.

   The following example shows how to customize the US English (`en-US`) translation so that:

   * **Shipping Address** appears instead of **Delivery Address** (the default **en-US** text).
   * **State** appears instead of **State or Province** (the default **en-US** text).

   **Customize translations**

   ```js
   const translations = {
     "en-US": {
       "deliveryAddress": "Shipping Address",
       "stateOrProvince": "State"
     }
   };
   ```

3. To use the customized localization in your payment form, provide the following parameters in the [`configuration` object](#configure):

   | Parameter name | Required                                                                                    | Description                                       |
   | -------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------- |
   | `locale`       | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | The `locale` you customized in the previous step. |
   | `translations` | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | Use **translations**                              |

   The following example shows how to use a customized **en-US** localization in Drop-in.

   **Example of US English localization**

   ```js
   const configuration = {
     locale: "en-US",
     translations: translations,
     ...
   };
   ```

#### Create your custom localization

To use a language or localization that we do not included, create your own.

1. Create a `translations` object on your payments page.

2. In this object, specify the `locale` you want to create. For example, you can use the locale **nl-BE** to create a Belgian Dutch localization, and add key-value pairs corresponding to text shown in the UI.

   The example below shows a `translation` object for creating a **nl-BE** localization.

   **British English translations example**

   ```js
   const translations = {
     "nl-BE": {
       "paymentMethods.moreMethodsButton": "Meer betaalmethoden",
       "payButton": "Betaal",
       "storeDetails": "Bewaar voor mijn volgende betaling",
       ...
     }
   };
   ```

   The ellipsis (...) in the `translations` object above indicate the code sample isn't complete. For missing key-value pairs in your configuration, the translation defaults to **en-US**.

3. To use your localization in your payment form, provide the following parameters in the [`configuration` object](#configure):

   | Parameter name | Required                                                                                    | Description                                    |
   | -------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------- |
   | `locale`       | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | The `locale` you created in the previous step. |
   | `translations` | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | Use **translations**                           |

   The example below shows how to use a created localization for **nl-BE**.

   ```js
   const configuration = {
     locale: "nl-BE",
     translations: translations,
     ...
   };

   const checkout = await AdyenCheckout(configuration);
   ```

#### Text direction

The default text direction is left-to-right. Text direction is independent from the `locale` you set in the `configuration` object. So even if you set the locale to a right-to-left language, like Arabic, you still need to set the text direction.

To change the text direction to right-to-left, use the [HTML `dir` attribute](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dir) on the parent element for the checkout container.

## Handle the payment

Client website

When you create and mount the Component, the shopper interacts with the interface to complete the payment. The whole payment flow is handled by the Component you configured and created, except for when a redirect happens.

### Handle The Redirect Result

### Handle the redirect

Some payment methods, like iDEAL and some 3D Secure flows, will redirect the shopper back to your website. When the shopper comes back to your website, show them the payment result, based on the result code. To get the `resultCode`, you can either:

* Create an instance of `AdyenCheckout` after the redirect, as described below.
* Confirm the redirect result on your server, for which you need to [implement an extra API endpoint](/online-payments/build-your-integration).

The shopper comes back to the `returnUrl` specified when [creating the payment session](#create-payment-session). The `returnUrl` has query parameters appended to it, which you need to handle the redirect:

* `sessionId`: the unique identifier for the shopper's payment session.
* `redirectResult`: details you need to submit to handle the redirect.

If the shopper doesn't return to you website, you do not get a `redirectResult`. You do not need to do anything to handle the redirect in this case. Instead, wait for the [webhook](#get-payment-outcome) that we send to your server.

**Example return URL**

```text
// The return URL has query parameters related to the payment session.
https://your-company.example.com/?sessionId=CSD9CAC34EBAE225DD&redirectResult=X6XtfGC3!Y...
```

Extract the values from the query string parameters and create a function which handles the redirect result. The function needs to:

1. Create an instance of Adyen Checkout using the `sessionId` value you extracted.
2. Submit the `redirectResult` value you extracted from the `returnUrl`.

**handleRedirectResult**

```js
// Create an instance of AdyenCheckout to handle the shopper returning to your website.
// Configure the instance with the sessionId you extracted from the returnUrl.
const checkout = await AdyenCheckout(configuration);

// Submit the redirectResult value you extracted from the returnUrl.
checkout.submitDetails({ details: { redirectResult: redirectResult } });
```

If the shopper doesn't return to your website, do not call `submitDetails`, because the result doesn't change when you attempt the request.

After you submit the `redirectResult` value, the Component calls the `onPaymentCompleted(result, component)` event. Use the [result code](/online-payments/build-your-integration/payment-result-codes#final-payment-status) in `result.resultCode` to inform the shopper.

To update your order management system, wait for the [webhook](#update-your-order-management-system) that we send to your server.

### Get The Outcome

## Get the payment outcome

After the Component finishes the payment flow, you can show the shopper the current payment status. Adyen sends a webhook with the outcome of the payment.

### Inform the shopper

Client website

Depending on whether the payment was successful, the `onPaymentCompleted` or `onPaymentFailed` event is triggered.

From the relevant event, you can get the [`resultCode` ](/online-payments/payment-result-codes#final-payment-status)to inform the shopper about the current payment status.

**

### Optional: Get the result of the payment session on your server

Payment server

You can also get the result of the payment session on your server.

1. Get the `id` from the [`/sessions` response](#sessions-response).

2. Get `sessionResult` from the `onPaymentCompleted` or `onPaymentFailed` event.

3. Make a **GET** `/sessions/{id}?sessionResult={sessionResult}` request including the `id` and `sessionResult`. For example:

   The response includes the result of the payment session (`status`). For example:

   **Response with result of the payment session**

   ```json
   {
     "additionalData": {
       ...
     },
     "id": "CSD9CAC34EBAE225DD",
     "payments": [{
       "amount": {
         "currency": "EUR",
         "value": 1000
       },
       "paymentMethod": {
         "brand": "visa",
         "type": "scheme"
       },
       "pspReference": "TG9SNBJJNXRKDM92",
       "resultCode": "Authorised"
     }],
     "reference": "YOUR_PAYMENT_REFERENCE",
     "status": "completed"
   }
   ```

   The [additionalData](https://docs.adyen.com/api-explorer/Checkout/latest/get/sessions/\(sessionId\)#responses-200-additionalData) attributes in the response depend on the type of payment made.

   Possible statuses:

   | `status`           | Description                                                                                                                      |
   | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- |
   | **completed**      | The shopper completed the payment. This means that the payment was authorized.                                                   |
   | **paymentPending** | The shopper is in the process of making the payment. This applies to payment methods with an asynchronous flow.                  |
   | **canceled**       | The shopper canceled the payment.                                                                                                |
   | **expired**        | The session expired (default: 1 hour after session creation). Shoppers can no longer complete the payment with this `sessionId`. |

The `status` included in the response doesn't get updated. Do not make the request again to check for payment status updates. Instead, check webhooks or the **Transactions** list in your [Customer Area](https://ca-test.adyen.com/).

### Update your order management system

Webhook server

You get the outcome of each payment asynchronously, in an **AUTHORISATION** [webhook](/development-resources/webhooks). Use the `merchantReference` from the webhook to match it to your order reference.\
For a successful payment, the event contains `success`: **true**.

**Example webhook for a successful payment**

```json
{
  "live": "false",
  "notificationItems":[
    {
      "NotificationRequestItem":{
        "eventCode":"AUTHORISATION",
        "merchantAccountCode":"YOUR_MERCHANT_ACCOUNT",
        "reason":"033899:1111:03/2030",
        "amount":{
          "currency":"EUR",
          "value":2500
        },
        "operations":["CANCEL","CAPTURE","REFUND"],
        "success":"true",
        "paymentMethod":"mc",
        "additionalData":{
          "expiryDate":"03/2030",
          "authCode":"033899",
          "cardBin":"411111",
          "cardSummary":"1111",
          "checkoutSessionId":"CSF46729982237A879"
        },
        "merchantReference":"YOUR_REFERENCE",
        "pspReference":"NC6HT9CRT65ZGN82",
        "eventDate":"2021-09-13T14:10:22+02:00"
      }
    }
  ]
}
```

For an unsuccessful payment, you get `success`: **false**, and the `reason` field has details about why the payment was unsuccessful.

**Example webhook for an unsuccessful payment**

```json
{
  "live": "false",
  "notificationItems":[
    {
      "NotificationRequestItem":{
        "eventCode":"AUTHORISATION",
        "merchantAccountCode":"YOUR_MERCHANT_ACCOUNT",
        "reason":"validation 101 Invalid card number",
        "amount":{
          "currency":"EUR",
          "value":2500
        },
        "success":"false",
        "paymentMethod":"unknowncard",
        "additionalData":{
          "expiryDate":"03/2030",
          "cardBin":"411111",
          "cardSummary":"1112",
          "checkoutSessionId":"861631540104159H"
        },
        "merchantReference":"YOUR_REFERENCE",
        "pspReference":"KHQC5N7G84BLNK43",
        "eventDate":"2021-09-13T14:14:05+02:00"
      }
    }
  ]
}
```

## Test and go live

Before going live, use our list of [test cards and other payment methods](/development-resources/test-cards-and-credentials/test-card-numbers) to test your integration. We recommend testing each payment method that you intend to offer to your shoppers.

You can check the status of a test payment in your [Customer Area](https://ca-test.adyen.com/), under **Transactions** > **Payments**.

To debug or troubleshoot test payments, you can also use [API logs](/development-resources/logs-resources/api-logs) in your test environment.

When you are ready to go live, you need to:

1. [Apply for a live account](/get-started-with-adyen/application-requirements). Review the process to start accepting payments on [Get started with Adyen](/get-started-with-adyen).

2. Assess your [PCI DSS compliance](/development-resources/pci-dss-compliance-guide#online-payments) by submitting the [Self-Assessment Questionnaire-A](https://www.pcisecuritystandards.org/documents/PCI-DSS-v3_2_1-SAQ-A.pdf).

3. [Configure your live account](/online-payments/go-live-checklist). 

4. Ensure your checkout is served over HTTPS. Non-HTTPS connections can result in payment processing failures.

5. Submit a request to add payment methods in your [live Customer Area](https://ca-live.adyen.com/).

6. Switch from test to our [live endpoints](/development-resources/live-endpoints#checkout-endpoints).

   Make sure that all API requests you make for the same payment session use the same live endpoint region. Using different regions for [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) and [/payments/details](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments/details) requests may result in errors, for example, when authenticating with 3D Secure 2.

7. Load Components from one of our live environments and set the `environment` to match your live endpoints:

   | Endpoint region                      | Value         |
   | ------------------------------------ | ------------- |
   | Europe (EU) live                     | **live**      |
   | United States (US) live              | **live-us**   |
   | Australia (AU) live                  | **live-au**   |
   | Asia Pacific & Southeast (APSE) live | **live-apse** |
   | India (IN) live                      | **live-in**   |

### Staying up to date

After you go live, [keep your integration up-to-date](/online-payments/upgrade-your-integration#staying-up-to-date). Regular updates help you:

* Access new features as they are released.
* Improve checkout performance and accessibility for your customers.
* Update security to protect your business and your data.

## Next steps

[required](/online-payments/modify-payments)

[Modify payments](/online-payments/modify-payments)

[Find out how to cancel, refund, or capture a payment using our API.](/online-payments/modify-payments)

[Add payment methods](/payment-methods/add-payment-methods)

[Learn about payment methods and how to add them to your account.](/payment-methods/add-payment-methods)

[Tokenization](/online-payments/tokenization)

[Save shopper payment details for later payments.](/online-payments/tokenization)

[3D Secure authentication](/online-payments/3d-secure)

[Comply with regulations such as PSD2 SCA in Europe.](/online-payments/3d-secure)

![](/user/pages/filters/checkout-web-component/components/visual/web-components.png) ![](/user/pages/filters/checkout-web-component/github/github-mark.png)

## See also

* [Process online payments](/platforms/online-payments)
* [Component libraries](/platforms/components-overview)