Type Alias KlarnaPayment

KlarnaPayment: {
    button(
        configuration: KlarnaPaymentButtonConfiguration,
    ): KlarnaPaymentButton;
    canMakePayment(
        options: {
            country?: Country;
            currency: Currency;
            paymentAmount?: number;
        },
    ): Promise<boolean>;
    on(
        event: "update",
        callback: (paymentRequest: PaymentRequest) => Promise<boolean>,
    ): void;
    on(
        event: "shippingaddresschange",
        callback: (
            paymentRequest: PaymentRequest,
            shippingAddress: AddressWithName,
        ) => Promise<ShippingChangeResponse>,
    ): void;
    on(
        event: "shippingoptionselect",
        callback: (
            paymentRequest: PaymentRequest,
            shippingOption: SelectedShippingOption,
        ) => Promise<ShippingOptionSelectResponse>,
    ): void;
    request(
        data: string | PaymentRequestData,
        options?: PaymentRequestOptions,
    ): PaymentRequest;
}

The Klarna Payment interface provides access to the payment request API.

The payment interface can have one on-going payment request at a time. The SDK keeps track of the current on-going request.

Accepting a payment using the Klarna Payment button

const klarna = ...;

// Handle lifecycle update events
klarna.Payment.on("update", async (paymentRequest) => {
  // The ongoing payment request is available in the update event handler
  const state = paymentRequest.state;
  if (state == "PENDING_CONFIRMATION") {
    await fetch("https://example.com/my-backend", {
      method: 'POST',
      body: JSON.stringify({
        klarnaConfirmationToken: paymentRequest.stateContext.paymentConfirmationToken
      });
    });
  }
});

// Create a payment request
klarna.Payment.request({
  currency: "USD",
  paymentAmount: 1000
});

// Handle button click event
klarna.Payment.button().on("click", (paymentRequest, button) => {
  // the ongoing payment request is available in the click handler
  paymentRequest.initiate();
}).mount("#button-container");

 <div id="button-container"></div>

Type declaration

  • button:function
  • canMakePayment:function
    • canMakePayment(
          options: {
              country?: Country;
              currency: Currency;
              paymentAmount?: number;
          },
      ): Promise<boolean>

    • Check if the consumer can make a payment with a given payment amount in the given currency and country.

      Parameters

      • options: { country?: Country; currency: Currency; paymentAmount?: number }

        The options for the payment check.

        • Optionalcountry?: Country

          Country code.

        • currency: Currency

          Currency code.

        • OptionalpaymentAmount?: number

          Payment amount.

      Returns Promise<boolean>

      • True if the consumer can make a payment.
  • on:function
    • on(
          event: "update",
          callback: (paymentRequest: PaymentRequest) => Promise<boolean>,
      ): void

    • Register event handler to handle payment request state transitions. See PaymentRequestState for state transitions.

      The handler is called when there is an update to the payment request, the handler may trigger even if there is no state transition.

      The current state is available in paymentRequest.state.

      During a redirection flow the update handler will trigger once your page has loaded. Pending updates are triggered even if the event handler is registered after the page has loaded to avoid need for polling.

      Example

      klarna.Payment.on("update", (paymentRequest) => {
        console.log(`Payment request is in state ${paymentRequest.state}`);
      });

      You can also use this event to handle scenarios where customer decided not to finish the purchase flow.

      The state will go from IN_PROGRESS to SUBMITTED if customer decided to abort the payment request - either closed the window in the ON_PAGE flow or went back in the REDIRECT flow.

      Example

      klarna.Payment.on("update", (paymentRequest) => {
        if(paymentRequest.previousState === "IN_PROGRESS" && paymentRequest.state === "SUBMITTED") {
          console.log("The purchase flow was aborted");
        }
      });

      Parameters

      • event: "update"

        update event, called on state transitions

      • callback: (paymentRequest: PaymentRequest) => Promise<boolean>

        Event callback handler.

      Returns void

    • on(
          event: "shippingaddresschange",
          callback: (
              paymentRequest: PaymentRequest,
              shippingAddress: AddressWithName,
          ) => Promise<ShippingChangeResponse>,
      ): void

    • Shipping address changed event handler, triggered when the consumer changes their shipping address during the payment flow.

      Depending on your implementation you can return 3 different payloads from the handler.

      1. If there is no preselected shipping option you should only provide a list of available shipping options.

      Example

      klarna.Payment.on("shippingaddresschange", (paymentRequest, shippingAddress) => {
       return {
        shippingOptions: [{
         shippingOptionReference: string;
         amount: number;
         displayName: string;
         description: string;
         shippingType?: ShippingType;
        }]
       }
      });
      1. If you can preselect one shipping option for the provided address, the whole flow is shorter. Then you should return not only the shipping option, but also the order payload updated with shipping details.

      Example

      klarna.Payment.on("shippingaddresschange", (paymentRequest, shippingAddress) => {
        const { shippingOptions } = fetch("/shipping-options", {
          method: "POST",
          body: {
            shipping_address: shippingAddress
          }
        })
        const selectedShippingOption = shippingOptions[0]
        const { lineItems, paymentAmount } = fetch("/cart", {
          method: "POST",
          body: {
            shipping_option: shippingOptions[0]
          }
        })

        return {
          paymentAmount,
          lineItems: [
            ...lineItems,
            {
              name: selectedShippingOption.name,
              quantity: 1,
              totalAmount: selectedShippingOption.amount
            }
          ],
          selectedShippingOptionReference: selectedShippingOption.reference
          shippingOptions: [{
           shippingOptionReference: string;
           amount: number;
           displayName: string;
           description: string;
           shippingType?: ShippingType;
          }]
        }
      });
      1. If the shipping address provided cannot be handled due to some constraints, you can reject it by returning the following.

      Example

      klarna.Payment.on("shippingaddresschange", (paymentRequest, shippingAddress) => {
        return {
          rejectionReason: klarna.Payment.ShippingRejectionReason.POSTAL_CODE_NOT_SUPPORTED
        }
      });

      The available rejection reasons are:

      • POSTAL_CODE_NOT_SUPPORTED
      • CITY_NOT_SUPPORTED
      • REGION_NOT_SUPPORTED
      • COUNTRY_NOT_SUPPORTED
      • ADDRESS_NOT_SUPPORTED

      If you did not return anything during the 10 seconds after receiving this event, consumer will see the error screen and payment request will be aborted.

      Parameters

      Returns void

    • on(
          event: "shippingoptionselect",
          callback: (
              paymentRequest: PaymentRequest,
              shippingOption: SelectedShippingOption,
          ) => Promise<ShippingOptionSelectResponse>,
      ): void

    • Shipping option selected event handler, triggered when the consumer selects a shipping option during the payment flow.

      Depending on your implementation you can return 2 different payloads from the handler:

      1. If the shipping option is correct, return the order payload updated with shipping details.

      Example

      klarna.Payment.on("shippingoptionselect", (paymentRequest, shippingOption) => {
        const { lineItems, paymentAmount } = fetch("/cart", {
          method: "POST",
          body: {
            shipping_option: shippingOption
          }
        })

        return {
          paymentAmount,
          lineItems: [
            ...lineItems,
            {
              name: 'Shipping option 1',
              quantity: 1,
              totalAmount: 500
            }
          ]
        }
      });
      1. If the shipping option provided cannot be handled due to some constraints, you can reject it by returning the following.

      Example

      klarna.Payment.on("shippingoptionselect", (paymentRequest, shippingAddress) => {
        return {
          rejectionReason: klarna.Payment.ShippingOptionRejectionReason.INVALID_OPTION
        }
      });

      The available rejection reasons are:

      • INVALID_OPTION

      If you did not return anything during the 10 seconds after receiving this event, consumer will see the error screen and payment request will be aborted.

      Parameters

      Returns void

  • request:function
    • request(
          data: string | PaymentRequestData,
          options?: PaymentRequestOptions,
      ): PaymentRequest

    • The request() interface retrieves the on-going request or creates a new request. This interface is typically not required when working with the payment buttons as payment requests are implicitly created and available in event callbacks.

      If this is called on a cancelled request, a new request is created. To cancel a request and restart the following pattern can be used.

       await klarna.Payment.request().cancel();
       klarna.Payment.request().initiate();

      Parameters

      Returns PaymentRequest

Settings

Member Visibility