Payment Menu Events
During operation in the Payment Menu, several events can occur. They are described below.
Event Overrides: Adding an event handler to one of the following events overrides the default event handler, meaning your custom event handler will have to do what the default event handler did. If you don’t, the behavior of the event is going to be undefined. Just adding an event handler for logging purposes is therefore not possible, the event handler will have to perform some functionality similar to the event handler you are overriding.
onAborted
Triggered when the payer clicks the “Abort” link on the redirect page in Payment Menu.
As the Seamless View payment menu doesn’t have a cancel button (present in the Redirect integration), you need to provide this button for the payer at your end.
When the payer presses the cancel button, we recommend sending an API request aborting the payment so it can’t be completed at a later time. When we receive the request, an abort event will be raised the next time the UI fetches information from the server. Because of that, you should also refresh after aborting, as this will trigger the event.
It will be raised with the following event argument object:
onAborted event object
1
2
3
4
5
{
"event": "OnAborted",
"paymentOrder": { "id": "/psp/paymentorders/7e6cdfc3-1276-44e9-9992-7cf4419750e1" },
"redirectUrl": "https://example.com/cancelled"
}
Field | Type | Description |
---|---|---|
event |
string |
The name of the event raised. |
paymentOrder.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. |
redirectUrl |
string |
The URL the user will be redirect to after a cancelled payment. |
onCheckoutLoaded
Triggered when the payment menu is rendered after being opened.
Subscribe to this event if you need total control over the height of Swedbank Pay’s payment frame. This is the initial height of the frame when loaded.
If no callback method is set, no handling action will be done. It will be raised with the following event argument object:
onCheckoutLoaded event object
1
2
3
4
5
{
"event": "OnCheckoutLoaded",
"paymentOrder": { "id": "/psp/paymentorders/7e6cdfc3-1276-44e9-9992-7cf4419750e1" },
"bodyHeight": "[clientHeight of iframe content]"
}
Field | Type | Description |
---|---|---|
event |
string |
The name of the event raised. |
paymentOrder.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. |
bodyHeight |
string |
The height of the client’s iframe content. |
onCheckoutResized
Triggered every time that a reconfiguration leads to resizing of the Checkout Seamless View.
Subscribe to this event if you need total control over the height of Swedbank Pay’s payment frame. The payment methods require individual heights when rendering their content. This event triggers each time the iframe needs resizing during a payment.
If no callback method is set, no handling action will be done. It will be raised with the following event argument object:
onCheckoutResized event object
1
2
3
4
5
{
"event": "OnCheckoutResized",
"paymentOrder": { "id": "/psp/paymentorders/7e6cdfc3-1276-44e9-9992-7cf4419750e1" },
"bodyHeight": "[clientHeight of iframe content]"
}
Field | Type | Description |
---|---|---|
event |
string |
The name of the event raised. |
paymentOrder.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. |
bodyHeight |
string |
The height of the client’s iframe content. |
onError
Triggered during terminal errors or if the configuration fails validation.
Subscribe to this event if you want some action to occur on your site when an error happens during the payment.
If no callback method is set, no handling action will be done. It will be raised with the following event argument object:
onError event object
1
2
3
4
5
{
"event": "OnError",
"paymentOrder": { "id": "/psp/paymentorders/7e6cdfc3-1276-44e9-9992-7cf4419750e1" },
"details": "English descriptive text of the error"
}
Field | Type | Description |
---|---|---|
event |
string |
The name of the event raised. |
paymentOrder.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. |
details |
string |
A human readable and descriptive text of the error. |
onEventNotification
Triggered whenever any other public event is called. It does not prevent their handling.
Subscribe to this event in order to log actions that are happening in the payment flow at Swedbank Pay.
onEventNotification
is raised with the following event argument object:
onEventNotification event object
1
2
3
4
5
6
7
{
"event": "OnEventNotification",
"paymentOrder": { "id": "/psp/paymentorders/7e6cdfc3-1276-44e9-9992-7cf4419750e1" },
"sourceEvent": "OnCheckoutLoaded | OnCheckoutResized | OnError |
OnPayerIdentified | OnInstrumentSelected | OnPaid | OnAborted |
OnOutOfViewRedirect | OnTermsOfServiceRequested | OnOutOfViewOpen"
}
Field | Type | Description |
---|---|---|
event |
string |
The name of the event raised. |
paymentOrder.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. |
sourceEvent |
string |
A human readable and descriptive text with the event name. |
onInstrumentSelected
Triggered when a user actively changes payment method in the Payment Menu.
Subscribe to this event if actions, e.g. showing an information text, are required on your side if the payer changes payment method.
If no callback method is set, no handling action will be done. It will be raised with the following event argument object:
onInstrumentSelected event object
1
2
3
4
5
{
"event": "OnInstrumentSelected",
"paymentOrder": { "id": "/psp/paymentorders/7e6cdfc3-1276-44e9-9992-7cf4419750e1" },
"instrument": "creditcard | vipps | swish | invoice",
}
Field | Type | Description |
---|---|---|
event |
string |
The name of the event raised. |
paymentOrder.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. |
instrument |
string |
Creditcard , vipps , swish , invoice . The payment method selected by the user. |
onOutOfViewOpen
Triggered when another tab is opened in the browser, like the information page for onboarding of stored cards, or Swedbank Pay’s owner TOS.
The event cannot be opened as a modal since the payer needs to see that this is a link on Swedbank Pay’s domain.
Subscribe to this event if you do not want the default handling of these links. But e.g. want to redirect the payer to a new page, and not just another tab within the same browser.
If no callback method is set, the url will be opened in a new tab. It will be raised with the following event argument object:
onOutOfViewOpen event object
1
2
3
4
5
{
"event": "OnOutOfViewOpen",
"paymentOrder": { "id": "/psp/paymentorders/7e6cdfc3-1276-44e9-9992-7cf4419750e1" },
"openUrl": "https://example.com/external"
}
Field | Type | Description |
---|---|---|
event |
string |
The name of the event raised. |
paymentOrder.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. |
openUrl |
string |
The external URL where the user will be redirected. |
onOutOfViewRedirect
Triggered when a user is redirected to a separate web page, like 3-D Secure or BankID signing.
Subscribe to this event if it’s not possible to redirect the payer directly from within Swedbank Pay’s payment frame.
If no callback method is set, you will be redirected to the relevant url. It will be raised with the following event argument object:
onOutOfViewRedirect event object
1
2
3
4
5
{
"event": "OnOutOfViewRedirect",
"paymentOrder": { "id": "/psp/paymentorders/7e6cdfc3-1276-44e9-9992-7cf4419750e1" },
"redirectUrl": "https://example.com/external"
}
Field | Type | Description |
---|---|---|
event |
string |
The name of the event raised. |
paymentOrder.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. |
redirectUrl |
string |
The external URL where the user will be redirected. |
onPaid
This event triggers when the payer successfully completes or cancels the payment.
Subscribe to this event if actions are needed on your side other than the
default handling of redirecting the payer to your completeUrl
. Call GET
on
the paymentOrder
to receive the actual payment status, and take appropriate
actions according to it.
It will be raised with the following event argument object:
onPaid event object
1
2
3
4
5
{
"event": "OnPaid",
"paymentOrder": { "id": "/psp/paymentorders/7e6cdfc3-1276-44e9-9992-7cf4419750e1" },
"redirectUrl": "https://example.com/success"
}
Field | Type | Description |
---|---|---|
event |
string |
The name of the event raised. |
paymentOrder.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. |
redirectUrl |
string |
The URL the user will be redirected to after completing the payment. |
onPaymentAttemptAborted
This event mirrors onPaymentAborted
from Checkout v2. Subscribe to it if you
want to know when a user cancels their payment. The onPaymentAttemptAborted
event is raised with the following event argument object:
onPaymentAttemptAborted event object
1
2
3
4
5
{
"event": "OnPaymentAttemptAborted",
"paymentOrder": { "id": "/psp/paymentorders/7e6cdfc3-1276-44e9-9992-7cf4419750e1" },
"redirectUrl": "https://example.com/cancelled"
}
Field | Type | Description |
---|---|---|
event |
string |
The name of the event raised. |
paymentOrder.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. |
redirectUrl |
string |
The URL the user will be redirected to after a cancelled payment. |
onPaymentAttemptFailed
This event mirrors onPaymentTransactionFailed
from Checkout v2. Subscribe to
it if you want to know when a payment attempt fails, and further attempts can be
made for the payment.
An error message will appear in the payment UI, and the payer will be able to
try again or choose another payment method. The onPaymentAttemptFailed
event is raised with the following event argument object:
onPaymentAttemptFailed event object
1
2
3
4
5
{
"event": "OnPaymentAttemptFailed",
"paymentOrder": { "id": "/psp/paymentorders/7e6cdfc3-1276-44e9-9992-7cf4419750e1" },
"details": "[HttpCode ProblemTitle]"
}
Field | Type | Description |
---|---|---|
event |
string |
The name of the event raised. |
paymentOrder.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. |
details |
string |
A human readable and descriptive text of the error. |
onPaymentAttemptStarted
This event mirrors onPaymentCreated
from Checkout v2. Subscribe to it if you
want to know when a payer has selected their payment method and actively
attempts to perform a payment.
The onPaymentAttemptStarted
event is raised with the following event argument
object:
onPaymentAttemptStarted event object
1
2
3
4
5
{
"event": "OnPaymentAttemptStarted",
"paymentOrder": { "id": "/psp/paymentorders/7e6cdfc3-1276-44e9-9992-7cf4419750e1" },
"instrument": "creditcard",
}
Field | Type | Description |
---|---|---|
event |
string |
The name of the event raised. |
paymentOrder.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. |
instrument |
string |
Creditcard , vipps , swish , invoice . The payment method selected when initiating the payment. |
onTermsOfServiceRequested
Triggered when the user clicks on the “Display terms and conditions” link.
Subscribe to this event if you don’t want the default handling of the
termsOfServiceUrl
. Swedbank Pay will open the termsOfServiceUrl
in a new tab within the same browser by default.
If no callback method is set, terms and conditions will be displayed in an overlay or a new tab. It will be raised with the following event argument object:
onTermsOfServiceRequested event object
1
2
3
4
5
{
"event": "OnTermsOfServiceRequested",
"paymentOrder": { "id": "/psp/paymentorders/<paymentorderId>"},
"termsOfServiceUrl": "https://example.org/terms.html"
}
Field | Type | Description |
---|---|---|
event |
string |
The name of the event raised. |
paymentOrder.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. |
termsOfServiceUrl |
string |
The URL containing Terms of Service and conditions. |