Adyen Web Components

Use Adyen Web Components with Recurly.js to collect payment state data on your site, generate a Recurly.js token, and submit it to the v3 API for one-time and recurring charges.

Adyen Web Components are customizable UI elements for payment collection. When paired with Recurly.js, you collect Adyen state data on your site, pass it into Recurly.js to generate a token, and submit that token to Recurly's v3 API for one-time and recurring payment processing.

Available on all Recurly plans

1Definition 2Key benefits 3Key details

Prerequisites and limitations

Requires a working Recurly.js integration and v3 API integration
Does not support Adyen's app (iOS/Android) components or React/Native SDKs — only Web Components for the listed payment methods are supported
100% coupons and account credits: because gateway communication is required during initial setup, free trials are recommended in these cases to avoid future payment failures

Definition

Adyen Web Components are customizable UI elements for collecting payment details. When integrated with Recurly.js, they collect Adyen state data on your site, pass it into Recurly.js to generate a token_id, and submit that token to Recurly via the v3 API. Recurly unpacks the encrypted Adyen data, sends it to Adyen to authorize and store the payment details, and returns a reusable token for future charges and renewals.

Key benefits

Branded checkout Use Adyen's Web Components to deliver a consistent, on-brand payment UI directly within your own site.

Seamless tokenization Recurly.js converts Adyen state data into a reusable payment token for future renewals and one-time charges where supported.

Flexible billing updates Customers can update payment details via Adyen Web Components or any other Recurly payment solution — Checkout, Hosted Payment Pages, or Recurly.js.

Key details

Supported features

Build a checkout flow with Adyen Web Components and pass the component's state data into Recurly.js. The generated token_id is submitted to the v3 API — Recurly unpacks the encrypted Adyen data and forwards the state data to Adyen to authorize and store payment details.

Customers can update billing information through Adyen Web Components or via Recurly's other payment solutions — Checkout, Hosted Payment Pages, or Recurly.js.

Explore Adyen's live demo at Adyen Web Components Demo. For full implementation details, see the Developer Hub guide.

Supported payment methods

Category	Payment methods
Cards and wallets	Cards, Apple Pay, Google Pay, Cash App Pay, PayPay
Direct debit	ACH, SEPA, BACS, iDEAL, Bancontact (Bancontact requires SEPA for renewals)

NoteNot all Adyen payment methods are supported. Contact [email protected] for availability details.

Updated about 2 months ago

Did this page help you?