Integrate QuickForms with Adyen Payments. Create payment forms using the new Dropin.js SDK to securely collect your customer’s card information without you needing to handle sensitive card data.

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)

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.
     • 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.
     • Placeholders: This field let you specify the sample values you want to appear for card detail input fields in JSON format.
4. Click Create.