@adyen/adyen-web

What is @adyen/adyen-web?

@adyen/adyen-web is a comprehensive JavaScript library for integrating Adyen's payment solutions into web applications. It provides a wide range of functionalities to handle various payment methods, including credit cards, wallets, and local payment methods. The package is designed to simplify the integration process, ensuring secure and seamless payment experiences for users.

What are @adyen/adyen-web's main functionalities?

Drop-in Integration

The Drop-in integration provides a ready-made UI for accepting payments. It supports a wide range of payment methods and handles the entire payment flow, including payment submission and additional details collection.

const AdyenCheckout = require('@adyen/adyen-web');
const checkout = new AdyenCheckout({
  clientKey: 'test_CLIENT_KEY',
  environment: 'test',
  onSubmit: (state, dropin) => {
    // Handle the payment submission
  },
  onAdditionalDetails: (state, dropin) => {
    // Handle additional details
  }
});
const dropin = checkout.create('dropin').mount('#dropin-container');

Component Integration

The Component integration allows you to integrate individual payment method components, such as credit cards, into your custom UI. This provides more flexibility and control over the payment experience.

const AdyenCheckout = require('@adyen/adyen-web');
const checkout = new AdyenCheckout({
  clientKey: 'test_CLIENT_KEY',
  environment: 'test'
});
const card = checkout.create('card').mount('#card-container');

Handling Payment Methods

This feature allows you to retrieve and handle the available payment methods for a specific merchant account. It provides a list of payment methods that can be displayed to the user.

const AdyenCheckout = require('@adyen/adyen-web');
const checkout = new AdyenCheckout({
  clientKey: 'test_CLIENT_KEY',
  environment: 'test'
});
checkout.paymentMethodsResponse.then(paymentMethodsResponse => {
  // Handle the available payment methods
  console.log(paymentMethodsResponse);
});

Other packages similar to @adyen/adyen-web

stripe

Stripe is a popular payment processing library that provides a wide range of payment solutions for web and mobile applications. It offers similar functionalities to @adyen/adyen-web, including support for various payment methods, secure payment processing, and customizable UI components. Stripe is known for its ease of use and extensive documentation.

braintree-web

Braintree is a full-stack payment platform that offers web and mobile payment solutions. The braintree-web package provides functionalities similar to @adyen/adyen-web, including support for multiple payment methods, secure transactions, and customizable payment forms. Braintree is a PayPal service and is known for its robust security features and developer-friendly APIs.

paypal-checkout-components

PayPal Checkout Components is a library for integrating PayPal's payment solutions into web applications. It offers functionalities similar to @adyen/adyen-web, such as support for various payment methods, secure payment processing, and customizable UI components. PayPal is widely recognized and trusted by users, making it a popular choice for online payments.

README

Adyen Web

Adyen Web provides you with the building blocks to create a checkout experience for your shoppers, allowing them to pay using the payment method of their choice.

You can integrate with Adyen Web in two ways:

• Web Drop-in: an all-in-one solution, the quickest way to accept payments on your website.
• Web Components: one Component per payment method and combine with your own payments form logic.

Prerequisites

• Adyen test account
• API key
• Client key

Installation

We only provide full support when you use one of these methods of installation.

Node package manager

• Install the Adyen Web Node package:

npm install @adyen/adyen-web --save

• Import Adyen Web into your application:

import AdyenCheckout from '@adyen/adyen-web';
import '@adyen/adyen-web/dist/adyen.css';

Using a

You can also import Adyen Web using a <script> tag, as shown in the Web Components integration guide.

Development

To run the development environment:

• Clone this repository.
• Create a .env file on your project's root folder following the example in env.default and fill in the environment variables.
• Install the dependencies by running:

yarn install

• Run the development environment, which starts a server listening on http://localhost:3020:

yarn start

Analytics and data tracking

Starting v5.16.0 the Drop-in and Components integrations contain analytics and tracking features that are turned on by default. Find out more about what we track and how you can control it.

Contributing

We merge every pull request into the master branch. We aim to keep master in good shape, which allows us to release a new version whenever we need to.

Have a look at our contributing guidelines to find out how to raise a pull request.

See also

• Why we open sourced Adyen Web
• Complete documentation for Adyen Web
• API Explorer
• Example integrations
• Adyen Components JS Sample Code

Support

If you have a feature request, or spotted a bug or a technical problem, create an issue here.

For other questions, contact our support team.

License

This repository is available under the MIT license.