Payment Gateway SDK

Use Payment Gateway to offer users embedded payments.

Payment Session

Create a payment session with the following mutation query:

Loading GraphiQL...

The token in the response can be now be passed to the payment component.

Payment Component

The component bundle is available as an IIFE module namespaced under kronor: The example uses Swish for the payment method, see the table below for a list of supported payment methods.

<script src="https://payment-gateway.kronor.io/iife/index.js"></script>

const $swishPaymentContainer = document.querySelector('#swish-payment-component')
const $swishPaymentStatus = document.querySelector('#swish-payment-status')

kronor.swishPaymentMcom({
  container: $swishPaymentContainer,
  authToken, // session payment token
  useComponentPage: false,
  returnUrl: 'http://localhost',
  onSuccess: () => {
    $swishPaymentStatus.innerHTML = 'Paid succesfully'
  },
  onError: error => {
    $swishPaymentStatus.innerHTML = `Error: ${error}`
  }
})

Or as an ESM module:

const $swishPaymentContainer = document.querySelector('#swish-payment-component')
const $swishPaymentStatus = document.querySelector('#swish-payment-status')

import('https://payment-gateway.kronor.io/esm/index.js')
  .then((kronor) => {
    kronor.swishPaymentMcom({
      container: $swishPaymentContainer,
      authToken, // session payment token
      useComponentPage: false,
      returnUrl: 'http://localhost',
      onSuccess: () => {
        $swishPaymentStatus.innerHTML = 'Paid succesfully'
      },
      onError: error => {
        $swishPaymentStatus.innerHTML = `Error: ${error}`
      }
    })
  });

Specify container to render the component into DOM and pass the session token as authToken.

Once rendered, the component will make a payment request and display a QR code the user can scan with the Swish app. Additionally, if used on mobile, there is a button to launch the Swish app.

After a successful payment the Swish app will redirect the user to returnUrl.

Use onSuccess/onError to handle payment flow events.

Set useComponentPage to true if you would like the user to be redirected to a separate page displaying the component instead of embedding it in your page.

When using a googlePayPayment, set googleMerchantName and googleMerchantId to the values of your google merchant’s merchantName and merchantId. You should see these values on the google business console page.

Supported Payment Methods

The table below lists the supported payment methods. Use the respective kronor.* function to render the component for a specific payment method.

Supported Payment Methods

Payment Method	Component function name
Swish	kronor.swishPaymentMcom
Bank Transfer	kronor.bankTransferPayment
Credit Card	kronor.creditCardPayment
MobilePay	kronor.mobilePayPayment
Vipps	kronor.vippsPayment
PayPal	kronor.payPalPayment
Przelewy24 (P24)	kronor.p24Payment
PointsPay	kronor.pointspayPayment
Google Pay	kronor.googlePayPayment

Payment Component Page

A stand-alone page is available that renders the payment component. It can be used e.g. for providing a better experience on mobile devices with smaller screens.

The page can be accessed at:

Payment Component Page URLs

Environment	URL
Staging	https://payment-gateway.staging.kronor.io/payment
Production	https://payment-gateway.kronor.io/payment

Provide the following URL parameters when opening the page:

Page URL Parameters

Parameter	Description
env	The environment to use the component in: set to staging or prod
paymentMethod	supported values are swish, creditCard, mobilePay, vipps, paypal, bankTransfer, p24, pointspay, googlePay
token	The Payment Session token
merchantReturnUrl	The URL to redirect to after a completed payment
googleMerchantName	merchant’s merchantName in google pay, only required when paymentMethod is googlePay
googleMerchantId	merchant’s merchantId in google pay, only required when paymentMethod is googlePay