Skip to main content

Spektrix Payments for Iframes

This page covers iframe-specific payment component setup for the Express Checkout and My Account flows.

  • For component styling, Apple Pay domain setup, and browser support, see Payments Component.
  • For API-driven payment flows (without iframes), see Payments API.

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, start the checkout process here and navigate all the way until the last step of the checkout.

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 the domain 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 by opening a new support ticket with us 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.

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.

Domain association and firewall setup​

You must also complete the Apple Pay domain association file hosting and firewall configuration. See Payments Component — Apple Pay Setup for full instructions.

Last updated on by Theo