Skip to content

Latest commit

 

History

History
266 lines (213 loc) · 10.3 KB

seamless-view.md

File metadata and controls

266 lines (213 loc) · 10.3 KB
title redirect_from description menu_order
Seamless View
/payments/card/seamless-view
The Seamless View purchase scenario represents the opportunity to implement card payments directly in your webshop.
500

Introduction

Seamless View provides an integration of the payment process directly on your website. This solution offers a smooth shopping experience with Swedbank Pay payment pages seamlessly integrated in an iframe on your website. The payer does not need to leave your webpage, since we are handling the payment in the iframe on your page.

How It Looks

{:.text-center} screenshot of the seamless view card payment page{:height="255px" width="475px"}

For payments in the currency SEK, radio buttons for selecting debit or credit card will appear.

{:.text-center} screenshot of the swedish seamless view card payment page{:height="305px" width="475px"}

Step 1: Create Payment

A Purchase payment is a straightforward way to charge the card of the payer. It is followed up by posting a capture, cancellation or reversal transaction.

An example of an abbreviated POST request is provided below. Each individual field of the JSON document is described in the following section. An example of an expanded POST request is available in the other features section.

{% include alert-risk-indicator.md %}

When properly set up in your merchant/webshop site and the payer starts the purchase process, you need to make a POST request towards Swedbank Pay with your Purchase information. This will generate a payment object with a unique paymentID. You will receive a JavaScript source in response.

{% include alert-gdpr-disclaimer.md %}

{% include purchase.md seamless_view=true %}

The key information in the response is the view-authorization operation. You will need to embed its href in a <script> element. The script will enable loading the payment page in an iframe in our next step.

{% include alert-nested-iframe-unsupported.md %}

Step 2: Display The Payment

You need to embed the script source on your site to create a Seamless View in an iframe; so that the payer can enter the credit card details in a secure Swedbank Pay hosted environment. A simplified integration has these following steps:

  1. Create a container that will contain the Seamless View iframe: <div id="swedbank-pay-seamless-view-page">.
  2. Create a <script> source within the container. Embed the href value obtained in the POST request in the <script> element. Example:
    <script id="payment-page-script" src="https://ecom.externalintegration.payex.com/creditcard/core/ scripts/client/px.creditcard.client.js"></script>

The previous two steps gives this HTML:

{:.code-view-header} HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Swedbank Pay Seamless View is Awesome!</title>
        <!-- Here you can specify your own javascript file -->
        <script src=<YourJavaScriptFileHere>></script>
    </head>
    <body>
        <div id="swedbank-pay-seamless-view-page">
          <script id="payment-page-script" src="https://ecom.dev.payex.com/creditcard/core/scripts/client/px.creditcard.client.js"></script>
        </div>
    </body>
</html>

Load The Seamless View

Lastly, initiate the Seamless View with a JavaScript call to open the iframe embedded on your website.

{:.code-view-header} JavaScript

<script language="javascript">
    payex.hostedView.creditCard({
        // The container specifies which id the script will look for to host the
        // iframe component.
        container: "swedbank-pay-seamless-view-page"
    }).open();
</script>

Monitoring The Script URL

With the PCI-DSS v4{:target="_blank"} changes taking effect on March 31st 2025, 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 in the linked document.

To ensure compliance, we recommend implementing Content Security Policy{:target="_blank"} 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.

{% include alert.html type="success" icon="info" body="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." %}

{:.table .table-striped}

URL Description
https://*.cdn-apple.com URL needed for Apple Pay.
https://*.google.com URL needed for Google Pay.
https://*.gstatic.com Domain used by Google that hosts images, CSS, and javascript code to reduce bandwidth usage online.
https://*.mastercard.com URL needed for Click to Pay.
https://*.payair.com URL for the digital wallets Apple Pay, Click to Pay and Google Pay.
https://*.payex.com Universal URL for all payment methods except the digital wallets Apple Pay, Click to Pay and Google Pay.
https://*.swedbankpay.com Universal URL for all payment methods except the digital wallets Apple Pay, Click to Pay and Google Pay.
https://*.visa.com URL needed for Click to Pay.

Events

When a user actively attempts to perform a payment, the onPaymentCreated event is raised with the following event argument object:

{:.code-view-header} onPaymentCreated event object

{% capture response_content %}{ "id": "/psp/creditcard/payments/{{ page.payment_id }}", "instrument": "creditcard", }{% endcapture %}

{% include code-example.html title='onPaymentCreated event object' header=response_header json= response_content %}

{:.table .table-striped}

Field Type Description
id string {% include fields/id.md %}
instrument string creditcard

Sequence Diagram

sequenceDiagram
    participant Payer
    participant Merchant
    participant SwedbankPay as Swedbank Pay

    activate Payer
    Payer->>-Merchant: Start purchase
    activate Merchant
    note left of Payer: First API request
    Merchant->>-SwedbankPay: POST /psp/creditcard/payments
    activate SwedbankPay
    SwedbankPay-->>-Merchant: rel: view-authorization ①
    activate Merchant
    Merchant-->>-Payer: Authorization page
    activate Payer
    note left of Payer: Open iframe ②
    Payer->>Payer: Input creditcard information
    Payer->>-SwedbankPay: Show Consumer UI page in iframe - Authorization ③
    activate SwedbankPay

        opt If 3-D Secure is required
        SwedbankPay-->>-Payer: Redirect to IssuingBank
        activate Payer
        Payer->>IssuingBank: 3-D Secure authentication process
        activate IssuingBank
        IssuingBank-->>-Payer: 3-D Secure authentication process response
        Payer->>-IssuingBank: Access authentication page
        activate IssuingBank
        IssuingBank -->>+Payer: Redirect to PaymentUrl
        Payer->>-Merchant: Redirect back to PaymentUrl (merchant)
        end

        alt Callback is set
        activate SwedbankPay
        SwedbankPay->>SwedbankPay: Payment is updated
        SwedbankPay->>-Merchant: POST Payment Callback
        end

    SwedbankPay-->>Merchant: Event: OnPaymentComplete ④
    activate Merchant
    note left of Merchant: Second API request.
    Merchant->>-SwedbankPay: GET <payment.id>
    activate SwedbankPay
    SwedbankPay-->>-Merchant: rel: view-payment
    activate Merchant
    Merchant-->>-Payer: Display purchase result
    activate Payer
Loading

3-D Secure

{% include card-general.md %}

Swedbank Pay will handle 3-D Secure authentication when this is required. When dealing with credit card payments, 3-D Secure authentication of the cardholder is an essential topic. There are two alternative outcomes of a credit card payment:

  1. 3-D Secure enabled - by default, 3-D Secure should be enabled, and Swedbank Pay will check if the card is enrolled with 3-D Secure. This depends on the issuer of the card. If the card is not enrolled with 3-D Secure, no authentication of the cardholder is done.
  2. Card supports 3-D Secure - if the card is enrolled with 3-D Secure, Swedbank Pay will redirect the cardholder to the autentication mechanism that is decided by the issuing bank. Normally this will be done using BankID or Mobile BankID.

Explanations

  • ① rel: view-authorization is a value in one of the operations, sent as a response from Swedbank Pay to the Merchant.
  • ② Open iframe creates the Swedbank Pay hosted iframe.
  • ③ Show Payer UI page in iframe displays the payment window as content inside of the iframe. The payer can enter card information for authorization.
  • ④ Event: OnPaymentComplete is when a payment is complete. Please note that both successful and rejected payments reach completion, in contrast to a cancelled payment.

{% include iterator.html prev_href="/old-implementations/payment-instruments-v1/card/redirect" prev_title="Redirect" next_href="/old-implementations/payment-instruments-v1/card/capture" next_title="Capture" %}