952ae27819
* Creating separate card-with-installments in Cards playground * New unit test for validateForm * Expanded test for validateForm * setFocusOnFrame, improved types * setFocusOnFrame unit test, first draft * setFocusOnFrame unit test, final * postMessageToIframe unit test * processBrand unit test * processAutoComplete unit test * processAutoComplete unit test - removed logs * postMessageToAllIframes unit test * isConfigured unit test - final * handleIframeConfigFeedback unit test * handleFocus unit test * handleOnBinValue unit test * Don't bother testing console.log lines * Removing this keyword from handleFocus function * handleValidation unit test * handleEncryption unit test - first draft * handleEncryption unit test - final * Added boolean onlyShowCard to easily turn of all other card examples in the Cards playground * wireframe for handleBrandFromBinLookup.test.ts * handleBrandFromBinLookup.test.ts - first draft * handleBrandFromBinLookup.test.ts - final * Expanded number of tests in initCSF.test.tsx * createSecuredFields.test.tsx - first draft * createSecuredFields.test.tsx - second draft * createSecuredFields.test.tsx - final version * createSecuredFields.test.tsx - testing that promise resolves * createSecuredFields.test.tsx - testing that promise rejects * Created createCardSecuredFields.test.ts to catch some edge cases in createSecuredFields functionality * handleTab.test.ts - first draft * handleTab.test.ts - final draft * handleTab.test.ts - funnel tests through the expected entry point (handleSFShiftTab), to maximise coverage * handleIOSTouchEvents.test.ts - first draft * handleIOSTouchEvents.test.ts - second draft * handleIOSTouchEvents.test.ts - cleaned up code * handleIOSTouchEvents.test.ts - properly testing keypadFix scenario * tidying up "partial" tests: cleaning up callbacks, using constants * handleIOSTouchEvents.test.ts - adding final tests * Removing some console.logs * Cleaning up SecuredFields constants
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
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 <script> tag
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
.envfile on your project's root folder following the example inenv.defaultand fill in the environment variables. - Install the dependencies by running:
yarn install
- If you are running the project by the first time, run the build script
yarn build
- 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 main branch. We aim to keep main 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.