Skip to content
Components SDK/
/
QR Code APMs

Last updated: 09 October 2026 | Change log

QR Code APMs

Integrate QR code and phone-notification payment journeys for supported APMs in our Components SDK.

After collecting payment details in the hosted component, send the session to the APMs API. Then use continue to render the next customer step in the iframe (QR code display or Swish waiting screen).

QR code APM flow

APMs APIMerchantComponents SDKCustomerAPMs APIMerchantComponents SDKCustomerConfigure and initialize Components SDK1Submit payment details for the selected method2Return session href3Submit payment request with session href4Return redirect payload containing QR code data5Pass QR code data using continue method6Display QR code7Complete payment in provider app8Poll transaction status9Return transaction status10Redirect customer to the status page11
APMs APIMerchantComponents SDKCustomerAPMs APIMerchantComponents SDKCustomerConfigure and initialize Components SDK1Submit payment details for the selected method2Return session href3Submit payment request with session href4Return redirect payload containing QR code data5Pass QR code data using continue method6Display QR code7Complete payment in provider app8Poll transaction status9Return transaction status10Redirect customer to the status page11

Handling APMs QR code or phone notification flows

Some Alternative Payment Methods (APMs) require an additional customer step after the payment is submitted.

QR code flow:

  • Pix
  • WeChat Pay
  • Swish

Phone notification flow:

  • Swish

QR code flow

  1. Submit the session to the APMs API and receive QR data: For QR-enabled methods, the APMs API response includes a populated redirect parameter containing QR-code data.

  2. Render the QR step in the SDK: Pass the redirect payload to the SDK using continue method. Example: components.continue('swish', { qrCode: 'iVBORw0KGgoAAAANSUhEUgAABbQAAAW0AQ...' }) The hosted iframe displays the QR code.

Components Swish qr code example
  1. Customer completes payment externally: Your customer scans the QR code using their mobile device and completes the payment in the provider app.

Phone notification flow

  1. Submit the session to the APMs API and check redirect: If redirect is empty, your customer chose the Swish phone notification flow.

  2. Start the waiting step in the SDK: Call continue with no payload (components.continue('swish')). The SDK shows a waiting screen with an 8-minute countdown.

Components Swish mobile example
  1. Customer confirms in Swish app: Your customer receives a phone notification and approves the transaction in the Swish app before the countdown expires.

Status handling and redirection

  1. Monitor payment status: While your customer completes the provider step, poll the status using the relevant API endpoint or consume webhook events.

  2. Redirect on terminal result: After success or failure is confirmed, redirect your customer to your final merchant-hosted page (for example, order confirmation or error page).

Note
  • The SDK is responsible for rendering the post-submit step in the iframe (QR display or Swish waiting screen).
  • Payment status checks and final redirection must be handled by you.
  • Always verify the payment status before showing a final outcome to your customer.