Atome Component

Add Atome to your existing Components integration.

On this page, you can find additional configuration for adding Atome to your Components integration.

Before you begin

Before starting your integration:

Make sure you've built a Components integration.
Contact our Support Team to add Atome in your test Customer Area.

When making an Atome payment, you also need to:

Collect shopper details, and specify these in your payment request. Atome uses these for risk checks.
Provide information about the purchased items.
Make sure you use a supported combination of country/region and currency.
- For Web Components v6, import the Component that you need for Atome:

import { AdyenCheckout, Atome } from '@adyen/adyen-web'

Country/region	`countryCode`	`amount.currency`
Malaysia	MY	MYR
Singapore	SG	SGD

API reference

Select which endpoint you're integrating:

Component configuration

Step 1: Create a DOM element

Create a DOM element on your checkout page, placing it where you want the payment method form to be rendered:

 <div id="atome-container"></div>

Step 2: Create an instance of the Component

v6.0.0 or later

Create an instance of the Component, passing:

Your instance of AdyenCheckout.

const atome = new Atome(checkout).mount('#atome-container');

Use the create method of your AdyenCheckout instance, in this case checkout, to create the Component:

const atomeComponent = checkout.create('atome').mount('#atome-container');

Test and go live

To test Atome payments, you need a test shopper account in the Atome sandbox environment. To request a test account, reach out to your Adyen contact. If you are testing in multiple countries/regions, use a different test account for each location.

To test the QR code flow, download one of the following test apps:

For Malaysia (MY)

For Singapore (SG)

You can check the status of test payments in your Customer Area > Transactions > Payments.

To accept live Atome payments, you must contact our Support Team to add Atome in your live Customer Area.