Skip to main content

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. The font used will be the same as the font you have selected on your existing CSS file.

payments component

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 */
}

Previewing the payment component​

The payment component can be previewed prior to the client going live with Adyen. This allows you and the client to determine if any styling is required ahead of going live with Spektrix Payments.

new vs existing spektrix clients

The preview will only work if the client does not have Adyen configured as the primary payment service for the web channel. This means that if you are working with a client onboarding with Spektrix, this will not be needed.

To preview, use the URL parameter ?previewSpektrixPayments=true on the payment page of the Express Checkout only.

https://system.spektrix.com/{{clientname}}/website/secure/checkout/v2/payment?previewSpektrixPayments=true

This renders the payment component for a test merchant account, therefore payment cannot be taken even if using an Adyen test card. This is to avoid any orders be confirmed in the client’s system that have not been paid for.

The payment component will appear when accessing the checkout via https://system.spektrix.com, however to allow this to work on a client’s custom domain we must add the custom domain to the Adyen test environment. Contact Spektrix at support@spektrix.com if this is required.

Permissions-Policy​

If you are working with the Permissions-Policy header, you need to ensure you are not blocking payments. You can ensure that by adding the custom domain of the iframe in the list of allowed domains.

Set the header as: payment=(self "https://subdomain.url") where subdomain.url is the iframes custom domain.

No action is needed if you’re not working with the Permissions-Policy header.

For more information about the Permissions-Policy header and its syntax, see here.

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:

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.

Last updated on by Nina Primeraki