Payment Method Types/
Swish/
Client-side

Client-side implementation

You can use the Braintree Web SDK to build your Swish payment experience. The client-side integration lets you display payment buttons, detect whether customers are on desktop or mobile devices, show QR codes for desktop users to scan, and use app switching to redirect mobile users to the Swish app to complete payment.

Load Braintree Web SDKAnchorIcon

You can load the Braintree Web SDK v3 by including both the client component and the local payment component as <script> tags in your HTML page's <head> section.

  1. HTML
<script src="https://js.braintreegateway.com/web/3.131.0/js/client.min.js"></script>

<script src="https://js.braintreegateway.com/web/3.131.0/js/local-payment.min.js"></script>

Create client instanceAnchorIcon

Create a client instance using a client authorization token. Your server generates this token using the Braintree SDK and passes it to your client application. The client instance is required for all Swish payment operations.

Use braintree.client.create() to create the client instance.

  1. Callback
  2. Promise
// Initialize Braintree client with authorization token
braintree.client.create({
  authorization: 'YOUR_CLIENT_TOKEN'  // Generate this token server-side
}, function (clientErr, clientInstance) {
  if (clientErr) {
    console.error('Error creating client:', clientErr);
    return;
  }
  // Client instance ready - proceed to create local payment instance
  createLocalPaymentInstance(clientInstance);
});

Create local payment instanceAnchorIcon

Use braintree.localPayment.create() to create a local payment instance from your client instance. This instance provides the startPayment() method you will use to initiate Swish payment flows.

  1. Callback
  2. Promise
function createLocalPaymentInstance(clientInstance) {
  braintree.localPayment.create({
    client: clientInstance
  }, function (localPaymentErr, localPaymentInstance) {
    if (localPaymentErr) {
      console.error('Error creating local payment instance:', localPaymentErr);
      return;
    }

    // Local payment instance ready - proceed to setup Swish payment
    setupSwishPayment(localPaymentInstance);
  });
}

Render Swish payment buttonAnchorIcon

Add a Swish payment button to your checkout page. When clicked, the button initiates the Swish payment flow. If you use the QR code flow, you will also need a container element for the QR code. The SDK automatically injects the QR code into this container.

  1. HTML
<!-- Swish payment button -->
<button id="swish-button">Pay with Swish</button>
<!-- Container for QR code (required for QR code flow) -->
<div id="qr-code-container" style="display:none;"></div>

Configure payment experienceAnchorIcon

You can choose from three payment flows based on your integration requirements:

FlowDevice supportWebhooks required
Hosted flowDesktop and mobileNo
QR code flowDesktopYes
Mobile app switchMobileYes

Create paymentAnchorIcon

After configuring your client and local payment instances, you can initiate payments using the startPayment() method with flow-specific parameters.

Implement hosted flowAnchorIcon

The hosted flow redirects customers to a Braintree-managed payment page where they complete their Swish payment. This page automatically detects the device type and displays either a QR code (desktop) or switches to the Swish app (mobile).

The Braintree Web SDK supports two flow types for hosted payments:

  • Redirect flow: Redirects the customer to the payment page in the same browser window. Requires SDK version 3.111.0 or later. For more information, see redirect flow.
  • Popup flow: Opens the payment page in a popup window.
Prerequisites

Before you implement the hosted flow, register your redirect domains in the Braintree Control Panel for both sandbox and production environments. For more information, see domain registration.

In the client-side implementation,

  1. Attach an event listener to your Swish payment button.
  2. In the startPayment() method call, include the following data parameters:
    • paymentType: Set the parameter value to swish to specify Swish as the payment method.
    • paymentTypeCountryCode: Set the parameter value to SE to specify Sweden.
    • amount: Set to the payment amount in SEK.
    • currencyCode: Set the parameter value to SEK to specify Swedish Krona.
    • givenName: Set to the customer's first name.
    • surname: Set to the customer's last name.
    • fallback.url: Set to the URL where the customer returns if the payment fails or is canceled.
    • fallback.buttonText: Set to the text displayed on the return button. Example: Return to Store
    • swishOptions.returnUrl: Set to the URL where users will be redirected after completing the Swish payment.
    • onPaymentStart: Set to a callback function that receives data with the payment ID and continueCallback to proceed with the flow.

  3. Handle the payment response when the customer completes the payment and send the single-use token to your server.

  1. Callback
  2. Promise
localPaymentInstance.startPayment({
  paymentType: 'swish',
  paymentTypeCountryCode: 'SE',
  amount: '10.00',
  currencyCode: 'SEK',
  givenName: 'Joe',
  surname: 'Doe',
  fallback: {
    buttonText: 'Return to Store',
    url: 'https://example.com/my-checkout-page'
  },
  swishOptions: {
    returnUrl: 'https://example.com'
  },
  onPaymentStart: function (data, continueCallback) {
    // On desktop, this follows standard redirect flow
    console.log('Payment ID:', data.paymentId);
    continueCallback();
  }
}, function (startPaymentErr, payload) {
  if (startPaymentErr) {
    // Handle any error calling startPayment
    console.error(startPaymentErr);
    return;
  }

  // Submit payload.nonce to your server
  console.log('Payload', payload);
});


Next steps

After receiving the single-use token on your server, see Create transaction for server-side implementation details.

Implement QR code flowAnchorIcon

The QR code flow displays a scannable QR code directly on your checkout page. Customers use their Swish mobile app to scan the code and complete payment on their mobile device. Unlike the hosted flow, there is no redirection - the QR code is displayed in your specified container element.

In the client-side implementation,

  1. Ensure you have a container element for the QR code in your HTML.
  2. In the startPayment() method call, include the following data parameters:
    • paymentType: Set the parameter value to swish to specify Swish as the payment method.
    • paymentTypeCountryCode: Set the parameter value to SE to specify Sweden.
    • amount: Set to the payment amount in SEK.
    • currencyCode: Set the parameter value to SEK to specify Swedish Krona.
    • givenName: Set to the customer's first name.
    • surname: Set to the customer's last name.
    • swishOptions.requestQrCode: Set the parameter value to true to enable QR code generation.
    • swishOptions.qrContainer: Set to the CSS selector of the container where the QR code will be injected. Example: #qr-code-container
    • onPaymentStart: Set to a callback function that receives data with the payment ID.
  3. The SDK automatically injects the QR code into the specified container when the payment starts.

  1. Callback
  2. Promise
// This is Swish specific flow to render QR code.
// There is no redirection in this scenario.
// Merchant will receive nonce via webhook.

localPaymentInstance.startPayment({
  paymentType: 'swish',
  paymentTypeCountryCode: 'SE',
  amount: '10.00',
  currencyCode: 'SEK',
  givenName: 'Joe',
  surname: 'Doe',
  swishOptions: {
    requestQrCode: true,
    qrContainer: '#qr-code-container' // QR code will be automatically injected here
  },
  onPaymentStart: function (data) {
    console.log('Payment ID:', data.paymentId);
    // QR code is already displayed in the container
  }
}, function (startPaymentErr, payload) {
  if (startPaymentErr) {
    // Handle any error calling startPayment
    console.error(startPaymentErr);
    return;
  }
  // Merchant will receive nonce via webhook
});

Next steps

  • Implement webhooks to receive the single-use token. See Handle webhooks for server-side implementation.
  • Implement client-side polling to detect when payment completes. See Track payment status for implementation details.

Implement mobile app switch flowAnchorIcon

The mobile app switch flow automatically redirects customers from your mobile website to the Swish mobile app when they initiate payment from a mobile device browser.

In the client-side implementation,

  1. In the startPayment() method call, include the following data parameters:
    • paymentType: Set the parameter value to swish to specify Swish as the payment method.
    • paymentTypeCountryCode: Set the parameter value to SE to specify Sweden.
    • amount: Set to the payment amount in SEK.
    • currencyCode: Set the parameter value to SEK to specify Swedish Krona.
    • givenName: Set to the customer's first name.
    • surname: Set to the customer's last name.
    • fallback.url: Set to the URL where the customer returns if the payment fails or is canceled.
    • fallback.buttonText: Set to the text displayed on the return button. Example: Return to Store
    • swishOptions.returnUrl: Set to the URL where the customer returns after completing payment.
    • onPaymentStart: Set to a callback function that receives data with the payment ID and continueCallback to proceed with the flow.
  2. The SDK automatically triggers the redirect to the Swish mobile app when the customer is on a mobile device.

  1. Callback
  2. Promise
// Mobile app switch flow - direct redirect to Swish mobile app
// Automatically triggers when customer is on mobile browser
// Customer completes payment in Swish app
// Merchant receives nonce via webhook when payment completes

localPaymentInstance.startPayment({
  paymentType: 'swish',
  paymentTypeCountryCode: 'SE',
  amount: '10.00',
  currencyCode: 'SEK',
  givenName: 'Joe',
  surname: 'Doe',
  fallback: {
    buttonText: 'Return to Store',
    url: 'https://example.com/my-checkout-page'
  },
  swishOptions: {
    returnUrl: 'https://example.com/my-checkout-page' // optional
  },
  onPaymentStart: function (data, continueCallback) {
    // SDK automatically switches to Swish app on mobile
    console.log('Payment ID:', data.paymentId);
    continueCallback();
  }
}, function (startPaymentErr, payload) {
  if (startPaymentErr) {
    // Handle any error calling startPayment
    console.error(startPaymentErr);
    return;
  }
  // Merchant will receive nonce via webhook
});

Next steps

  • Implement webhooks to receive the single-use token. See Handle webhooks for server-side implementation.
  • Implement client-side polling to detect when payment completes. See Track payment status for implementation details.

Process paymentAnchorIcon

After the customer completes payment, handle the return flow and send the single-use token to your server.

Return handlingAnchorIcon

FlowReturn behavior
Hosted flow (redirect)Customer redirects back to your site automaticallyo
Hosted flow (popup)Popup window closes, control returns to parent page
QR code flowCustomer remains on payment page, no redirect occurs
Mobile app switch flowCustomer may or may not return to your site

Send single-use token to serverAnchorIcon

For hosted flow (redirect and popup)

You can send the single-use token from your client to your server endpoint. You can include the payment amount and any other transaction details in the request.

For QR code and mobile app switch flows

You can receive the single-use token directly on your server via webhook. You do not need to send it from the client. Your server-side webhook handler can receive the single-use token and create the transaction.

For these flows, you can implement client-side polling to check payment status on your server and update the UI accordingly.

Next steps