isabella232 / adyen-vue-online-payments

Accept payments on your Vue.js/Express-based website with cards, wallets, and key local payment methods

Adyen online payment integration demos

This repository includes examples of PCI-compliant UI integrations for online payments with Adyen. Within this demo app, you'll find a simplified version of an e-commerce website, complete with commented code to highlight key features and concepts of Adyen's API. Check out the underlying code to see how you can integrate Adyen to give your shoppers the option to pay with their preferred payment methods, all in a seamless checkout experience.

Supported Integrations

Vue.js + Express demos of the following client-side integrations are currently available in this repository:

• Drop-in
• Component
  • ACH
  • Alipay
  • Boleto Bancário
  • Card (3DS2)
  • Dotpay
  • giropay
  • iDEAL
  • Klarna (Pay now, Pay later, Slice it)
  • SEPA Direct Debit
  • SOFORT

Each demo leverages Adyen's API Library for Node.js (GitHub | Docs).

Requirements

Node.js 8.9+

Installation

1. Clone this repo:

git clone https://github.com/adyen-examples/adyen-vue-online-payments.git

2. Navigate to the root directory and install dependencies:

npm install

Usage

1. Create a ./.env file with your API key, Client Key, and merchant account name (all credentials are in string format):

API_KEY="your_API_key_here"
MERCHANT_ACCOUNT="your_merchant_account_here"
CLIENT_KEY="your_client_key_here"

2. Start the server:

npm run dev

3. Visit http://localhost:8080/ (./pages/index.vue) to select an integration type.

To try out integrations with test card numbers and payment method details, see Test card numbers.

Contributing

We commit all our new features directly into our GitHub repository. Feel free to request or suggest new features or code changes yourself as well!

Find out more in our Contributing guidelines.

License

MIT license. For more information, see the LICENSE file in the root directory.