Spektrix Payments
Going live with the new payment component
A new payment component is required for Spektrix Payments. This provides an improved UX/UI but will also be required to support any additional payment methods that we introduce, such as Apple Pay and Google Pay.
The new payment component will appear in the payments section of the Express Checkout and My Account when adding a card. This is not available in the Classic Checkout.
An example of the new payment component with the default styling can be found on our test system apitesting. To view it, visit https://system.spektrix.com/apitesting/website/eventlist.aspx and navigate all the way until the last step of the checkout.
Styling the payment component
The payment component comes with a default styling. If you want to customise the styling you can use the CSS classes below. These can be styled using the existing CSS file that you use for the Spektrix iframes.
These classes follow the BEM (.block__element--modifier) methodology, where state is represented by a modifier (such as --selected).
.adyen-checkout__payment-method {
/* Payment method container */
}
.adyen-checkout__payment-method--selected {
/* Payment method that has been selected */
}
.adyen-checkout__payment-method__header {
/* Payment method icon and name */
}
.adyen-checkout__payment-method__radio {
/* Radio button in payment method header */
}
.adyen-checkout__payment-method__radio--selected {
/* Selected radio button in payment method header */
}
.adyen-checkout__payment-method__name {
/* Payment method name in the payment method header */
}
.adyen-checkout__spinner__wrapper {
/* Spinning icon */
}
.adyen-checkout__button {
/* Buttons */
}
.adyen-checkout__button--pay {
/* Pay button */
}
.adyen-checkout__field {
/* Form field container */
}
.adyen-checkout__label {
/* Form label container */
}
.adyen-checkout__label__text {
/* Text element inside the form label container */
}
.adyen-checkout__input {
/* Input fields */
}
.adyen-checkout__input--error {
/* Error state for the input fields */
}
.adyen-checkout__error-text {
/* Error message text */
}
.adyen-checkout__card__cardNumber__input {
/* Input field for the card number */
}
.adyen-checkout__field--expiryDate {
/* Input field for the expiry date */
}
.adyen-checkout__field__cvc {
/* Input field for the CVC security code */
}
Going live with Apple Pay
To support Apple Pay you will need to make the below updates. These can be done before or after going live with the new payment component. The Apple Pay button will not appear until these have been implemented however the new payment component will not be impacted by this i.e. card payments can still be taken.
1. Iframe tag update
As the Spektrix checkout is embedded as an iframe, the following update is required to the Spektrix iframe tag.
- Add the attribute
allow="payment"
to the Spektrix checkout iframe tag.
<iframe
name="SpektrixIFrame"
id="SpektrixIFrame"
allow="payment"
frameborder="0"
src="https://customdomain/clientname/website/secure/checkout.aspx?resize=true"
style="width: 100%; height: 1000px;"
>
</iframe>
Note that this is only supported by Safari 17+. For older versions Apple Pay will not be supported.
2. Host the Apple domain association file
- Download and unzip the domain association file.
- Host the domain association file with the name apple-developer-merchantid-domain-association on each domain you want to use, including subdomains, under the following path:
/.well-known/apple-developer-merchantid-domain-association
This should be on the root domain or subdomain of the page in which the Spektrix iframe is hosted. - The file must:
- Have Content-Type: text/plain in the header.
- Be externally accessible.
- Not be password protected.
- Not be behind a proxy or redirect.
- Be hosted with the Unix line ending.
- See an example of a working domain association file.
- Configure your firewall's allow-list:
- Allow Apple IP Addresses for Domain Verification.
- Include out.adyen.com in your configuration to allow communication from our network.
Adyen does not provide a list of IP addresses for allow-listing, because over time the list may change for various reasons, for example, due to ISP configuration changes. If you are unable to configure your firewall with a domain allow-list, attempt to resolve Adyen IP addresses by performing a DNS lookup on out.adyen.com, and then add those IP addresses to your allow-list. Beware that you still run the risk of a disruption if the IP addresses change.