Alma Component

Add Alma to an existing Components integration.

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

Requirements

Select the server-side flow that your integration uses:

Requirement	Description
Integration type	Make sure that you have built a Sessions flow Web Components integration.
Setup steps	Before you begin, add Alma in your Customer Area.

API reference

When making a /sessions request, you can optionally include the following fields, so that the shopper doesn't have to fill in this information on the Alma-hosted page:

Parameter name	Required	Description
telephoneNumber		The shopper's telephone number.
shopperEmail		The shopper's email address.
billingAddress		The postal address of the shopper.
deliveryAddress		The postal address where the purchased goods should be delivered.

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:


Copy code
 <div id="alma-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.


Copy code
const alma = new Redirect(checkout, { type: 'alma' }).mount('#alma-container');

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


Copy code
const almaComponent = checkout.create('alma').mount('#alma-container');

Test and go live

Check the status of Alma test payments in your Customer Area > Transactions > Payments.

Before you can accept live Alma payments, you need to submit a request for Alma in your live Customer Area.