Buy Now, Pay Later (BNPL)

Overview

Buy Now, Pay Later lets shoppers split purchases into 4 interest-free installments or longer financing plans. Offering BNPL at checkout typically increases average order value (AOV) by 15–40% and reduces checkout abandonment for high-ticket items. The three major providers — Klarna, Afterpay (Clearpay in UK), and Affirm — each have native integrations for Shopify, WooCommerce, and BigCommerce that require no custom code to install.

When to Use This Skill

When AOV is in the $100–$3,000 range where installments meaningfully help conversion
When analytics show customers abandoning checkout at the payment step due to price
When competitors offer BNPL and it is becoming a category expectation (fashion, electronics, furniture)
When adding BNPL to an existing Stripe integration (Klarna and Afterpay are available as Stripe payment methods)

Core Instructions

Step 1: Determine your platform and choose the right BNPL approach

Platform	Recommended Approach	Notes
Shopify	Enable via Shopify Payments (Klarna, Afterpay built in) or install provider's app	Shopify Payments includes Klarna and Afterpay with zero additional integration; just enable them
WooCommerce	Install the provider's official WooCommerce plugin	Klarna, Afterpay, and Affirm all have official WooCommerce plugins
BigCommerce	Install from BigCommerce App Marketplace	All three providers have native BigCommerce apps
Custom / Headless	Enable via Stripe (Klarna, Afterpay) or provider SDK	If using Stripe, enable as payment methods on the Payment Intent; no separate SDK needed

Provider comparison:

Provider	Markets	Model	Merchant Fee	Order Range
Klarna	US, EU, UK	Pay in 4 / Financing	~2.49% + $0.30	$10–$10,000
Afterpay	US, AU, UK, CA	Pay in 4 (6 weeks)	4–6%	$35–$2,000
Affirm	US, CA	Monthly installments	5.99%–29.99% APR on consumer	$50–$17,500

Recommendation: Start with Klarna or Afterpay — they have the broadest platform support and lowest friction to enable. Add Affirm for high-ticket items ($1,000+) where monthly financing matters more than 4-installment splits.

Step 2: Enable BNPL on your platform

Shopify

Option A: Via Shopify Payments (recommended)

Go to Settings → Payments → Shopify Payments → Manage
Under Wallets and payment methods, find Klarna and Afterpay and toggle them on
Click Save — BNPL options will now appear automatically at checkout for eligible orders
To add BNPL messaging to product pages, install the Klarna On-Site Messaging app or Afterpay On-Site Messaging app from the Shopify App Store

Option B: Install the provider's Shopify app directly

Klarna: Install Klarna Payments from the Shopify App Store
Afterpay: Install Afterpay from the Shopify App Store
Affirm: Install Affirm from the Shopify App Store

Each app guides you through account creation and automatically adds the payment method to your checkout.

Adding installment messaging to product pages (Shopify):

After installing the Klarna or Afterpay app, go to Online Store → Themes → Customize and add the BNPL messaging block to your product page template. This displays "4 interest-free payments of $X" beneath the price.

WooCommerce

Klarna:

Install the Klarna Payments for WooCommerce plugin from WordPress.org or the WooCommerce Marketplace
Go to WooCommerce → Settings → Payments → Klarna Payments and enter your Klarna API credentials
Enable the payment method and configure which Klarna products to offer (Pay Now, Pay Later, Slice It)
For product page messaging, install the Klarna On-Site Messaging for WooCommerce plugin and add your Client ID

Afterpay:

Install the Afterpay Gateway for WooCommerce plugin
Go to WooCommerce → Settings → Payments → Afterpay and enter your Merchant ID and Secret Key (from your Afterpay merchant portal)
Configure the minimum and maximum order amounts to match Afterpay's eligibility range ($35–$2,000)
Enable the on-site messaging widget to show installment amounts on product pages

Affirm:

Install the Affirm Gateway for WooCommerce plugin
Go to WooCommerce → Settings → Payments → Affirm and enter your Public API Key and Private API Key (from your Affirm merchant portal)
Set the minimum order threshold (Affirm recommends showing only for orders $50+)

BigCommerce

Go to Apps → Marketplace and search for Klarna, Afterpay, or Affirm
Install the provider's app and follow the in-app setup wizard — you will need your merchant account credentials from the provider's portal
The app automatically adds the BNPL payment method to your checkout and can add product page messaging
Configure eligibility amounts in the app settings to match the provider's supported range

Custom / Headless

Via Stripe (recommended — enables Klarna and Afterpay with no separate SDK):

// Server: include BNPL methods on the payment intent
const paymentIntent = await stripe.paymentIntents.create({
  amount: orderTotalInCents,
  currency: 'usd',
  payment_method_types: ['card', 'klarna', 'afterpay_clearpay'],
  metadata: { order_id: orderId },
});

On the client, use Stripe's PaymentElement — it automatically shows Klarna and Afterpay tabs for eligible order amounts with no additional configuration:

import { PaymentElement } from '@stripe/react-stripe-js';

function CheckoutForm() {
  return (
    <form>
      <PaymentElement options={{ layout: 'tabs' }} />
      {/* Tabs render: Card | Klarna | Afterpay based on eligibility */}
    </form>
  );
}

Adding installment messaging to product pages (headless):

Klarna provides a web component for price messaging. Load the Klarna script and add the component:

<!-- Load Klarna's on-site messaging library -->
<script async src="https://js.klarna.com/web-sdk/v1/klarna.js"
  data-client-id="YOUR_KLARNA_CLIENT_ID">
</script>

<!-- Display "4 payments of $X" on the product page -->
<klarna-placement
  data-key="credit-promotion-auto-size"
  data-locale="en-US"
  data-purchase-amount="9999">
  <!-- Amount in cents: 9999 = $99.99 -->
</klarna-placement>

Afterpay provides a similar web component:

<afterpay-placement
  data-locale="en_US"
  data-currency="USD"
  data-amount="99.99"
  data-size="sm">
</afterpay-placement>

Step 3: Verify eligibility rules are enforced

Each provider has minimum and maximum order amounts. The platform apps and Stripe's PaymentElement handle this automatically — they only show the BNPL option when the order total is within the eligible range. Verify this is working correctly by testing with an order below the minimum (BNPL should not appear) and within range (BNPL should appear).

Best Practices

Enable via Shopify Payments if you are on Shopify — zero extra integration; just toggle on in payment settings
Show installment messaging on product pages and cart — BNPL messaging before checkout increases AOV even for customers who end up paying in full
Only show BNPL within eligible amount ranges — displaying BNPL for a $10 order misleads customers; the platform apps handle this automatically
Monitor fee impact on margin — Afterpay charges 4–6%, which is 2–3x higher than a standard card fee; ensure your margins support the provider's rate before enabling
Display clear terms — "4 interest-free payments" must be accurate; each provider has compliance requirements for how you can describe their product

Common Pitfalls

Problem	Solution
BNPL option not appearing at checkout	Check that the order amount is within the provider's eligible range; verify the API credentials in the plugin/app settings are for the correct environment (live vs. sandbox)
BNPL appearing for ineligible order amounts	Set minimum/maximum amount thresholds in the plugin settings; Stripe's PaymentElement enforces this automatically
Product page messaging not updating when variant price changes	Klarna and Afterpay web components read the `data-purchase-amount` attribute; update this attribute in JavaScript when the price changes
Customers confused about BNPL terms	Link to the provider's "How it works" page in the messaging widget; each provider has compliant messaging templates you must follow
Higher dispute rate with BNPL orders	BNPL disputes go through the provider (Klarna, Afterpay), not your payment processor; ensure your fulfillment process creates clear tracking and delivery confirmation

Related Skills

@stripe-integration
@checkout-flow-optimization
@paypal-integration
@cart-logic

buy-now-pay-later