Type Alias PaymentRequest

PaymentRequest: {
    paymentRequestId?: string;
    state: PaymentRequestState;
    stateContext?: PaymentRequestStateContext;
    stateReason?: PaymentRequestStateReason;
    abort(): Promise<void>;
    cancel(): Promise<void>;
    fetch(): Promise<PaymentRequest>;
    initiate(
        data?: () => PaymentRequestData | Promise<PaymentRequestData>,
        options?: PaymentRequestOptions,
    ): Promise<void>;
    prepare(
        data?: PaymentRequestData | Promise<PaymentRequestData>,
        options?: PaymentRequestOptions,
    ): Promise<void>;
    submit(
        data?: PaymentRequestData,
        options?: PaymentRequestOptions,
    ): Promise<void>;
    update(data?: PaymentRequestData): Promise<void>;
}

A Payment Request represents a request for a payment. The Payment Request lifecycle is defined in PaymentRequestState.

A Payment Request is created by the integrator using Klarna.Payment.request().

Payment requests can be created with initial data (PurchaseContext/TokenContext, options and paymentRequestId). If a payment request is created without initial data that data is required to be provided when calling a method on the payment request (initiate, prepare, submit, patch).

The initial payment request is also passed in the click handler for buttons. In the click handler, you can modify the request and choose whether you want to initiate the request.

Example of how to programmatically create and initiate a payment request without the Klarna payment button.

// Note that nothing is actually persisted server until initiate is called.
const paymentRequest = Klarna.Payment.request()

function myClickHandler() {
  // payment request is patched with data provided in method calls
  try {
    await paymentRequest.initiate({
      currency: "USD",
      paymentAmount: 1000
    })
  } catch (error) {
    console.error("Failed to initiate payment request", error)
  }
}

Klarna.on("update", (paymentRequest) => {
 // Handle payment request state transitions
}))

<button onclick="myClickHandler()">Place payment</button>

Type declaration

  • Optional ReadonlypaymentRequestId?: string

    Unique identifier of this payment request

  • Readonlystate: PaymentRequestState

    Current state of the payment request

  • Optional ReadonlystateContext?: PaymentRequestStateContext

    Context for the current state of the payment request

  • Optional ReadonlystateReason?: PaymentRequestStateReason

    Reason why the payment request is in its current state

  • abort:function
    • abort(): Promise<void>

    • Abort the payment request.

      The payment request state changes to 'SUBMITTED' and the interaction is aborted e.g. a popup is closed.

      Returns Promise<void>

  • cancel:function
    • cancel(): Promise<void>

    • Cancel a payment request that is in the PENDING_CONFIRMATION state.

      The payment request cannot be recovered once cancelled. A new request has to be created by calling Payment.request()

      Returns Promise<void>

  • fetch:function
    • fetch(): Promise<PaymentRequest>

    • Fetch the latest information from the backend, this discards any local modifications.

      Returns Promise<PaymentRequest>

  • initiate:function
    • initiate(
          data?: () => PaymentRequestData | Promise<PaymentRequestData>,
          options?: PaymentRequestOptions,
      ): Promise<void>

    • Initiate the Payment Request.

      This triggers the consumer interactive payment flow.

      Payment Request data and Payment Request options can be passed to patch the payment request before submission.

      Parameters

      • Optionaldata: () => PaymentRequestData | Promise<PaymentRequestData>

        A context, either a purchase, a token or both. It can be a function returning a promise that resolves to a PaymentRequestData. The function returning the promise is mainly used for the case where AccountID is needed to be updated in runtime.

      • Optionaloptions: PaymentRequestOptions

        Payment Request options

      Returns Promise<void>

  • prepare:function
    • prepare(
          data?: PaymentRequestData | Promise<PaymentRequestData>,
          options?: PaymentRequestOptions,
      ): Promise<void>

    • Prepare a Payment Request.

      Equivalent to an initiate, but guarantees that the Payment Request can be updated after the consumer has gone through the payment flow. This can be used for multi-step express checkouts, or in checkout flows where it is desired to complete the Klarna flow as early as possible.

      Context and Payment Request options can be passed to patch the payment request before submission.

      Note that an initiate() must be called to complete the flow, if the underlying funding source requires interaction or the payment amount is substantially increased a secondary user interaction is triggered.

      Parameters

      • Optionaldata: PaymentRequestData | Promise<PaymentRequestData>

        A payment context, either a purchase, a token or both. It can be a promise that resolves to a PaymentRequestData. The promise is mainly used for the case where AccountID is needed to be updated in runtime.

      • Optionaloptions: PaymentRequestOptions

        Payment Request options

      Returns Promise<void>

  • submit:function
    • submit(
          data?: PaymentRequestData,
          options?: PaymentRequestOptions,
      ): Promise<void>

    • Manually submit a Payment Request to Klarna. Context and Payment Request options can be passed to patch the payment request before submission.

      This is typically not needed as the payment request is automatically submitted as part of initiate/prepare.

      Parameters

      Returns Promise<void>

  • update:function
    • update(data?: PaymentRequestData): Promise<void>

    • Update the payment request with the given context. This operation can only be performed when the state of the payment request is SUBMITTED.

      Parameters

      Returns Promise<void>

Settings

Member Visibility