Learn how to collect shopper details using your own payment form.
If you are using our APIs to accept online payments, you will need to collect your shoppers' details depending on their selected payment method.
To collect required details from the shopper, build a payment form that's either:
- Dynamically generated: You build the form on the fly after determining the required shopper details for each transaction. The list of available payment methods and their corresponding input fields are always up-to-date.
- Hard-coded: You build a static form with the required shopper details. While this can be faster to implement, you will not be able to quickly sync with changes in the payment methods. Make sure to regularly check the required fields and to validate if the input fields in your form are up to date. We recommend this approach if you're only working with a small number of payment methods or countries.
After deciding on a form, follow the steps below to get the required fields and to collect card details.
Step 1: Determine required shopper details
To determine what you need to collect from the shopper:
countryCode: The shopper's country.
valueof the payment.
A list of available
paymentMethodswill be returned in the response. Most of these will have a
detailsarray of each payment method to determine what details you need to collect from the shopper:
key: Shopper detail you need to collect using your payments form.
type: Input type for collecting the shopper detail:
select A list displaying the options specified within the
itemsarray. Present each
namein this array to the shopper.
tel Telephone number. text Generic string.
If a payment method does not have a
detailsarray, you do not need to collect any shopper details in your form.
In the example below, for SEPA Direct Debit, you'd use text fields to collect:
sepa.ownerName: Name on the shopper's bank account.
sepa.ibanNumber: IBAN number of this account.
Step 2: Collect shopper details with Secured Fields
If you are PCI Level 1 or 2 certified you can optionally collect and submit raw card data instead. See Collecting raw card data for more information.
When the shopper enters their card details on your website, Secured Fields collects the sensitive data, and creates an encrypted version that you can safely transmit to Adyen.
To integrate Secured Fields:
Include the following script in the
<head>of your payments page:
This will embed the Secured Fields library.
<body>of your payments page, with the following
encryptedCardNumber: Card number.
encryptedExpiryMonth: Card expiry month.
encryptedExpiryYear: Card expiry year.
encryptedSecurityCode: Card security code.
These will render as iframes, where the shopper can securely enter their card details.
Add the following code to the bottom of the
originKey: Your Origin Key. To find out how to generate one, see How to get an Origin Key.
When the shopper enters their card details, Secured Fields will perform validation on the card details. When the shopper submits the payment, their card details are replaced by encrypted values. These are added to hidden
<input>fields in the
<div>that holds the
Loop through and collect the encrypted card details from the corresponding
data-csevalues. You'll use these to make the payment.
To configure how Secured Fields render in your payment form, see Configure Secured Fields.
Make a payment
Make a payment with the shopper's payment details.
Add payment methods
Learn about payment methods and how to integrate them.