Display Payment UI

Display Redirect

Among the operations in the POST paymentOrder response, you will find redirect-checkout. This is the one you need to display the payment UI.

Response

Copy json to clipboard

1
2
3
4
5
6
7
8
9
10
11

{
    "paymentOrder": {}
    "operations": [
        {
            "method": "GET",
            "href": "https://ecom.externalintegration.payex.com/checkout/6445a0d8d9a7f80a37f4e46fc600a0534a832e4b6ec0dbb6768dd362d9401a8b?_tc_tid=30f2168171e142d38bcd4af2c3721959",
            "rel": "redirect-checkout",
            "contentType": "text/html"
        },
    ]
}

How Redirect Looks

With the link, you only need to redirect the payer to the site to give them the option to select their preferred payment method to pay with.

Once the payer has completed the purchase, you can perform a GET towards the paymentOrders resource to see the purchase state.

Top of page

Redirect Sequence Diagram

sequenceDiagram
participant Payer
participant Merchant
participant SwedbankPay as Swedbank Pay
participant 3rdParty

rect rgba(238, 112, 35, 0.05)
    activate Payer
    Payer ->>+ Merchant: Initiate Purchase
    Merchant ->>+ SwedbankPay: POST /psp/paymentorders (completeUrl, payer information)
    SwedbankPay -->>- Merchant: rel:redirect-checkout
    Merchant -->>- Payer: Redirect payer to SwedbankPay purchase page.
    Payer ->> Payer: Initiate Purchase step
    Payer ->>+ SwedbankPay: Do purchase logic
    activate SwedbankPay

    opt Payer perform purchase out of iFrame
        SwedbankPay ->>- Payer: Redirect to 3rd party required
        Payer ->>+ 3rdParty: Redirect to 3rdPartyUrl URL
        3rdParty -->>- Payer: Redirect back to SwedbankPay
        Payer ->> Payer: Initiate Payment Menu
        Payer ->>+ SwedbankPay: Show Purchase UI page in iframe
    end

    SwedbankPay -->>- Payer: Purchase status

    alt If Purchase is completed
        Payer ->> Payer: Redirect back to CompleteUrl
        Payer ->>+ Merchant: Check Purchase status
        Merchant ->>+ SwedbankPay: GET <paymentorder.id>
        SwedbankPay ->>- Merchant: Status: Paid
    end
    
    Merchant -->>- Payer: Show Purchase complete
    deactivate Payer
    
    alt If callbackUrls is set
        SwedbankPay ->> Merchant: POST Purchase Callback
    end

    alt If purchase don't require shipping
      note right of Merchant: Capture here only if the purchased<br/>goods don't require shipping.<br/>If shipping is required, perform capture<br/>after the goods have shipped.<br>Should only be used for <br>Payment Methods that support <br>Authorizations.
      Merchant ->>+ SwedbankPay: rel:capture
      SwedbankPay -->>- Merchant: Capture status
    end

end

Read more in our technical reference.

Top of page

Redirect - Next Steps

You are now ready to validate the payment’s status. Follow the link below to read more about how this is done.

Top of page

1

{: .h2 .pt-3 }

Display Seamless View

Among the operations in the POST paymentOrder response, you will find the view-checkout. This is the one you need to display the purchase module.

Response

Copy json to clipboard

1
2
3
4
5
6
7
8
9
10
11

{
    "paymentOrder": {},
    "operations": [
        {
            "method": "GET",
            "href": "https://ecom.externalintegration.payex.com/checkout/client/1c168a5f971f0cacd00124d1b9ee13e5ecf6e3e74e59cb510035973b38c2c3b3?culture=sv-SE&_tc_tid=123a825592f2002942e5f13eee012b11",
            "rel": "view-checkout",
            "contentType": "application/javascript"
        },
    ]
}

Load the Seamless View

Section Keywords:

• Container - The HTML element where the payment UI iframe is rendered.
• Client script - The script returned from the payment creation POST response which loads the payment UI on your page.
• Events - Optional handlers which allow you to respond to events from the payment UI.
• Functions - Client-side actions used to control the payment UI, such as opening, refreshing, or updating the view.

As advised by WCAG v2.2 section 1.3.1 and 2.4.3, we recommend that you mark the container where you host you iframe as either <main> or role=<main>.

HTML

1
2
3
4
5
6
7
8
9
10

<!DOCTYPE html>
<html>
    <head>
        <title>Swedbank Pay Example Container</title>
    </head>
    <body>
        <main id="payex-checkout"></main>
        <script src="<Your-JavaScript-File-Here>"></script>
    </body>
</html>

To display the UI, use the href from the previously created POST request and add it to a script element on the webpage. This URL points to the client script that loads the payment UI.

When the script has loaded, you can call payex.hostedView.checkout().open() to render the payment menu.

There are a few parameters we can set to further customize the menu itself, which are shown in the example below. This includes the place we want to open up the menu (container), the language we want the menu to display (culture), and any events we want to override.

Your-JavaScript-File-Here

1
2
3
4
5
6
7
8
9
10

const url = new URL("https://ecom.externalintegration.payex.com/checkout/client/1c168a5f971f0cacd00124d1b9ee13e5ecf6e3e74e59cb510035973b38c2c3b3?culture=sv-SE&_tc_tid=123a825592f2002942e5f13eee012b11");

const script = document.createElement("script");
script.src = url.href;
script.type = "text/javascript";
script.id = "payex-checkout-script";
script.onload = function() {
    payex.hostedView.checkout({container: {checkout: "payex-checkout"}}).open();
}
document.body.insertAdjacentElement("afterbegin", script);

Configuration of the Script

After placing the client script onto your website and providing it with a container, you can start using the functions to load the payment UI, but before you can open the UI, you need to configure it.

Configuring the UI

1
2
3
4
5
6

payex.hostedView.checkout({
    container: { "checkout": "string" },
    culture: "en-US",
    style: { "object" },
    integration: "HostedView"
});

Top of page

Seamless View Events and Functions

When you integrate using the Seamless View implementation, you can subscribe to events, which are notifications from our system about actions that have happened. There are also functions, which are command messages you can send to us, either to trigger actions or override the events.

These range from changing what happens when the payer completes or cancels their payment, to when we resize the payment menu itself. While optional, this gives you more flexibility and control over the payment flow, during and after the payer completes and/or cancels their payment attempt.

Check out the sections for Seamless View Events or Functions for complete lists of both.

Top of page

How Seamless View Looks

After opening up the client script, the menu itself will load inside of an iframe in the container you provided us earlier. From here, the payer can select their preferred payment method and pay.

Once the payer completes their purchase, you can then perform a GET towards the paymentOrders resource to check the purchase state.

Top of page

Seamless View Sequence Diagram

sequenceDiagram
participant Payer
participant Merchant
participant SwedbankPay as Swedbank Pay
participant 3rdParty

rect rgba(238, 112, 35, 0.05)
    activate Payer
    Payer ->>+ Merchant: Initiate Purchase
    Merchant ->>+ SwedbankPay: POST /psp/paymentorders (hostUrls, paymentUrl, payer information)
    SwedbankPay -->>- Merchant: rel:view-checkout
    Merchant -->>- Payer: Display SwedbankPay Checkout on Merchant Page
    Payer ->> Payer: Initiate Purchase step
    Payer ->>+ SwedbankPay: Do purchase logic
    activate SwedbankPay

    opt Payer performs purchase out of iFrame
        SwedbankPay ->>- Payer: Redirect to 3rd party required
        Payer ->>+ 3rdParty: Redirecting to 3rd party URL
        3rdParty -->>- Payer: Redirect back to paymentUrl (merchant)
        Payer ->> Payer: Initiate Checkout Seamless View (open iframe)
        Payer ->>+ SwedbankPay: Check purchase status
    end

    SwedbankPay -->>- Payer: Purchase status
    deactivate SwedbankPay

    alt If the purchase is completed
        Payer ->>+ SwedbankPay: GET <paymentorder.id>
        SwedbankPay ->>- Payer: Status: Paid/Failed
        Payer ->> Payer: Show Purchase complete
        Payer ->> Payer: Event: onPaid ①
        note right of Payer: Unless you override OnPaid, this will<br/>cause a redirect to the CompleteUrl
    else If the purchase attampt has failed
        Payer ->>+ SwedbankPay: GET {paymentorder.id}
        SwedbankPay -->>- Payer: Payment Status: Failed
        Payer -->> Payer: Display error message in the Payment UI
        Payer ->> Payer: Event: onPaymentAttemptFailed ①
    end

    opt PaymentOrder Callback (if callbackUrls is set) ②
        SwedbankPay ->> Merchant: POST Purchase Callback
    end

    deactivate Payer
end

rect rgba(81,43,43,0.1)
    note right of Payer: Capture
    Merchant ->>+ SwedbankPay: rel:capture
    SwedbankPay -->>- Merchant: Capture status
    note right of Merchant: Capture here only if the purchased<br/>goods don't require shipping.<br/>If shipping is required, perform capture<br/>after the goods have shipped.<br>Should only be used for <br>payment methods that support <br>Authorizations.
end

• ① See seamless view events for further information.
• ② Read more about callback handling in the technical reference.

Top of page

Change From Seamless View To Redirect UI

As parts of the PCI-DSS best practice became requirements with PCI-DSS v4 in April 2025, using the Seamless View integration to display the payment UI puts more responsibilities on merchants than before. This is because Seamless View is hosted by you. As the Redirect integration is hosted by Swedbank Pay, we also handle these responsibilities.

The PCI-DSS v4 requirements include stricter controls and monitoring, particularly around the security of your checkout process. Merchants are responsible for ensuring the integrity of the HTML script used in their integration, including monitoring what is loaded into or over it. Specifically, Seamless View merchants must verify that the script URL embedded in their iframe originates from Swedbank Pay or another trusted domain. It is important to note that Swedbank Pay’s PCI responsibility is strictly limited to the content within the payment iframe.

For further details, refer to section 4.6.3 and 11.6.1 in the linked PCI-DSS document.

Please note that this only applies to payment methods that are affected by PCI-DSS (Card and Click to Pay). If you only offer payment methods not affected by PCI-DSS, no actions are necessary. If you want to add PCI-DSS affected payment methods later, this is something you need to consider.

To learn more about how PCI-DSS affects you, we also have reading available in Danish, Finnish, Norwegian and Swedish.

If you currently have a Seamless View integration and don’t want the new responsibilities, switcing to Redirect is a very manageable task. Here’s what you need to do:

Top of page

Use Redirect Operation

In the operations node of the payment response, right next to view-checkout which you should currently be using, you’ll find redirect-checkout. The corresponding href contains a url which leads to a Swedbank Pay domain where the payment UI will be displayed and processed. All you need to do is direct the Payer to this url and wait until one of the functions are called (completeUrl, cancelUrl or callbackUrl) to proceed with the payment process.

Redirect-Checkout Operation

Copy json to clipboard

1
2
3
4
5
6
7
8
9
10

{
    "operations": [
        {
          "method": "GET",
          "href": "https://ecom.externalintegration.payex.com/payment/menu/b934d6f84a89a01852eea01190c2bbcc937ba29228ca7502df8592975ee3bb0d?_tc_tid=30f2168171e142d38bcd4af2c3721959",
          "rel": "redirect-checkout",
          "contentType": "text/html"
        },
    ]
}

Top of page

Remove Seamless View Code

You can remove all code related to the <script> element used to load the Seamless View.

Top of page

Change URLs

Finally, you need to do some changes to the urls node in your payment request. The paymentUrl field is specific to Seamless View and can be removed.

The url you need to add is the cancelUrl, so we know where to redirect the payer if they chose to cancel, or you chose to abort the payment.

If you have permission to add your own logo in the payment UI and want to add one, you also need to include a logoUrl. Follow the guidelines in the section linked above. If no logoUrl is added, Swedbank Pay’s logo will be shown by default.

The completeUrl, hostUrls and callbackUrl is universal and must be included regardless of your UI choice.

Seamless View Specific URL

Copy json to clipboard

1
2
3
4
5

{
        "urls": {
            "paymentUrl": "https://example.com/perform-payment"
        }
}

Redirect Specific URLs

Copy json to clipboard

1
2
3
4
5
6

{
        "urls": {
            "cancelUrl": "https://example.com/payment-cancelled",
            "logoUrl": "https://example.com/logo.png" //Optional
        }
}

Top of page

Monitoring The Script URL

If you choose to stay with Seamless View, please take the following under advisement.

To ensure compliance, we recommend implementing Content Security Policy rules to monitor and authorize scripts.

Merchants must whitelist the following domains to restrict browser content retrieval to approved sources. While https://.payex.com and https://.swedbankpay.com cover most payment methods, digital wallets such as Apple Pay, Click to Pay, and Google Pay are delivered via Payair. Alongside the Payair URL, these wallets may also generate URLs from Apple, Google, MasterCard, and Visa. See the table below for more information.

When it comes to ACS URLs, nothing is loaded from the ACS domain in the merchant’s end. It will either happen within Swedbank Pay’s domain or as a redirect, which will repeal the merchant’s CSP.

The list below includes important URLs, but may not be exhaustive. Merchants need to stay up to date in case of URL changes, or if you need to whitelist URLs not listed here.

For further details, refer to section 4.6.3 and 11.6.1 in this PCI-DSS document.

Top of page

Seamless View - Next Steps

You are now ready to validate the payment’s status. Follow the link below to read more about how this is done.

Top of page