The Starter Seamless View integration consists of three main steps. Creating the payment order and checkin, displaying the payment menu, delivery options and checkin module in an iframe, and finally capturing the funds. In addition, there are other post purchase options you need. We get to them later on.
If you want to get an overview before proceeding, you can look at the sequence diagram. It is also available in the sidebar if you want to look at it later. Let´s get going with the two first steps of the integration.
Step 1: Create Payment Order And Checkin
When the purchase is initiated, you need to create a payment order.
Start by performing a POST
request towards the paymentorder
resource
with payer information and a completeUrl
.
We have added productName
to the payment order request in this integration.
You can find it in the paymentorder
field. This is required if you want to use
Checkout v3. If it isn´t included in your request, you won’t get the correct
operations in the response.
When productName
is set to checkout3
, requireConsumerInfo
and
digitalProducts
will be set to false
by default. For the Starter
integration, you must set requireConsumerInfo
to true
. If digitalProducts
is set to false
, you also need to add
shippingAddressRestrictedToCountryCodes
along with ISO standard country codes.
Supported features for this integration are subscriptions (recur
and
unscheduled MIT
), instrument mode and split settlement (subsite
).
There is also a guest mode option for the payers who don’t wish to store their information. When using Starter, this is triggered when the payer chooses not to store credentials during checkin.
In some instances you need the possibility to abort purchases. This could be if
a payer does not complete the purchase within a reasonable timeframe. For those
instances we have abort
, which you can read about in the core
features. You can only use abort
if the payer has not
completed an authorize
or a sale
.
Payment Url
For our Seamless Views, the field called paymentUrl
will be used when the
payer is redirected out of the Seamless View (the iframe
). The payer is
redirected out of frame when selecting payment instruments which trigger SCA.
This includes 3-D Secure card payments, credit account, invoice, MobilePay,
monthly invoice payments, Trustly and Vipps.
The URL should represent the page of where the Payment Order Seamless View was
hosted originally, such as the checkout page, shopping cart page, or similar.
Basically, paymentUrl
should be set to the same URL as that of the page where
the JavaScript for the Seamless View was added to in order to initiate the
payment process.
Please note that the paymentUrl
must be able to invoke the same JavaScript URL
from the same Payment Order as the one that initiated the payment process
originally, so it should include some sort of state identifier in the URL. The
state identifier is the ID of the order, shopping cart or similar that has the
URL of the Payment stored.
With paymentUrl
in place, the retry process becomes much more convenient for
both the integration and the payer.
To minimize the risk for
a challenge request (Strong Customer Authentication – “SCA”) on card payments,
it’s recommended that you add as much data as possible to the riskIndicator
object in the request below.
GDPR: GDPR
sensitive data such as email, phone numbers and social security numbers must
not be used directly in request fields such as payerReference
. If it is
necessary to use GDPR sensitive data, it must be hashed and then the hash can be
used in requests towards Swedbank Pay.
Request
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
POST /psp/paymentorders HTTP/1.1
Host: api.externalintegration.payex.com
Authorization: Bearer <AccessToken>
Content-Type: application/json
{
"paymentorder": {
"operation": "Purchase",
"currency": "SEK",
"amount": 1500,
"vatAmount": 375,
"description": "Test Purchase",
"userAgent": "Mozilla/5.0...",
"language": "sv-SE",
"productName": "Checkout3",
"urls": {
"hostUrls": [ "https://example.com", "https://example.net" ],
"paymentUrl": "https://example.com/perform-payment",
"completeUrl": "https://example.com/payment-completed",
"cancelUrl": "https://example.com/payment-cancelled",
"callbackUrl": "https://api.example.com/payment-callback",
"termsOfServiceUrl": "https://example.com/termsandconditions.pdf"
},
"payeeInfo": {
"payeeId": "5cabf558-5283-482f-b252-4d58e06f6f3b",
"payeeReference": "AB832",
"payeeName": "Merchant1",
"productCategory": "A123",
"orderReference": "or-123456",
"subsite": "MySubsite"
},
"payer": {
"requireConsumerInfo": true,
"digitalProducts": false,
"shippingAddressRestrictedToCountryCodes": [ "NO", "US" ]
},
"swish": {
"paymentRestrictedToAgeLimit": 18,
"paymentRestrictedToSocialSecurityNumber": "199710202392"
},
"orderItems": [
{
"reference": "P1",
"name": "Product1",
"type": "PRODUCT",
"class": "ProductGroup1",
"itemUrl": "https://example.com/products/123",
"imageUrl": "https://example.com/product123.jpg",
"description": "Product 1 description",
"discountDescription": "Volume discount",
"quantity": 5,
"quantityUnit": "pcs",
"unitPrice": 300,
"discountPrice": 0,
"vatPercent": 2500,
"amount": 1500,
"vatAmount": 375
},
{
"reference": "I1",
"name": "InvoiceFee",
"type": "PAYMENT_FEE",
"class": "Fees",
"description": "Fee for paying with Invoice",
"quantity": 1,
"quantityUnit": "pcs",
"unitPrice": 1900,
"vatPercent": 0,
"amount": 1900,
"vatAmount": 0,
"restrictedToInstruments": [
"Invoice-PayExFinancingSe"
]
}
],
"riskIndicator": {
"deliveryEmailAddress": "olivia.nyhuus@payex.com",
"deliveryTimeFrameIndicator": "01",
"preOrderDate": "19801231",
"preOrderPurchaseIndicator": "01",
"shipIndicator": "01",
"giftCardPurchase": false,
"reOrderPurchaseIndicator": "01",
"pickUpAddress": {
"name": "Olivia Nyhus",
"streetAddress": "Saltnestoppen 43",
"coAddress": "",
"city": "Saltnes",
"zipCode": "1642",
"countryCode": "NO"
}
}
}
}
Required | Field | Type | Description | |
---|---|---|---|---|
check | paymentorder |
object |
The payment order object. | |
check | └➔ operation
|
string |
The operation that the payment order is supposed to perform. | |
check | └➔ currency
|
string |
The currency of the payment. | |
check | └➔ amount
|
integer |
The transaction amount (including VAT, if any) entered in the lowest monetary unit of the selected currency. E.g.: 10000 = 100.00 SEK, 5000 = 50.00 SEK. |
|
check | └➔ vatAmount
|
integer |
The payment’s VAT (Value Added Tax) amount , entered in the lowest monetary unit of the selected currency. E.g.: 10000 = 100.00 SEK, 5000 = 50.00 SEK. The vatAmount entered will not affect the amount shown on the payment page, which only shows the total amount . This field is used to specify how much of the total amount the VAT will be. Set to 0 (zero) if there is no VAT amount charged. |
|
check | └➔ description
|
string |
The description of the payment order. | |
check | └➔ userAgent
|
string |
The user agent of the payer. Should typically be set to the value of the User-Agent header sent by the payer’s web browser. |
|
check | └➔ language
|
string |
The language of the payer. | |
check | └➔ productName
|
string |
Used to tag the payment as Checkout v3. Mandatory for Checkout v3, as you won’t get the operations in the response without submitting this field. | |
check | └➔ urls
|
object |
The urls object, containing the URLs relevant for the payment order. |
|
check | └─➔ hostUrls
|
array |
The array of URLs valid for embedding of Swedbank Pay Seamless Views. | |
└─➔ paymentUrl
|
string |
The URL that Swedbank Pay will redirect back to when the payment menu needs to be loaded, to inspect and act on the current status of the payment. See paymentUrl for details. |
||
check | └─➔ completeUrl
|
string |
The URL that Swedbank Pay will redirect back to when the payer has completed his or her interactions with the payment. This does not indicate a successful payment, only that it has reached a final (complete) state. A GET request needs to be performed on the payment order to inspect it further. See completeUrl for details. |
|
└─➔ cancelUrl
|
string |
The URL to redirect the payer to if the payment is cancelled, either by the payer or by the merchant trough an abort request of the payment or paymentorder . |
||
check | └─➔ callbackUrl
|
string |
The URL to the API endpoint receiving POST requests on transaction activity related to the payment order. |
|
check | └─➔ termsOfServiceUrl
|
string |
The URL to the terms of service document which the payer must accept in order to complete the payment. HTTPS is a requirement. | |
check | └➔ payeeInfo
|
string |
The payeeInfo object, containing information about the payee (the recipient of the money). See payeeInfo for details. |
|
check | └─➔ payeeId
|
string |
The ID of the payee, usually the merchant ID. | |
check | └─➔ payeeReference
|
string(30) |
A unique reference from the merchant system. It is set per operation to ensure an exactly-once delivery of a transactional operation. See payeeReference for details. In Invoice Payments payeeReference is used as an invoice/receipt number, if the receiptReference is not defined. |
|
└─➔ payeeName
|
string |
The name of the payee, usually the name of the merchant. | ||
└─➔ productCategory
|
string |
A product category or number sent in from the payee/merchant. This is not validated by Swedbank Pay, but will be passed through the payment process and may be used in the settlement process. | ||
└─➔ orderReference
|
string(50) |
The order reference should reflect the order reference found in the merchant’s systems. | ||
└─➔ subsite
|
String(40) |
The subsite field can be used to perform split settlement on the payment. The subsites must be resolved with Swedbank Pay reconciliation before being used. | ||
└➔ payer
|
object |
The payer object containing information about the payer relevant for the payment order. |
||
└➔ digitalProducts
|
bool |
Set to true for merchants who only sell digital goods and only require email and/or msisdn as shipping details. Set to false if the merchant also sells physical goods. |
||
shippingAddressRestrictedToCountryCodes |
string |
List of supported shipping countries for merchant. Using [ISO-3166] standard. Mandatory if digitalProducts is set to true , and not to be included if it is false . |
||
check | requireConsumerInfo |
string |
Must be set to true by merchants using Starter, as they receive profile information from Swedbank Pay. This applies both when the merchant needs email and/or msisdn for digital goods, and when full shipping address is needed. |
|
└➔ swish
|
object |
An object that holds different scenarios for Swish payments. | ||
└─➔ paymentRestrictedToAgeLimit
|
integer |
Positive number that sets the required age needed to fulfill the payment. To use this feature it has to be configured in the contract. | ||
└─➔ paymentRestrictedToSocialSecurityNumber
|
string |
When provided, the payment will be restricted to a specific social security number to make sure its the same logged in customer who is also the payer. Format: yyyyMMddxxxx. To use this feature it has to be configured in the contract. | ||
check | └➔ orderItems
|
array |
The array of items being purchased with the order. Note that authorization orderItems will not be printed on invoices, so lines meant for print must be added in the Capture request. The authorization orderItems will, however, be used in the Admin system when captures or reversals are performed, and might be shown other places later. It is required to use this field to be able to send Capture orderItems . Capture requests should only contain items meant to be captured from the order. |
|
check | └─➔ reference
|
string |
A reference that identifies the order item. | |
check | └─➔ name
|
string |
The name of the order item. | |
check | └─➔ type
|
string |
PRODUCT , SERVICE , SHIPPING_FEE , PAYMENT_FEE DISCOUNT , VALUE_CODE or OTHER . The type of the order item. PAYMENT_FEE is the amount you are charged with when you are paying with invoice. The amount can be defined in the amount field below. |
|
check | └─➔ class
|
string |
The classification of the order item. Can be used for assigning the order item to a specific product category, such as MobilePhone . Note that class cannot contain spaces and must follow the regex pattern [\w-]* . Swedbank Pay may use this field for statistics. |
|
└─➔ itemUrl
|
string |
The URL to a page that can display the purchased item, product or similar. | ||
︎︎︎ | └─➔ imageUrl
|
string |
The URL to an image of the order item. | |
└─➔ description
|
string |
A 40 character length textual description of the purchase. | ||
└─➔ discountDescription
|
string |
The human readable description of the possible discount. | ||
check | └─➔ quantity
|
integer |
The 4 decimal precision quantity of order items being purchased. | |
check | └─➔ quantityUnit
|
string |
The unit of the quantity, such as pcs , grams , or similar. This is used for your own book keeping. |
|
check | └─➔ unitPrice
|
integer |
The price per unit of order item, including VAT. | |
└─➔ discountPrice
|
integer |
If the order item is purchased at a discounted price. This field should contain that price, including VAT. | ||
check | └─➔ vatPercent
|
integer |
The percent value of the VAT multiplied by 100, so 25% becomes 2500 . |
|
check | └─➔ amount
|
integer |
The transaction amount (including VAT, if any) entered in the lowest monetary unit of the selected currency. E.g.: 10000 = 100.00 SEK, 5000 = 50.00 SEK. |
|
check | └─➔ vatAmount
|
integer |
The payment’s VAT (Value Added Tax) amount , entered in the lowest monetary unit of the selected currency. E.g.: 10000 = 100.00 SEK, 5000 = 50.00 SEK. The vatAmount entered will not affect the amount shown on the payment page, which only shows the total amount . This field is used to specify how much of the total amount the VAT will be. Set to 0 (zero) if there is no VAT amount charged. |
|
└➔ restrictedToInstruments
|
array |
CreditCard , Invoice , Vipps , Swish , Trustly and/or CreditAccount . Invoice supports the subtypes PayExFinancingNo , PayExFinancingSe and PayMonthlyInvoiceSe , separated by a dash, e.g.; Invoice-PayExFinancingNo . Default value is all supported payment instruments. Use of this field requires an agreement with Swedbank Pay. You can restrict fees and/or discounts to certain instruments by adding this field to the orderline you want to restrict. Use positive amounts to add fees, and negative amounts to add discounts. |
||
└➔ riskIndicator
|
array |
This optional object consist of information that helps verifying the payer. Providing these fields decreases the likelihood of having to prompt for 3-D Secure 2.0 authentication of the payer when they are authenticating the purchase. | ||
└─➔ deliveryEmailAdress
|
string |
For electronic delivery, the email address to which the merchandise was delivered. Providing this field when appropriate decreases the likelihood of a 3-D Secure authentication for the payer. | ||
└─➔ deliveryTimeFrameIndicator
|
string |
Indicates the merchandise delivery timeframe. 01 (Electronic Delivery) 02 (Same day shipping) 03 (Overnight shipping) 04 (Two-day or more shipping) |
||
└─➔ preOrderDate
|
string |
For a pre-ordered purchase. The expected date that the merchandise will be available. Format: YYYYMMDD
|
||
└─➔ preOrderPurchaseIndicator
|
string |
Indicates whether the payer is placing an order for merchandise with a future availability or release date. 01 (Merchandise available) 02 (Future availability) |
||
└─➔ shipIndicator
|
string |
Indicates shipping method chosen for the transaction. 01 (Ship to cardholder’s billing address) 02 (Ship to another verified address on file with merchant)03 (Ship to address that is different than cardholder’s billing address)04 (Ship to Store / Pick-up at local store. Store address shall be populated in shipping address fields)05 (Digital goods, includes online services, electronic giftcards and redemption codes) 06 (Travel and Event tickets, not shipped) 07 (Other, e.g. gaming, digital service) |
||
└─➔ giftCardPurchase
|
bool |
true if this is a purchase of a gift card. |
||
└─➔ reOrderPurchaseIndicator
|
string |
Indicates whether the cardholder is reordering previously purchased merchandise. 01 (First time ordered) 02 (Reordered). |
||
└➔ pickUpAddress
|
object |
If shipIndicator set to 04 , then prefill this with the payers pickUpAddress of the purchase to decrease the risk factor of the purchase. |
||
└─➔ name
|
string |
If shipIndicator set to 04 , then prefill this with the payers name of the purchase to decrease the risk factor of the purchase. |
||
└─➔ streetAddress
|
string |
If shipIndicator set to 04 , then prefill this with the payers streetAddress of the purchase to decrease the risk factor of the purchase. Maximum 50 characters long. |
||
└─➔ coAddress
|
string |
If shipIndicator set to 04 , then prefill this with the payers coAddress of the purchase to decrease the risk factor of the purchase. |
||
└─➔ city
|
string |
If shipIndicator set to 04 , then prefill this with the payers city of the purchase to decrease the risk factor of the purchase. |
||
└─➔ zipCode
|
string |
If shipIndicator set to 04 , then prefill this with the payers zipCode of the purchase to decrease the risk factor of the purchase. |
||
└─➔ countryCode
|
string |
If shipIndicator set to 04 , then prefill this with the payers countryCode of the purchase to decrease the risk factor of the purchase. |
Response
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
HTTP/1.1 200 OK
Content-Type: application/json
{
"paymentorder": {
"id": "/psp/paymentorders/09ccd29a-7c4f-4752-9396-12100cbfecce",
"created": "2020-06-22T10:56:56.2927632Z",
"updated": "2020-06-22T10:56:56.4035291Z",
"operation": "Purchase",
"status": "Initialized",
"currency": "SEK",
"amount": 1500,
"vatAmount": 375,
"description": "Test Purchase",
"initiatingSystemUserAgent": "swedbankpay-sdk-dotnet/3.0.1",
"language": "sv-SE",
"availableInstruments": [
"CreditCard",
"Invoice-PayExFinancingSe",
"Invoice-PayMonthlyInvoiceSe",
"Swish",
"CreditAccount",
"Trustly" ],
"implementation": "Starter",
"integration": "HostedView",
"instrumentMode": false,
"guestMode": false,
"payer": {
"id": "/psp/paymentorders/8be318c1-1caa-4db1-e2c6-08d7bf41224d/payers"
},
"orderItems": {
"id": "/psp/paymentorders/09ccd29a-7c4f-4752-9396-12100cbfecce/orderitems"
},
"history": {
"id": "/psp/paymentorders/8be318c1-1caa-4db1-e2c6-08d7bf41224d/history"
},
"failed": {
"id": "/psp/paymentorders/8be318c1-1caa-4db1-e2c6-08d7bf41224d/failed"
},
"aborted": {
"id": "/psp/paymentorders/8be318c1-1caa-4db1-e2c6-08d7bf41224d/aborted"
},
"paid": {
"id": "/psp/paymentorders/8be318c1-1caa-4db1-e2c6-08d7bf41224d/paid"
},
"cancelled": {
"id": "/psp/paymentorders/8be318c1-1caa-4db1-e2c6-08d7bf41224d/cancelled"
},
"financialTransactions": {
"id": "/psp/paymentorders/8be318c1-1caa-4db1-e2c6-08d7bf41224d/financialtransactions"
},
"failedAttempts": {
"id": "/psp/paymentorders/8be318c1-1caa-4db1-e2c6-08d7bf41224d/failedattempts"
},
"metadata": {
"id": "/psp/paymentorders/8be318c1-1caa-4db1-e2c6-08d7bf41224d/metadata"
}
},
"operations": [
{
"method":"PATCH",
"href": "https://api.payex.com/psp/paymentorders/222a50ca-b268-4b32-16fa-08d6d3b73224",
"rel":"update-order",
"contentType":"application/json"
},
{
"method":"PATCH",
"href": "https://api.payex.com/psp/paymentorders/222a50ca-b268-4b32-16fa-08d6d3b73224",
"rel": "abort",
"contentType": "application/json"
}
]
}
Field | Type | Description |
---|---|---|
paymentorder |
object |
The payment order object. |
└➔ id
|
string |
The relative URL and unique identifier of the paymentorder resource . Please read about URL Usage to understand how this and other URLs should be used in your solution. |
└➔ created
|
string |
The ISO-8601 date of when the payment order was created. |
└➔ updated
|
string |
The ISO-8601 date of when the payment order was updated. |
└➔ operation
|
string |
Purchase |
└➔ status
|
string |
Indicates the payment order’s current status. Initialized is returned when the payment is created and still ongoing. The request example above has this status. Paid is returned when the payer has completed the payment successfully. See the Paid response. Failed is returned when a payment has failed. You will find an error message in the Failed response. Cancelled is returned when an authorized amount has been fully cancelled. See the Cancelled response. It will contain fields from both the cancelled description and paid section. Aborted is returned when the merchant has aborted the payment, or if the payer cancelled the payment in the redirect integration (on the redirect page). See the Aborted response. |
└➔ currency
|
string |
The currency of the payment order. |
└➔ amount
|
integer |
The transaction amount (including VAT, if any) entered in the lowest monetary unit of the selected currency. E.g.: 10000 = 100.00 SEK, 5000 = 50.00 SEK. |
└➔ vatAmount
|
integer |
The payment’s VAT (Value Added Tax) amount , entered in the lowest monetary unit of the selected currency. E.g.: 10000 = 100.00 SEK, 5000 = 50.00 SEK. The vatAmount entered will not affect the amount shown on the payment page, which only shows the total amount . This field is used to specify how much of the total amount the VAT will be. Set to 0 (zero) if there is no VAT amount charged. |
└➔ description
|
string(40) |
A 40 character length textual description of the purchase. |
└➔ initiatingSystemUserAgent
|
string |
The user agent of the HTTP client making the request, reflecting the value sent in the User-Agent header with the initial POST request which created the Payment Order. |
└➔ language
|
string |
sv-SE , nb-NO , da-DK , en-US or fi-FI . |
└➔ availableInstruments
|
string |
A list of instruments available for this payment. |
└➔ implementation
|
string |
The merchant’s Checkout v3 implementation type. Business , Enterprise , PaymentsOnly or Starter . We ask that you don’t build logic around this field’s response. It is mainly for information purposes, as the implementation types might be subject to name changes. If this should happen, updated information will be available in this table. |
└➔ integration
|
string |
The merchant’s Checkout v3 integration type. HostedView (Seamless View) is the only available option when using Starter . We ask that you don’t build logic around this field’s response. It is mainly for information purposes, as the integration types might be subject to name changes. If this should happen, updated information will be available in this table. |
└➔ instrumentMode
|
bool |
Set to true or false . Indicates if the payment is initialized with only one payment instrument available. |
└➔ guestMode
|
bool |
Set to true or false . Indicates if the payer chose to pay as a guest or not. When using the Starter implementation, this is achieved if the payer chooses to proceed as a guest when given the option during checkin. |
└➔ payer
|
string |
The URL to the payers resource where information about the payee of the payment order can be retrieved. |
└➔ orderItems
|
string |
The URL to the orderItems resource where information about the order items can be retrieved. |
└➔ history
|
string |
The URL to the history resource where information about the payment’s history can be retrieved. |
└➔ failed
|
string |
The URL to the failed resource where information about the failed transactions can be retrieved. |
└➔ aborted
|
string |
The URL to the aborted resource where information about the aborted transactions can be retrieved. |
└➔ paid
|
string |
The URL to the paid resource where information about the paid transactions can be retrieved. |
└➔ cancelled
|
string |
The URL to the cancelled resource where information about the cancelled transactions can be retrieved. |
└➔ financialTransactions
|
string |
The URL to the financialTransactions resource where information about the financial transactions can be retrieved. |
└➔ failedAttempts
|
string |
The URL to the failedAttempts resource where information about the failed attempts can be retrieved. |
└➔ metadata
|
string |
The URL to the metadata resource where information about the metadata can be retrieved. |
└➔ operations
|
array |
The array of possible operations to perform, given the state of the payment order. See Operations for details. |
Step 2: Display Checkin, Delivery Options And Payment Menu
Among the operations in the POST paymentOrders
response, you will find
view-checkout
. This is what you need to display the checkin and payment
module.
Response
1
2
3
4
5
6
7
8
9
10
11
{
"paymentOrder": {
"operations": [
{
"method": "GET",
"href": "https://ecom.externalintegration.payex.com/payment/core/js/px.payment.client.js?token=dd728a47e3ec7be442c98eafcfd9b0207377ce04c793407eb36d07faa69a32df&culture=sv-SE&_tc_tid=30f2168171e142d38bcd4af2c3721959",
"rel": "view-checkout",
"contentType": "application/javascript"
},
]
}
Embed the href
in a <script>
element. That script will then load the
Seamless View.
To load the Checkout from the JavaScript URL obtained in the backend API
response, it needs to be set as a script element’s src
attribute. You can
cause a page reload and do this with static HTML, or you can avoid the page
refresh by invoking the POST to create the payment order through Ajax, and then
create the script element with JavaScript. The HTML code will be unchanged in
this example.
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
var request = new XMLHttpRequest();
request.addEventListener('load', function () {
response = JSON.parse(this.responseText);
var script = document.createElement('script');
var operation = response.operations.find(function (o) {
return o.rel === 'view-checkout';
});
script.setAttribute('src', operation.href);
script.onload = function () {
// When the 'view-checkout' script is loaded, we can initialize the
// Payment Menu inside our 'payment-menu' container.
// To open the Checkin
window.payex.hostedView.checkout({
container: {
checkin: "checkin",
paymentMenu: "paymentMenu",
},
culture: 'nb-No',
// If payer is identified
onPayerIdentified: function onPayerIdentified(payerIdentified) {
console.log(payerIdentified);
},
// If payer chooses "Not you?"
onPayerUnidentified: function onPayerUnidentified(payerUnidentified) {
console.log(payerUnidentified);
},
onEventNotification: function onEventNotification(eventNotification) {
console.log(eventNotification);
},
}).open("checkin");
};
// Append the Checkout script to the <head>
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);
});
// Like before, you should replace the address here with
// your own endpoint.
request.open('GET', '<Your-Backend-Endpoint-Here>', true);
request.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
request.send();
When you get notified about the event onPayerIdentified
, you need to do a
GET
on the paymentOrder
. By expanding the payer
field, you should get all
the info you need to calculate shipping costs. You can now update the
paymentOrder with a PATCH
if you need to, using the patch from operations
in
the paymentOrder
response.
Response
1
2
3
4
5
6
7
8
9
HTTP/1.1 200 OK
Content-Type: application/json
{
"method": "PATCH",
"href": "https://ecom.externalintegration.payex.com/paymentorders/09ccd29a-7c4f-4752-9396-12100cbfecce",
"rel": "update-order",
"contentType": "application/json"
}
JavaScript
1
2
3
4
5
6
7
8
//to open the Payment Menu
window.payex.hostedView.checkout({
container: {
checkin: "checkin",
paymentMenu: "paymentMenu",
},
culture: 'nb-No',
}).open("paymentmenu");
HTML
1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
<title>Swedbank Pay Checkout is Awesome!</title>
</head>
<body>
<div id="checkin"></div>
<div id="payment-menu"></div>
<!-- Here you can specify your own javascript file -->
<script src="<Your-JavaScript-File-Here>"></script>
</body>
</html>
First you will see a Checkin module where the payer can enter their email and phone number.
A known payer will be sent directly to the payment menu shown further below. If we detect that the payer is new, we give them the option to store their details or proceed without storing. If that happens, these checkin steps will appear.
After choosing yes or no, the payer must enter their SSN.
With digital products, the payer will be sent directly to delivery options after they select to store their details (see below). For mixed goods, the SSN input view will expand and the payer must enter their shipping address. Payers choosing not to store credentials (guests) must also enter their shipping address.
After checking in, the payer’s contact details and shipping address are shown for mixed goods. Note the new “Remember me” checkbox. The first time the checks in, the box will appear unchecked. If checked during a purchase, it will appear like the screenshot below during future check-ins, with a “Not you?” option in the top right corner.
You can now perform the GET
on the payment order and display the available
delivery option(s) to the payer. How the delivery options are displayed is up to
you. This is how they appear in our demoshop.
For digital products, only contact details will be shown. “Remember me” will work the same way as with mixed goods.
When the payer chooses a delivery option, you can PATCH
the payment order and
open the payment menu. The payer can then proceed with the purchase.
Once a purchase is complete, you can perform a GET
towards the paymentOrders
resource to see the purchase state.
Events
When integrating Seamless View, especially with Starter where it’s the only
option, we strongly recommend that you implement the onPaid
event, as it will
give you the best setup. Even with this implemented, you need to check the
payment status towards our APIs, as the payer can make changes in the browser at
any time.
When implementing Starter, you also need to subscribe to the event
onPayerUnidentified
when you implement
onPayerIdentified
. This is important because the
“Remember Me” feature (to be released soon) won’t work without it.
You can read more about the different Seamless View Events available in the feature section.