Adyen Add-On

  1. Introduction
  2. Install Adyen Add-On
  3. Create a Payment Form
  4. Get your API Keys from your Adyen account
  5. Set Up Payment Forms with your Adyen account

Introduction

The Adyen Add-On is a premium one, you can buy it on our landing page. Thank you!

Easy Forms Adyen Payments Add-On allows you integrate Easy Forms with Adyen Payments. With this add-on you can create payment forms by using the new Dropin.js SDK to create a payment form that securely collects your customer’s card information without you needing to handle sensitive card data.

Install Adyen Add-On

The Adyen Add-On installing process is very simple, same to any other Add-On. To install the Adyen Add-On follow the documentation to install an Add-On from the Add-On Manager.

Create a Payment Form

Forms are created through the Form Builder. You just need to drag and drop the fields your form needs and add an HTML Snippet Field with the following content:

{{ADYEN}}

Then, from the Adyen Add-On UI you can select the fields that will collect the necessary information to pay in Adyen. For example, price, quantity, etc.

Get your API Keys from your Adyen account

Now that you have your form, let's integrate it with your Adyen account. For this you must get the following information from your Adyen Account:

  1. Api Key
  2. Origen Key
  3. Loading Context
  4. Merchant Account
  5. Live Url Prefix (Required to pass a production and receive live payments)

Here are the steps your must follow to get the required information.

Note: Take into consideration that you can create a Test Account to test your forms and payments, then you can change your Keys and Environment to pass to production and receive Live payments.

Set Up Payment Forms with your Adyen account

To create a Adyen configuration, you must perform the following steps

  1. Go to the Add-Ons Manager and click on Adyen.
  2. Click the Setup a Payment Form button.

  3. A form used to configure the payment process will appear:

    • Form: Required. It is the form you'll integrate with your Adyen account.
    • Status: Allows to disable the Adyen configuration.
    • Live: Enable this option when you are ready to pass a "Production".
    • Api Key: Required. Api Credential.
    • Origin Key: Required. Api Credential.
    • Loading Context: Required. Enter your Test or Live loading context.
    • Live Url Prefix: Required only when you want to pass your form to Production.
    • Merchant Account: Required. Your Adyen Merchant Account ID.
    • Opt-In Condition: Enable a conditional logic to only accept payments when a condition is met.
    • Items: Each item represents a product or service that will be detailed on the Adyen website. It's composed of:
      • Description: Describes your product or service.
      • Price: It's the form field used to collect the product price.
      • Quantity: It is the form field to collect the number of products. The number of products is multiplied by the price of each product, to get the sub-total transaction. If you don't select any fields, the amount used is going to be 1.
    • Credit Card Field Settings: Is a group of fields that let you customize how your customers see your Credit Card field and share their information. You can set:
      • Label: Text to identify your credit card.
      • Locale: The language of your Credit Card field. By default, en_US. Available Options
      • Currency: To change the transaction currency.
      • Dom Element: To change the HTML div ID.
      • Hide Label: Enable to hide the CC label.
      • Required: Enable to accept payments only. Submissions without payments, won't be accepted.
      • Store Detail: Enable to store Customer information for use it in a future transaction.
      • Holder Name: Enable to display the Cardholder name.
      • Styles: This field let you customize the Credit Card Field appearance by using CSS properties in JSON format. Click here to get more details.
      • Placeholders: This field let you specify the sample values you want to appear for card detail input fields in JSON format. Click here to get more details.

  4. Click Create.