Pay with Klarna

OpenPay provides Klarna access via the <ElementsForm /> component. You can get their handlers directly from the function-as-child callback.

This allows you to:

• Check availability (isAvailable)

• Trigger the payment flow with startFlow(...)

Accessing Klarna from <ElementsForm />

Wrap your payment form in <ElementsForm />. Inside the render prop callback, you’ll receive klarna and submission helpers.

<ElementsForm
      checkoutSecureToken={`checkout-secure-token-uuid`}
      onCheckoutSuccess={onCheckoutSuccess}
      onCheckoutError={onCheckoutError}
    >
      {({ submit, klarna, submitWith }) => (
        <>
          {/* Card fields and Billing Fields here */}
        </>
      )}
</ElementsForm>

Klarna object shape

klarna object has the following structure:

{
    processors: PaymentProcessor[];
    isAvailable: boolean;
    isLoading: boolean;
    startFlow: (customParams?: KlarnaFlowCustomParams) => Promise<void>;
}

Starting the payment flow

Only call startFlow if the method is available. You can pass the processor explicitly, or omit it if there's only one available.

{klarna.isAvailable && (
  <button
    onClick={() =>
      klarna.startFlow()
    }
  >
    Pay with Klarna
  </button>
)}

Calling klarna.startFlow(params) inside <ElementsForm /> is functionally equivalent to calling submitWith('klarna', params) when using OpenPay.js.