Web Component

You can integrate Adyen's client-side libraries with the sessions flow, which meets the requirements for most online payment integrations.

With Drop-in components, you can render a list of available payment methods anywhere on your website and collect payment details from your shoppers.

Requirements

Before you begin to integrate, make sure you have followed the Basic Session Request guide.

Setting up your Frontend

Using the NPM Package

Use the Adyen Web npm package:

• npm install @adyen/adyen-web --save
• Import Adyen Web into your application:

import { AdyenCheckout, Dropin } from "@adyen/adyen-web/auto";
import "@adyen/adyen-web/styles/adyen.css";

Embed the Script into your HTML

Use the Adyen Web script and stylesheet in your HTML file:

• Use the integrity attribute to ensure that browsers can verify the script and stylesheet have not been altered unexpectedly.
• Get the SRI hashes in the release notes, under Updating to this version.

<!-- 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"
/>

DOM Element for Drop-in

Create a DOM container element on your checkout page where you want to render Drop-in and assign it a descriptive id.

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

note

If you are utilizing JavaScript frameworks like Vue or React, ensure that you use references rather than selectors and avoid re-rendering the DOM element.

Setup Drop-in Component

Define a global configuration object to initialize the AdyenCheckout instance. This object should include configuration settings and event handlers.

Initialize the Payment Component Example

const paymentConfiguration = {
    // Use session object from /sessioncheckout response
    session: {
        id: "CSBB1CFEEF...",
        sessionData: "Ab02b4c0!BQAB...",
    },
    environment: "test", // Change to 'live' for the live environment.
    locale: "is-IS",
    countryCode: "IS",
    // Use client key from /sessioncheckout response
    clientKey: "test_BR7ZXH7DGJEN...",
    onPaymentCompleted: (result, component) => {
        console.info(result, component);
    },
    onPaymentFailed: (result, component) => {
        console.info(result, component);
    },
};

const checkout = await AdyenCheckout(paymentConfiguration);

const dropin = new Dropin(checkout).mount("#dropin-container");

Payment Component Parameters

Parameter	Description
session	The payment session object from your call to /sessioncheckout. Contains a session.id and session.sessionData.
environment	Use test. When you are ready to accept live payments, change to live.
countryCode	Use IS.
locale	The language used in the Drop-in UI. For possible values, see the list of available languages. By default en-US.
onPaymentCompleted(result, component)	Create an event handler, called when the payment is completed.
onPaymentFailed(result, component)	Create an event handler, called when the payment failed.

Payment Flow

When Drop-in is created and mounted, the shopper uses the interface to finalize the payment. Drop-in manages the entire payment process you set up, except during redirects.

A redirect may occur during the 3DS challenge for some payment methods or issuers, but it is unlikely, most of the times will be displayed natively inside of the same page. In case it happens, you will need to handle the 3DS redirect to your website by instantiating AdyenCheckout and submitting details of the 3DS challenge.

Handling the 3DS Redirect

info

Some 3D Secure flows will redirect the shopper back to your website. When they return, display the payment result based on the result code.

// The return URL has query parameters related to the payment session.
https://www.your-ecommerce-website.com/straumur_additional_details?sessionId=CSD9CAC34EBAE225DD&redirectResult=X6XtfGC3!Y...

To retrieve the result code, you will need to create an instance of Adyen Checkout using the sessionId value you extracted and submit the redirectResult as such:

const checkout = await AdyenCheckout(configuration);
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.

Payment Outcome

Once the Drop-in component has processed the payment, you should inform the shopper of the payment status. Straumur will notify you of the payment result via a webhook.

Payment Result Before Webhook

To retrieve the payment result before receiving the webhook notification, follow these steps:

1. Optain the session.id from the /sessioncheckout response.
2. Retrieve sessionResult from the onPaymentCompleted or onPaymentFailed event.
3. Use both pieces of information to check the current payment status by following the Checkout Status Request.