To ensure PCI compliance when you build your own cards payment form, use our client-side solutions to help encrypt card details.
Build your own UI for the card payment form, and then use our Custom Card Web Component to collect, validate, and encrypt your shopper's card details. The Component renders card input fields in iframes served by Adyen.
If you prefer not to build your own card payment form, use Drop-in or Card Component for web, iOS, Android, React Native, or Flutter instead.
Requirements
Requirement | Description |
---|---|
Integration type | Make sure that you have built an API-only integration. |
Setup steps | Before you begin, add the cards that you want to support in your test Customer Area. |
Show the available cards in your payment form
For information about the supported locations and currencies for each card, refer to Payment methods.
Specify in your /paymentMethods request a combination of countryCode and amount.currency, and use the /paymentMethods response to determine which cards are available to the shopper. For more information, refer to our API-only integration guide.
Next, use our client-side solutions to validate and encrypt your shopper's card details. Select the platform below:
The Custom Card Component renders card input fields in iframes served by Adyen. Use this to collect, validate, and encrypt your shopper's card details.
-
Install the Custom Card Component. Either install the Adyen Web Node package or use a
<script>
tag:-
npm (recommended)
a. Install the Adyen Web Node package:
Expand viewCopy link to code blockCopy codenpm install @adyen/adyen-web --save
b. Import Adyen Web into your application:
Expand viewCopy link to code blockCopy codeimport { AdyenCheckout } from '@adyen/adyen-web'; import '@adyen/adyen-web/styles/adyen.css'; -
Script
a. Include the following script in the
<body>
above any other JavaScript in your checkout page:We recommend that you also validate the Subresource Integrity (SRI) hash, which we provide for each version of our JavaScript and CSS files. You can find the SRI hashes in our release notes, under Updating to this version.
<script src="https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/{VERSION}/adyen.js" integrity="sha384-KF6Y8NQXGnIuzqJn5rcqCe6dMy7gBWobcIKr1BmIaz6pOeBAV0hrHBBMbHC/inHu" crossorigin="anonymous"></script> <!-- Adyen provides the SRI hash that you include as the integrity attribute.--> <!-- Refer to our release notes to get the SRI hash for the specific version: https://docs.adyen.com/online-payments/release-notes --> b. Use the following CSS file:
<link rel="stylesheet" href="https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/{VERSION}/adyen.css" integrity="sha384-uwMmo3xJR0e9jI+Oi5kzu43ShY0pXrb3auIlCjLjMNtl0X8Nat55eXNqwj8xU6H9" crossorigin="anonymous"> <!-- Adyen provides the SRI hash that you include as the integrity attribute. --> <!-- Refer to our release notes to get the SRI hash for the specific version: https://docs.adyen.com/online-payments/release-notes --> You can add your own styling by overriding the rules in this CSS file.
-
-
Create a configuration object, specifying the following parameters:
Parameter Description locale
The shopper's locale. This is used to set the language rendered in the Components. For a list of supported locales, see Localization. clientKey
A public key linked to your API credential, used for client-side authentication. environment
Use test. When you are ready to accept live payments, change the value to match your live endpoints:
- Europe: live
- Australia: live-aus
- US: live-us
- Asia Pacific South East: live-apseonSubmit
Specify a function to handle the onSubmit
event that the Component calls after the shopper selects the Pay button.function handleOnSubmit(state, component) { state.isValid // True or false. Specifies if all the information that the shopper provided is valid. state.data // Provides the data that you need to pass in the `/payments` call. component // Provides the active component instance that called this event. } const configuration = { locale: "en_US", environment: "test", clientKey: "YOUR_CLIENT_KEY", onSubmit: handleOnSubmit };
-
Use the configuration object to create an instance of
AdyenCheckout
. In Components versions 5.0.0 or later, the creation ofAdyenCheckout
is asynchronous:-
v5.0.0 or later:
const checkout = await AdyenCheckout(configuration);
-
before v5.0.0:
const checkout = new AdyenCheckout(configuration);
-
-
Implement callbacks to handle the following events triggered by the Custom Card Component:
Event | Description |
---|---|
onAutoComplete |
Provides the card holder name when a shopper uses Chrome or Safari's autofill function to fill out the card holder name field. |
onSubmit |
Called when the shopper selects the Pay button. Here you have the option to override your main Adyen Checkout configuration. v5.0.0 or later you can also watch
state.errors
and call the custom card specific setErrors function. |
onLoad |
Called when all the card input fields have been created but are not yet ready to use. |
onConfigSuccess |
Called when the card input fields are ready to use. |
onFieldValid |
Called when the input in a field becomes valid. Also called when the input changes and becomes invalid. For the card number field, it returns the following: - endDigits : the last four digits of the card number. - v5.10.0 or later issuerBin : the first six or eight digits of the card number. |
onBrand |
Called when the card brand is detected. |
onError |
Called when card number or expiry date is invalid, or a field is incomplete field. Called again when errors are cleared. v5.0.0 or later: the onError handler is no longer used only for custom card component related errors. You can also watch state.errors from the onSubmit event. |
onFocus |
Called when a field gains focus. |
onBinValue |
Called when the shopper enters the card number. Returns binValue : the first six digits of the card number. Requires the client key for client-side authentication. |
onBinLookup v4.6.0 or later |
Called when the shopper enters the card number. Requires a minimum of 11 digits of the card number to be entered. Returns the following: - type : type of the card. - brands : brands on the card. - supportedBrands : the brands you support. - detectedBrands : brands detected on the card. - v5.30.1 or later issuingCountryCode : the two-letter country code of the country where the card was issued.- v5.43.0 or later paymentMethodVariant : the card type variant. |
-
Add the Custom Card Component to your payment form:
a. Create a DOM element, placing it where you want the card input fields to be rendered:
<div id="customCard-container"> <label> <span>Card number:</span> <span data-cse="encryptedCardNumber"></span> </label> <label> <span>Expiry date:</span> <span data-cse="encryptedExpiryDate"></span> </label> <label> <span>CVV/CVC:</span> <span data-cse="encryptedSecurityCode"></span> </label> </div> b. Create an instance of the Custom Card Component, and mount it. You can also include optional configuration.
Field Description Default ariaLabels
Specify aria-label
attributes for the input fields for web accessibility.
v4.0.0 or later: Use translation fields instead.Refer to Default labels. autoFocus
Automatically move the focus from date field to the CVC field once a date has been entered. Starting v5.8.0 the focus changes to the date field when the entered card number reaches the expected length. true brands
Array of card brands that will be recognized by the component. For a list of possible values, refer to Supported card types. ['mc','visa','amex']
styles
Set a style object to customize the input fields. For a list of supported properties, refer to Styling. Refer to Default styles. minimumExpiryDate
v4.3.0 or laterIf a shopper enters a date that is earlier than specified here, they will see the following error:
"Your card expires before check out date."
Format:mm/yy
const customCard = new CustomCard(checkout, { // Optional configuration type: 'card', brands: ['mc', 'visa', 'amex', 'bcmc', 'maestro'], styles: { error: { color: 'red' }, validated: { color: 'green' }, placeholder: { color: '#d8d8d8' } }, // Only for Web Components before 4.0.0. // For Web Components 4.0.0 and above, configure aria-label attributes in translation files ariaLabels: { lang: 'en-GB', encryptedCardNumber: { label: 'Credit or debit card number field', iframeTitle: 'Iframe for secured card number', error: 'Message that gets read out when the field is in the error state' } }, // Events onSubmit: function() {}, onValid : function() {}, onLoad: function() {}, onConfigSuccess: function() {}, onFieldValid : function() {}, onBrand: function() {}, onError: function() {}, onFocus: function() {}, onBinValue: function(bin) {}, onBinLookup: function(callbackObj: CbObjOnBinLookup) {} }).mount('#customCard-container'); When the shopper enters their card details, the Component calls the
onSubmit
event, which contains astate
. -
If
state.isValid
is true, pass thestate.data
to your server. The data includes the following:-
Encrypted card details.
Encrypted card detailsExpand viewCopy link to code blockCopy code{ "encryptedCardNumber":"adyenjs_0_1_18$MT6ppy0FAMVMLH...", "encryptedExpiryMonth":"adyenjs_0_1_18$MT6ppy0FAMVMLH...", "encryptedExpiryYear":"adyenjs_0_1_18$MT6ppy0FAMVMLH...", "encryptedSecurityCode":"adyenjs_0_1_18$MT6ppy0FAMVMLH...", } -
Device characteristics and other data that we use to detect fraudulent payment activity, and mitigate fraud.
User dataExpand viewCopy link to code blockCopy coderiskData: { "clientData": "eyJ0cmFuc1N0YXR1cy...I6IlkifQ==" }
Include the full
data
object when you make a payment. -
Styling card input fields
If you want to change the styling of the card number, CVC, and expiry date of a card:
-
Create an object and set the following CSS values:
You can provide styling for the following:
base
: Base styling applied to the iframe. All styling extends from this style.error
: Styling applied when a field fails validation.placeholder
: Styling applied to the field's placeholder values.validated
: Styling applied once a field passes validation.
Here is an example style object:
// Define style object var styleObject = { base: { color: 'black', fontSize: '16px', fontSmoothing: 'antialiased', fontFamily: 'Helvetica' }, error: { color: 'red' }, placeholder: { color: '#d8d8d8' }, validated: { color: 'green' } }; -
Style the elements with the following properties. These properties map to CSS properties and accept allowed CSS values:
JavaScript CSS background
background
caretColor
caret-color
color
color
display
display
font
font
fontFamily
font-family
fontSize
font-size
fontSizeAdjust
font-size-adjust
fontSmoothing
font-smoothing
fontStretch
font-stretch
fontStyle
font-style
fontVariant
font-variant
fontVariantAlternates
font-variant-alternates
fontVariantCaps
font-variant-caps
fontVariantEastAsian
font-variant-east-asian
fontVariantLigatures
font-variant-ligatures
fontVariantNumeric
font-variant-numeric
fontWeight
font-weight
letterSpacing
letter-spacing
lineHeight
line-height
mozOsxFontSmoothing
moz-osx-font-smoothing
mozTransition
moz-transition
outline
outline
opacity
opacity
padding
padding
textAlign
text-align
textShadow
text-shadow
transition
transition
webkitFontSmoothing
webkit-font-smoothing
webkitTransition
webkit-transition
-
Add the styling to the configuration object of your
AdyenCheckout
instance.Configuration object with card stylingExpand viewCopy link to code blockCopy codeconst configuration = { //...other configuration parameters paymentMethodsConfiguration: { card: { styles: styleObject, }, //Required to apply styling to stored cards. storedCard: { styles: styleObject, } }, };
Default styles and labels
If you do not provide configuration for styles and labels, the Component will use the following default properties.
{ styles: { base: { color: "#001b2b", fontSize: "16px", fontWeight: "400" }, placeholder: { color: "#90a2bd", fontWeight: "200" }, error: { color: "#001b2b" } }, ariaLabels: { lang: "en-GB", encryptedCardNumber: { label: "Credit or debit card number", iframeTitle: "Iframe for card data input field" }, encryptedExpiryDate: { label: "Credit or debit card expiration date", iframeTitle: "Iframe for card data input field" }, encryptedSecurityCode: { label: "Iframe for card data input field" } } }
Supported card types in web
Use the values in this list when specifying card types in the brands
array. If card types are not provided, the configuration defaults to ['mc','visa','amex']
.
Card Type | Description |
---|---|
amex | Amex |
argencard | Argencard |
bcmc | Bancontact/Mister Cash |
bijcard | de Bijenkorf Card |
cabal | Cabal |
cartebancaire | Carte Bancaires |
codensa | Codensa |
cup | China Union Pay |
dankort | Dankort |
diners | Diners Club |
discover | Discover |
electron | Electron |
elo | ELO |
forbrugsforeningen | Forbrugsforeningen |
hiper | HiperCard |
hipercard | HiperCard |
jcb | JCB |
karenmillen | Karen Millen GiftCard |
laser | Laser |
maestro | Maestro |
maestrouk | Maestro UK |
mc | Mastercard |
mcalphabankbonus | Alpha Bank Mastercard Bonus |
mir | MIR |
naranja | Naranja |
oasis | Oasis GiftCard |
rupay | RuPay |
shopping | Tarjeta Shopping |
solo | Solo |
troy | Troy |
uatp | UATP |
visa | Visa |
visaalphabankbonus | Alpha Bank Visa Bonus |
visadankort | Visa Dankort |
warehouse | Warehouse GiftCard |
Make a payment
From your server, make a POST /payments request, specifying:
Parameter | Description |
---|---|
amount |
The currency of the payment and its value in minor units. |
reference |
Your unique reference for this payment. |
paymentMethod |
Object that contains the encrypted card details from the client side, the card holder's name (if you collected it), and a type parameter set to scheme. |
returnUrl |
URL to where the shopper should be taken back to after a redirection. The URL can contain a maximum of 1024 characters and should include the protocol: http:// or https:// . You can also include your own additional query parameters, for example, shopper ID or order reference number. If the URL to return to includes non-ASCII characters, like spaces or special letters, URL encode the value. The URL must not include personally identifiable information (PII), for example name or email address. |
merchantAccount |
Your merchant account name. |
riskData |
Device characteristics and other data that we use to detect fraudulent payment activity, and mitigate fraud. If you collect additional data from other pages on your website, that data is also included in this object. |
curl https://checkout-test.adyen.com/v71/payments \ -H 'x-api-key: ADYEN_API_KEY' \ -H 'content-type: application/json' \ -d '{ "amount":{ "currency":"USD", "value":1000 }, "reference":"YOUR_ORDER_NUMBER", "paymentMethod":{ "type": "scheme", "encryptedCardNumber": "test_4111111111111111", "encryptedExpiryMonth": "test_03", "encryptedExpiryYear": "test_2030", "encryptedSecurityCode": "test_737", "holderName": "S. Hopper" }, "returnUrl": "https://your-company.com/...", "merchantAccount":"ADYEN_MERCHANT_ACCOUNT", "riskData": { "clientData": "eyJ0cmFuc1N0YXR1cy...I6IlkifQ==" } }'
The /payments response contains:
- pspReference: Our unique identifier for the transaction.
resultCode
: Use this to present the payment result to your shopper.merchantReference
: Thereference
from the /payments request.additionalData
: Additional information about the transaction.
To specify the fields that you want to receive inadditionalData
, log in to your Customer Area, and go to Developers > Additional data.
{ "additionalData": { "cardSummary": "1111" }, "pspReference": "851572424333194G", "resultCode": "Authorised", "merchantReference": "YOUR_ORDER_NUMBER" }
Present the payment result
Use the resultCode from the /payments response to present the payment result to your shopper. You will also receive the outcome of the payment asynchronously in a webhook.
For card payments, you can receive the following resultCode
values:
resultCode | Description | Action to take |
---|---|---|
Authorised | The payment was successful. | Inform the shopper that the payment has been successful. If you are using manual capture, you also need to capture the payment. |
Cancelled | The shopper cancelled the payment. | Ask the shopper whether they want to continue with the order, or ask them to select a different payment method. |
Error | There was an error when the payment was being processed. For more information, check the
refusalReason
field. |
Inform the shopper that there was an error processing their payment. |
Refused | The payment was refused. For more information, check the
refusalReason
field. |
Ask the shopper to try the payment again using a different payment method. |
Additional resultCode
values are possible in case of the 3D Secure authentication flow. For more information, refer to Result codes.
Showing co-badged cards
Regulatory guidelines for some regions require the following:
- When a shopper presents a co-badged card, they must be allowed to select their preferred brand.
- If the shopper selected a preferred brand, the payment must be completed with this brand.
To comply with these guidelines:
- Use the
onBinLookup
event to detect if a card is co-badged. - If a card is co-badged, present all supported brands to the shopper, allowing them to click on the brand they want to pay with. Each of the presented brands should have an
alt
or adata-value
attribute. - If the shopper makes a choice, pass the corresponding event to the
dualBrandingChangeHandler
function.
The shopper's selected brand will then be included in thestate.data
from the Component.
The following example shows how to present brand logos for a co-badged Bancontact/Maestro card:
function onBinLookup(pCallbackObj) { // Handle a dual branded result if (pCallbackObj.supportedBrandsRaw?.length > 1) { onDualBrand(pCallbackObj); } } // Implement dual branding function onDualBrand(pCallbackObj) { const logoOne = document.getElementById('pmImageDual1'); const logoTwo = document.getElementById('pmImageDual2'); const supportedBrands = pCallbackObj.supportedBrandsRaw; //Set one brand icon, add alt or data-value attributes; add an event listener logoOne.setAttribute('src', supportedBrands[0].brandImageUrl); logoOne.setAttribute('alt', supportedBrands[0].brand); logoOne.setAttribute('data-value', supportedBrands[0].brand); logoOne.addEventListener('click', dualBrandListener); // Set the other brand icon, add alt or data-value attributes; add an event listener logoTwo.setAttribute('src', supportedBrands[1].brandImageUrl); logoTwo.setAttribute('alt', supportedBrands[1].brand); logoTwo.setAttribute('data-value', supportedBrands[1].brand); logoTwo.addEventListener('click', dualBrandListener); }
Implementing dualBrandListener
to pass the selected attributes to to dualBrandingChangeHandler
:
function dualBrandListener(e) { securedFields.dualBrandingChangeHandler(e); }
Present debit and credit cards separately
This requires Checkout API v53 and later.
In some scenarios, you may want to present your shoppers with separate payment forms for debit cards and credit cards. Some examples include:
- If you accept payments in Sweden, you need to present debit cards before credit cards in order to comply with local legislation.
- In Brazil, many shoppers use Combo cards, allowing for both debit and credit transactions. Having a separate form for Debit Card and Credit Card gives your shoppers a clear indication of whether they are making a debit or credit transaction.
For more details, see the corresponding sections about Brazil and Sweden.
To show debit and credit cards separately:
-
If you are using the /paymentMethods endpoint to get a list of payment methods to present on the client side, include:
- splitCardFundingSources: Set this to true to receive separate objects for credit and debit cards in the response.
The following example shows how to get the available payment methods for a shopper in the Netherlands, making a EUR 47.00 payment.
/paymentMethods requestExpand viewCopy link to code blockCopy codecurl https://checkout-test.adyen.com/v68/paymentMethods \ -H 'x-api-key: ADYEN_API_KEY' \ -H 'content-type: application/json' \ -d '{ "merchantAccount": "YOUR_MERCHANT_ACCOUNT", "countryCode": "NL", "amount": { "currency": "EUR", "value": 4700 }, "splitCardFundingSources": true }' The response includes the list of available payment methods, with debit and credit cards split into separate objects.
ResponseExpand viewCopy link to code blockCopy code{ ... "paymentMethods": [ { "brands": [ "mc", "visa", "amex" ], ... "fundingSource": "credit", "name": "Credit Card", "type": "scheme" }, { "brands": [ "mc", "visa", "amex" ], "fundingSource": "debit", "name": "Debit Card", "type": "scheme" } ] } - splitCardFundingSources: Set this to true to receive separate objects for credit and debit cards in the response.
-
When the shopper selects to pay with either a debit or credit card, proceed to make a POST /payments request and include:
paymentMethod.fundingSource
: Set this to either credit or debit.
The following example shows how you can make a payment request for a debit card.
/payments requestExpand viewCopy link to code blockCopy codecurl https://checkout-test.adyen.com/v68/payments \ -H 'x-api-key: ADYEN_API_KEY' \ -H 'content-type: application/json' \ -d '{ "amount":{ "currency":"EUR", "value":4700 }, "reference":"YOUR_ORDER_NUMBER", "paymentMethod": { "type": "scheme", "encryptedCardNumber": "adyenjs_0_1_18$MT6ppy0FAMVMLH...", "encryptedExpiryMonth": "adyenjs_0_1_18$MT6ppy0FAMVMLH...", "encryptedExpiryYear": "adyenjs_0_1_18$MT6ppy0FAMVMLH...", "encryptedSecurityCode": "adyenjs_0_1_18$MT6ppy0FAMVMLH...", "holderName": "S. Hopper", "fundingSource": "debit" }, "additionalData": { "overwriteBrand": true }, "returnUrl": "https://your-company.com/...", "merchantAccount":"YOUR_MERCHANT_ACCOUNT" }'
Brazil
For debit transactions, we highly recommend using 3D Secure and Automatic Capture due to some issuers' restrictions.
Sweden
When accepting payments in Sweden, present debit before credit cards, and label the forms clearly in order to comply with Swedish legislations.
Stored card payments
Adyen's tokenization service allows you to securely store shopper's card details for recurring payments. To make recurring payments, you first need to create a shopper token, and then use the token to make future payments for the shopper.
Create a token
To store shopper's card details, include in your /payments request:
storePaymentMethod
: true- shopperReference: Your unique identifier for the shopper.
- recurringProcessingModel: Defines the recurring payment type.
The /payments response contains:
recurringDetailReference
: This is the token that you'll need to make recurring payments for this shopper.
The recurringDetailReference
is also contained in the AUTHORISATION webhook that you will receive for this payment.
Show a stored card in your payment form
-
To get the stored payment methods for a shopper, include in your /paymentMethods request:
- shopperReference: The unique shopper identifier that you specified when creating the token.
The /paymentMethods response includes a
storedPaymentMethods
array containing the stored payment methods for this shopper. ThestoredPaymentMethods
array contains theid
that you need when making the payment.
If your Components version is 3.2.0 or lower, use the
oneClickPaymentMethods
array and therecurringDetailReference
instead.{ ... "storedPaymentMethods":[ { "brand":"visa", "expiryMonth":"10", "expiryYear":"2020", "holderName":"John Smith", "id":"8415718415172204", "lastFour":"1111", "name":"VISA", "supportedShopperInteractions":[ "Ecommerce", "ContAuth" ], "type":"scheme" }, { "brand":"visa", "expiryMonth":"08", "expiryYear":"2018", "holderName":"John Smith", "id":"8315720121476805", "lastFour":"0008", "name":"VISA", "supportedShopperInteractions":[ "ContAuth", "Ecommerce" ], "type":"scheme" } ] ... } - shopperReference: The unique shopper identifier that you specified when creating the token.
-
Use the Custom Card Component to collect the following details from the shopper:
Card details Example input The security code (CVV / CVC) "737" When
onSubmit
callback is triggered and ifstate.isValid
is true, get the encrypted values fromstate.data
and pass these values to your server. -
Proceed to submit a payment request from your server.
Make a payment with a token
When the shopper selects to pay, the Component calls the onSubmit
event, which contains a state.data
.
- Pass the
state.data
to your server. -
From your server, make a /payments request, specifying:
paymentMethod.storedPaymentMethodId
: Theid
from the the /paymentMethods response. This is therecurringDetailReference
that you received when creating the token.paymentMethod.encryptedSecurityCode
: Thestate.data.paymentMethod.encryptedSecurityCode
from theonSubmit
event.
shopperReference
: The unique shopper identifier that you specified when creating the token.shopperInteraction
: ContAuth.recurringProcessingModel
: CardOnFile.
curl https://checkout-test.adyen.com/v70/payments \ -H 'x-API-key: ADYEN_API_KEY' \ -H 'Content-Type: application/json' \ -d '{ "amount":{ "value":2000, "currency":"USD" }, "paymentMethod":{ "type":"scheme", "storedPaymentMethodId":"8415718415172204", "encryptedSecurityCode":"adyenjs_0_1_18$MT6ppy0FAMVMLH..." }, "reference":"YOUR_ORDER_NUMBER", "merchantAccount":"YOUR_MERCHANT_ACCOUNT", "returnUrl":"...", "shopperReference":"YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j", "shopperInteraction":"ContAuth", "recurringProcessingModel":"CardOnFile" }'
The /payments response contains:
resultCode
: Use this to inform the shopper about the payment status.
{ "pspReference": "8815329842815468", "resultCode": "Authorised" }
You can also use tokens to make shopper-not-present payments for subscriptions or contracts. For more information, refer to Making a payment for a subscription or contract.
Collecting additional data to detect fraud
For Web Drop-in/Components integrations, you can optionally collect data to detect fraud outside of the checkout page, in addition to the data that you send when the shopper checks out. We recommend that you collect data about the shopper's activity on every page of your site.
To do this, add the following script to any of your web pages.
<script src="https://checkoutshopper-live.adyen.com/checkoutshopper/assets/js/datacollection/datacollection.js"></script>
When the shopper checks out, the Custom Card Component sends all of the data collected by the script to Adyen. This includes the data from the checkout page as well as any data collected from other web pages that contain the script.
Test and go live
If your client-side integration isn't ready, you can test API requests with encrypted card details by adding a test_
prefix to the test card details.
v5.20.0 or later: Card input fields use JSON Web Encryption, so your test environment must be a secure context. Use either a local or https
domain, and add it to your allowed origins.
Before making live card payments:
-
Test your integration using our test card numbers. You can check the status of test payments in your Customer Area > Transactions > Payments.
-
Add the cards that you want to accept in your live Customer Area.
-
Before you can start accepting card payments in the live environment, you need to assess your PCI DSS compliance and submit the required Self-Assessment Questionnaire A document. For more information, refer to PCI DSS compliance guide.