Buy Now Pay Later with Klarna

Integration with Buy Now Pay Later (BNPL) is supported through our PMT library and standalone via API.

This feature is automatically enabled for all platforms and merchants that are approved for Stripe payments. It can be disabled at the platform or merchant account level.

PMT Integration

PMT already has BNPL with Klarna built into it. To take advantage of this, we only need the minimum amount of data passed through. After this data is received, PMT will automatically redirect the customer into the Klarna interface.

In short, the only PMT changes required are to update initalization to include Set Mode + provide Amount & Klarna Return URL.

To initialize, PMT "setMode" should be "klarna-input".
The minimum new data required is:
1. Amount - Amount of the Klarna transaction
2. ReturnURL - The URL that the user should be returned to upon completion of the Klarna checkout. When Klara application is finished, Klarna will return to this merchant-defined ReturnURL.

Triggering Events

Events are triggered via:

pmt.trigger.EVENT_NAME();

The following events can be triggered: (See new mode: klarna-input)

Event Name	Input	Description
*setMode(mode)*	string	Changes the PMT mode (valid modes: 'cc-input', 'cc-swiper', 'ach-input', 'klarna-input')
submitForm()		Submits the form
setFormToSubmitted()		Set form to submitted, meaning validation messages will be displayed
resetForm()		Resets the form

Initialization Example

See initialization example below which includes a sample block with the Amount of $40 & ReturnURL.

<html>
  <head>
    <meta charset="utf-8" />
    <title>Payment Method Tokenization</title>
	<!-- change url to https://api.paysimple.com/pmt/v1/host/host.js for the production environment -->
    <script src="https://sandbox-api.paysimple.com/pmt/v1/host/host.js"></script>
  </head>

  <body>
    <div id="pmt" style="background: #f9f9fb"></div>

    <script>
      var pmt = window.paymentMethodTokenization({
        container: document.querySelector('#pmt'),
        merchantKey: '<YOUR MERCHANT KEY>',
        klarna: 
        {
       	 	amount: 40,
      	  returnUrl: '<RETURN URL HERE>',
     		},
      });



      pmt.trigger.setMode('klarna-input');

      pmt.on('add-payment-method-succeeded', function(message) {
         // Logic to post to your server, which will then post to PaySimple
         // to make a payment or vault the card goes here.
      });

      pmt.on('add-payment-method-failed', function(message) {
          // Logic to display error message goes here
      });
    </script>
  </body>
</html>

There are new validation fields which may be helpful for your integration:

{
  label: {
    cardholderName: 'Cardholder Name CUSTOM',
    cardNumber: 'Credit Card CUSTOM',
    expiration: 'Expiration CUSTOM',
    cvv: 'Security Code CUSTOM',
    postalCode: 'Zip/Postal Code CUSTOM',
    routingNumber: 'Routing Number CUSTOM',
    accountNumber: 'Account Number CUSTOM',
    accountHolder: 'Account Holder CUSTOM',
    accountType: 'Account Type CUSTOM',
    companyName: 'Company Name CUSTOM',
  },

  placeholder: {
  	countryCode: "Country Code CUSTOM"
		emailAddress: "Eemail Address CUSTOM"
		fullName: "Full Name CUSTOM"
    cardholderName: 'Cardholder Name CUSTOM',
    cardNumber: 'Key enter credit card CUSTOM',
    expiration: 'mm/yy CUSTOM',
    cvv: 'CVV CUSTOM',
    postalCode: '12345 CUSTOM',
    routingNumber: 'Enter routing number CUSTOM',
    accountNumber: 'Enter account number CUSTOM',
    accountHolder: 'Enter account holder CUSTOM',
    companyName: 'Enter company name CUSTOM',
    // note: no placeholder for accountType
  },

  validation: {
    invalidEmailAddress: "Email Address is invalid CUSTOM"
		invalidCountryCode: "Country Code is invalid CUSTOM"
		invalidFullName: "Full Name is invalid CUSTOM"
    invalidCardholderName: 'Cardholder Name is invalid CUSTOM',
    invalidCardNumber: 'Credit Card is an invalid card number CUSTOM',
    invalidCardType: 'Credit Card is an invalid card type CUSTOM',
    invalidExpiration: 'Expiration is invalid CUSTOM',
    invalidCvv: 'Security Code is invalid CUSTOM',
    invalidPostalCode: 'Zip/Postal Code is invalid CUSTOM',
    invalidRoutingNumber: 'Routing Number is invalid CUSTOM',
    invalidAccountNumber: 'Account Number is invalid CUSTOM',
    invalidAccountHolder: 'Account Holder is invalid CUSTOM',
    invalidAccountType: 'Account Type is invalid CUSTOM',
    invalidCompanyName: 'Company Name is invalid CUSTOM',
    required: {
      default: 'Field is required CUSTOM',
      cardholderName: 'Cardholder Name is required CUSTOM',
      cardNumber: 'Credit Card is required CUSTOM',
      expiration: 'Expiration is required CUSTOM',
      cvv: 'Security Code is required CUSTOM',
      postalCode: 'Zip/Postal Code is required CUSTOM',
      routingNumber: 'Routing Number is required CUSTOM',
      accountNumber: 'Account Number is required CUSTOM',
      accountHolder: 'Account Holder is required CUSTOM',
      accountType: 'Account Type is required CUSTOM',
      companyName: 'Company Name is required CUSTOM',
    },
  },
},

Refunding Klarna Transactions

In addition, the Transact Refund endpoint will need to be utilized for refunding Klarna transactions.

This endpoint can support all payment methods, including, but not limited to:

Swiped Credit Card
Card-Not-Present Credit Card
Bank Account
Klarna BNPL

To call this endpoint, you'll need only the TransactionID. Submitting this as part of the request can refund any of the available payment types listed above.

API Integration

This is a less common use case of BNPL, as it requires you to host your own customer facing PCI-compliant fields.

For API integration, please review our Transact Sale endpoint with the appropriate Klarna options configured.

https://sandbox-api.paysimple.com/api-docs/index.html#tag/Transaction/operation/Sale