No momento, esta página não está disponível em português

Atome Component

Add Atome to your existing Components integration.

This page explains how to add Atome to your existing Web Components integration.

Requirements

Select which endpoint you are using:

Import resources for v6

If you are using Web Components v6, import the Component that you need for Atome:

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

API reference

Select which endpoint you are using:

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.