Step 3: Create Payment Order
Once the consumer has been identified, the next step is to initiate the payment
using consumerProfileRef
retrieved in the previous step.
We start by performing a POST
request towards the paymentorder
resource
with the payer information (such as consumerProfileRef
) we obtained in the
checkin process described above. This information will appear prefilled in the
Payment Menu.
If you are sending a guest user POST
request, simply leave out the
consumerProfileRef
from the input, and the payer will be sent to an empty
Payment Menu. Information like email
, address
and msisdn
can still be
added manually in the payer node. If added, it will appear prefilled in the
Payment Menu.
Remember to read up on our URL resource.
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.
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 the payment instrument Vipps or in the
3-D Secure verification for Credit Card Payments.
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.
Request
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
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",
"generateRecurrenceToken": false,
"urls": {
"hostUrls": [ "https://example.com", "https://example.net" ],
"completeUrl": "https://example.com/payment-completed",
"cancelUrl": "https://example.com/payment-canceled",
"paymentUrl": "https://example.com/perform-payment",
"callbackUrl": "https://api.example.com/payment-callback",
"termsOfServiceUrl": "https://example.com/termsandconditoons.pdf",
"logoUrl": "https://example.com/logo.png"
},
"payeeInfo": {
"payeeId": "5cabf558-5283-482f-b252-4d58e06f6f3b",
"payeeReference": "AB832",
"payeeName": "Merchant1",
"productCategory": "A123",
"orderReference": "or-123456",
"subsite": "MySubsite"
},
"payer": {
"consumerProfileRef": "5a17c24e-d459-4567-bbad-aa0f17a76119",
"email": "olivia.nyhuus@payex.com",
"msisdn": "+4798765432",
"workPhoneNumber" : "+4787654321",
"homePhoneNumber" : "+4776543210"
},
"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": 4,
"quantityUnit": "pcs",
"unitPrice": 300,
"discountPrice": 200,
"vatPercent": 2500,
"amount": 1000,
"vatAmount": 250
},
{
"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,
}
],
"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"
}
}
}
}
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
74
75
76
77
78
POST /psp/paymentorders HTTP/1.1
Host: api.externalintegration.payex.com
Authorization: Bearer <AccessToken>
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",
"state": "Ready",
"currency": "SEK",
"amount": 10000,
"vatAmount": 0,
"orderItems": {
"id": "/psp/paymentorders/09ccd29a-7c4f-4752-9396-12100cbfecce/orderitems"
},
"description": "test description",
"initiatingSystemUserAgent": "Mozilla/5.0",
"userAgent": "Mozilla/5.0",
"language": "sv-SE",
"urls": {
"id": "/psp/paymentorders/09ccd29a-7c4f-4752-9396-12100cbfecce/urls"
},
"payeeInfo": {
"id": "/psp/paymentorders/09ccd29a-7c4f-4752-9396-12100cbfecce/payeeInfo"
},
"payments": {
"id": "/psp/paymentorders/09ccd29a-7c4f-4752-9396-12100cbfecce/payments"
},
"currentPayment": {
"id": "/psp/paymentorders/09ccd29a-7c4f-4752-9396-12100cbfecce/currentpayment"
},
"items": [
{
"creditCard": {
"cardBrands": [
"Visa",
"MasterCard"
]
}
}
]
}
"operations": [
{
"method": "PATCH",
"href": "https://ecom.externalintegration.payex.com/paymentorders/09ccd29a-7c4f-4752-9396-12100cbfecce",
"rel": "update-paymentorder-updateorder",
"contentType": "application/json"
},
{
"method": "PATCH",
"href": "https://api.externalintegration.payex.com/paymentorders/09ccd29a-7c4f-4752-9396-12100cbfecce",
"rel": "update-paymentorder-abort",
"contentType": "application/json"
},
{
"method": "PATCH",
"href": "https://ecom.externalintegration.payex.com/paymentorders/09ccd29a-7c4f-4752-9396-12100cbfecce",
"rel": "update-paymentorder-expandinstrument",
"contentType": "application/json"
},
{
"method": "GET",
"href": "https://ecom.externalintegration.payex.com/paymentmenu/5a17c24e-d459-4567-bbad-aa0f17a76119",
"rel": "redirect-paymentorder",
"contentType": "text/html"
},
{
"method": "GET",
"href": "https://ecom.externalintegration.payex.com/paymentmenu/core/scripts/client/px.paymentmenu.client.js?token=5a17c24e-d459-4567-bbad-aa0f17a76119&culture=nb-NO",
"rel": "view-paymentorder",
"contentType": "application/javascript"
}
]
}
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 | └➔ generateRecurrenceToken
|
bool |
Determines whether a recurrence token should be generated. A recurrence token is primarily used to enable future recurring payments – with the same token – through server-to-server calls. Default value is false . |
|
check | └➔ userAgent
|
string |
The user agent of the payer. | |
check | └➔ language
|
string |
The language of the payer. | |
check | └➔ urls
|
object |
The urls object, containing the URLs relevant for the payment order. |
|
check | └─➔ hostUrls
|
array |
The array of URIs valid for embedding of Swedbank Pay Hosted Views. | |
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 URI to redirect the payer to if the payment is canceled, either by the payer or by the merchant trough an abort request of the payment or paymentorder . |
||
└─➔ paymentUrl
|
string |
The URI 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 | └─➔ callbackUrl
|
string |
The URI to the API endpoint receiving POST requests on transaction activity related to the payment order. |
|
check | └─➔ termsOfServiceUrl
|
string |
The URI to the terms of service document the payer must accept in order to complete the payment. Note that this field is not required unless generateReferenceToken or generateRecurrenceToken is also submitted in the request. This is the Merchants, not the Swedbank Pay Terms of Service. HTTPS is a requirement. |
|
check | └─➔ logoUrl
|
string |
With permission and activation on your contract, sending in a logoUrl will replace the Swedbank Pay logo with the logo sent in. If you do not send in a logoUrl , then no logo and no text is shown. Without permission or activation on your contract, sending in a logoUrl has no effect. Read more about this in Custom Logo. |
|
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. |
||
︎︎︎ | └─➔ consumerProfileRef
|
string |
The consumer profile reference as obtained through initiating a consumer session. | |
└─➔ email
|
string |
The e-mail address of the payer. Will be used to prefill the Checkin as well as on the payer’s profile, if not already set. Increases the chance for frictionless 3-D Secure 2 flow. | ||
└─➔ msisdn
|
string |
The mobile phone number of the Payer. Will be prefilled on Checkin page and used on the payer’s profile, if not already set. The mobile number must have a country code prefix and be 8 to 15 digits in length. The field is related to 3-D Secure 2. | ||
└─➔ workPhoneNumber
|
string |
The work phone number of the payer. Optional (increased chance for frictionless flow if set) and is related to 3-D Secure 2. | ||
└─➔ homePhoneNumber
|
string |
The home phone number of the payer. Optional (increased chance for frictionless flow if set) and is related to 3-D Secure 2. | ||
check | └➔ orderItems
|
array |
The array of items being purchased with the order. Used to print on invoices if the payer chooses to pay with invoice, among other things. orderItems is required in all requests. In capture requests it should only contain the items 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 a free-text field and 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. |
|
└➔ riskIndicator
|
array |
This optional object consist of information that helps verifying the payer. Providing these fields decreases the likelihood of having to promt for 3-D Secure 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 likelyhood 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. |
||
└─➔ 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. |
Field | Type | Description | |
---|---|---|---|
paymentorder |
object |
The payment order object. | |
└➔ id
|
string |
The relative URI and unique identifier of the paymentorder resource . Please read about URI Usage to understand how this and other URIs 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 |
|
└➔ state
|
string |
Ready , Pending , Failed or Aborted . Indicates the state of the payment order. Does not reflect the state of any ongoing payments initiated from the payment order. This field is only for status display purposes. |
|
└➔ 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. | |
└➔ userAgent
|
string |
The user agent string of the payer’s browser. | |
└➔ language
|
string |
sv-SE , nb-NO or en-US . |
|
└➔ urls
|
string |
The URI to the urls resource where all URIs related to the payment order can be retrieved. |
|
└➔ payeeInfo
|
string |
The payeeInfo object, containing information about the payee (the recipient of the money). See payeeInfo for details. |
|
└➔ payers
|
string |
The URI to the payers resource where information about the payee of the payment order can be retrieved. |
|
└➔ orderItems
|
string |
The URI to the orderItems resource where information about the order items can be retrieved. |
|
└➔ metadata
|
string |
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. |
|
└➔ payments
|
string |
The URI to the payments resource where information about all underlying payments can be retrieved. |
|
└➔ currentPayment
|
string |
The URI to the currentPayment resource where information about the current – and sole active – payment can be retrieved. |
|
└➔ operations
|
array |
The array of possible operations to perform, given the state of the payment order. See Operations for details. |
Response
The response back should look something like this (abbreviated for brevity):
Response
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
HTTP/1.1 201 Created
Content-Type: application/json
{
"paymentorder": {
"id": "/psp/paymentorders/09ccd29a-7c4f-4752-9396-12100cbfecce"
},
"operations": [
{
"href": "https://ecom.externalintegration.payex.com/paymentmenu/core/scripts/client/px.paymentmenu.client.js?token=5a17c24e-d459-4567-bbad-aa0f17a76119&culture=sv-SE",
"rel": "view-paymentorder",
"method": "GET",
"contentType": "application/javascript"
}
]
}
Field | Type | Description |
---|---|---|
paymentorder |
object |
The payment order object. |
└➔ id
|
string |
The relative URI and unique identifier of the paymentorder resource . Please read about URI Usage to understand how this and other URIs should be used in your solution. |
operations |
array |
The array of possible operations to perform, given the state of the payment order. |
The paymentorder
object is abbreviated since it’s just the id
and
operations
we are interested in. Store the id
of the Payment Order
in your system to look up status on the completed payment later.
Then find the view-paymentorder
operation and embed its href
in a
<script>
element.
That script will then load the Seamless View for the Payment Menu. We will look
into how to hook that up next.
orderReference
must
be sent as a part of the POST
request to paymentorders
and must represent
the order ID of the webshop or merchant website.
Step 4: Display the Payment Menu
To load the Payment Menu from the JavaScript URL obtained in the back end 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, all inside the event handler for
onConsumerIdentified
.
The HTML code will be unchanged in this example.
For the guest Payment Menu, lines 23-44 in the JavaScript should be your main focus. They contain what you need to display the Payment Menu without Checkin.
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
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
var request = new XMLHttpRequest();
request.addEventListener('load', function () {
// We will assume that our own backend returns the
// exact same as what SwedbankPay returns.
response = JSON.parse(this.responseText);
var script = document.createElement('script');
// This assumes the operations from the response of the POST of the
// payment order is returned verbatim from the server to the Ajax:
var operation = response.operations.find(function (o) {
return o.rel === 'view-consumer-identification';
});
script.setAttribute('src', operation.href);
script.onload = function () {
payex.hostedView.consumer({
// The container specifies which id the script will look for
// to host the checkin component
container: 'checkin',
onConsumerIdentified: function onConsumerIdentified(consumerIdentifiedEvent) {
// When the consumer is identified, we need to perform an AJAX request
// to our server to forward the consumerProfileRef in a server-to-server
// POST request to the Payment Orders resource in order to initialize
// the Payment Menu.
var request = new XMLHttpRequest();
request.addEventListener('load', function () {
response = JSON.parse(this.responseText);
// This is identical to how we get the 'view-consumer-identification'
// script from the check-in.
var script = document.createElement('script');
var operation = response.operations.find(function (o) {
return o.rel === 'view-paymentorder';
});
script.setAttribute('src', operation.href);
script.onload = function () {
// When the 'view-paymentorder' script is loaded, we can initialize the
// Payment Menu inside our 'payment-menu' container.
payex.hostedView.paymentMenu({
container: 'payment-menu',
culture: 'sv-SE'
}).open();
};
// Append the Payment Menu 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('POST', '<Your-Backend-Endpoint-Here>', true);
request.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
// In this example, we send the entire Consumer Identified Event Argument
// Object as JSON to the server, as it contains the consumerProfileRef.
request.send(JSON.stringify(consumerIdentifiedEvent));
},
onShippingDetailsAvailable: function onShippingDetailsAvailable(shippingDetailsAvailableEvent) {
console.log(shippingDetailsAvailableEvent);
}
}).open();
};
// Appending the script to the head
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);
});
// Place in your own API endpoint here.
request.open('POST', '<Your-Backend-Endpoint-Here>', true);
request.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
// We send in the previously mentioned request here to the checkin endpoint.
request.send(JSON.stringify({
operation: 'initiate-consumer-session',
language: 'sv-SE',
shippingAddressRestrictedToCountryCodes : ['NO', 'SE']
}));
This should bring up the Payment Menu in a Seamless View looking like this, depending on whether the payer is logged in (top two) or a guest user (bottom two). Payments done in SEK will have radio buttons for choosing debit or credit card.
When the the payment is completed, the Payment Menu script will be signaled and
a full redirect to the completeUrl
sent in with the Payment Order will be
performed. When the completeUrl
on your server is hit, you can inspect the
status on the stored paymentorder.id
on the server, and then perform
capture
. If the payment is a Sale
or one-phase purchase, it will be
automatically captured. A third scenario is if the goods are sent physically to
the payer; then you should await capture until after the goods have been sent.
You may open and close the payment menu using .open()
and .close()
functions. You can also invoke .refresh()
to
update the Payment Menu after any changes to the
order.
Below, you will see a complete overview of the payment menu process. Notice that there are two ways of performing the payment:
- Consumer perform payment out of
iframe
. - Consumer perform payment within
iframe
.
sequenceDiagram
participant Consumer
participant Merchant
participant SwedbankPay as Swedbank Pay
rect rgba(138, 205, 195, 0.1)
activate Consumer
note left of Consumer: Payment Menu
Consumer ->>+ Merchant: Initiate Purchase
deactivate Consumer
Merchant ->>+ SwedbankPay: POST /psp/paymentorders (paymentUrl, payer)
deactivate Merchant
SwedbankPay -->>+ Merchant: rel:view-paymentorder
deactivate SwedbankPay
Merchant -->>- Consumer: Display Payment Menu on Merchant Page
activate Consumer
Consumer ->> Consumer: Initiate Payment Menu Hosted View (open iframe)
Consumer -->>+ SwedbankPay: Show Payment UI page in iframe
deactivate Consumer
SwedbankPay ->>+ Consumer: Do payment logic
deactivate SwedbankPay
opt Consumer perform payment out of iFrame
Consumer ->> Consumer: Redirect to 3rd party
Consumer ->>+ 3rdParty: Redirect to 3rdPartyUrl URL
deactivate Consumer
3rdParty -->>+ Consumer: Redirect back to paymentUrl (merchant)
deactivate 3rdParty
Consumer ->> Consumer: Initiate Payment Menu Hosted View (open iframe)
Consumer ->>+ SwedbankPay: Show Payment UI page in iframe
deactivate Consumer
SwedbankPay ->> Consumer: Do payment logic
end
SwedbankPay -->> Consumer: Payment status
deactivate SwedbankPay
alt If payment is completed
activate Consumer
Consumer ->> Consumer: Event: onPaymentCompleted
Consumer ->>+ Merchant: Check payment status
deactivate Consumer
Merchant ->>+ SwedbankPay: GET <paymentorder.id>
deactivate Merchant
SwedbankPay ->>+ Merchant: rel: paid-paymentorder
deactivate SwedbankPay
opt Get PaymentOrder Details (if paid-paymentorder operation exist)
activate Consumer
deactivate Consumer
Merchant ->>+ SwedbankPay: GET rel: paid-paymentorder
deactivate Merchant
SwedbankPay -->> Merchant: Payment Details
deactivate SwedbankPay
end
end
opt If payment is failed
activate Consumer
Consumer ->> Consumer: Event: OnPaymentFailed
Consumer ->>+ Merchant: Check payment status
deactivate Consumer
Merchant ->>+ SwedbankPay: GET {paymentorder.id}
deactivate Merchant
SwedbankPay -->>+ Merchant: rel: failed-paymentorder
deactivate SwedbankPay
opt Get PaymentOrder Details (if failed-paymentorder operation exist)
activate Consumer
deactivate Consumer
Merchant ->>+ SwedbankPay: GET rel: failed-paymentorder
deactivate Merchant
SwedbankPay -->> Merchant: Payment Details
deactivate SwedbankPay
end
end
activate Merchant
Merchant -->>- Consumer: Show Purchase complete
opt PaymentOrder Callback (if callbackUrls is set)
activate Consumer
deactivate Consumer
SwedbankPay ->> Merchant: POST Payment Callback
end
end
Now that you have completed the Payment Menu integration, you can move on to finalizing the payment in the After Payment section.