Plants
& More

Swish Payment Method

This example demonstrates a payment form using the Swish payment method, which supports three user flows: phone number entry, QR code scan, and mobile app redirection. Swish is a payment method where the customer authorizes the payment using their mobile banking app.

Payment flow technical overview

The full transaction involves a few straightforward steps:

  • The website collects customer input (e.g. phone number), lets the customer choose their preferred flow (phone number entry, QR code, or mobile app redirection) and sends it to the backend to initiate a payment.
  • The backend uses Shift4 API to create a Payment Method, and then a Charge using the returned Payment Method ID.
  • The Charge initially has a pending status and flow.nextAction equals app_redirect, qr_code or mobile_app_confirmation depending on the chosen flow.
  • Depending on the selected flow, the customer either:
    • for mobile_app_confirmation, opens their Swish app to confirm the transaction,
    • for qr_code, scans a generated QR code using the Swish app, or
    • for app_redirect, is redirected directly into the Swish mobile app, if supported.
  • Soon after, the Charge status is updated to successful or failed depending on the payment outcome.

Client object ID

Every Charge includes a clientObjectId, which can be used with shift4.js. It allows retrieving all necessary payment information in the browser without exposing sensitive data.

Simplified integration with shift4.js

By using shift4.js, handling the Swish flow becomes easier. It can manage redirects and automatically track the final payment status for you.

To use this functionality, pass the clientObjectId from your server to the browser and invoke the handleChargeNextAction method with it. This will trigger request to Swish and wait for the result before resolving.

You’ll need to access clientObjectId in two situations:

  • Right after the Charge is created on your backend – return it to the frontend.
  • When the customer is redirected back to your website – it will be part of the return URL's query parameters.

Showing final result

Once the payment is completed, handleChargeNextAction will resolve with a minimal Charge object, exposing only the required result information, ensuring user privacy and security.

Example scenarios

This example always succeeds for qr code and mobile app redirection, simulating user authorizing the payment in their mobile application.

When using phone number entry, you can simulate both successful and unsuccessful scenarios.

For mobile app redirection to work, this example needs to be opened on a mobile phone.

Testing numbers

The following phone numbers result in a successful transaction:

  • 48123456789 (with 5 seconds delay)
  • 41123456789 (with 10 seconds delay)
  • 46766962500 (with 60 seconds delay)

The following phone numbers result in a declined transaction:

  • 48987654321 (with 5 seconds delay)
  • 41987654321 (with 10 seconds delay)
  • 46764402400 (with 60 seconds delay)


@AjaxController
@RequestMapping("/ajax/examples/charge-with-swish")
@RequiredArgsConstructor
class ExamplesAjaxChargeWithSwishController {

    @PostMapping("/payment")
    Map ajaxPaymentMethod(@RequestBody PaymentMethodExampleRequest exampleRequest) throws IOException {
        try (Shift4Gateway shift4Gateway = createShift4GatewayForPaymentMethods()) {

            // create payment method
            var paymentMethodRequest = new PaymentMethodRequest(PaymentMethodType.SWISH)
                    .billing(new BillingRequest()
                            .name(exampleRequest.name)
                            .phone(exampleRequest.phone)
                            .address(new AddressRequest().country("SE")))
                    .swish(new PaymentMethodRequest.Swish(exampleRequest.swishLinkMethod));
            var paymentMethod = shift4Gateway.createPaymentMethod(paymentMethodRequest);

            // create charge using payment method
            var chargeRequest = new ChargeRequest(100, "USD")
                    .paymentMethod(new PaymentMethodRequest(paymentMethod.getId()))
                    .flow(new ChargeFlowRequest()
                            .returnUrl(getSiteUrl() + "/examples/charge-with-swish"));
            var charge = shift4Gateway.createCharge(chargeRequest);

            // pass clientObjectId of charge to frontend
            return singletonMap("clientObjectId", charge.getClientObjectId());

        } catch (Shift4Exception e) {
            throw new BadRequestException(e.getMessage());
        }
    }

    static class PaymentMethodExampleRequest {
        SwishLinkMethod swishLinkMethod;
        String name;
        String phone;
    }
}