Implementing Afterpay in a Next.js E-commerce Application: A Complete Guide

#nextjs #afterpay #payment

As e-commerce continues to evolve, offering flexible payment options has become crucial for business success. In this guide, I'll walk you through implementing Afterpay in a Next.js e-commerce application, sharing real-world code examples and best practices.

What is Afterpay?
Afterpay is a "buy now, pay later" service that allows customers to split their purchases into four equal installments, paid every two weeks. It's particularly popular in Australia, New Zealand, the United States, and the United Kingdom.

Prerequisites
Before we begin, make sure you have:

A Next.js application
An Afterpay merchant account
Basic understanding of React and API integration
Axios for API calls

Implementation Overview
Our implementation will cover:

Configuring Afterpay credentials
Setting up the API client
Creating the Afterpay component
Handling checkout flow
Managing payment confirmation
Error handling and validation

1. Setting Up Afterpay Configuration

First, let's set up our Afterpay API client. Create a file lib/afterpay.js:

import axios from "axios";

const AFTERPAY_BASE_URL = "https://global-api-sandbox.afterpay.com/v2";
const AFTERPAY_MERCHANT_ID = "YOUR_MERCHANT_ID";
const AFTERPAY_SECRET_KEY = "YOUR_SECRET_KEY";

// Create base64 encoded auth token
const authToken = Buffer.from(
  `${AFTERPAY_MERCHANT_ID}:${AFTERPAY_SECRET_KEY}`
).toString("base64");

// Create axios instance with default config
export const afterpayApi = axios.create({
  baseURL: AFTERPAY_BASE_URL,
  headers: {
    "Content-Type": "application/json",
    Accept: "application/json",
    Authorization: `Basic ${authToken}`,
    "User-Agent": `Merchant/${AFTERPAY_MERCHANT_ID}`,
  },
});

2. Creating Helper Functions

// Get Afterpay configuration
export const getAfterpayConfig = async () => {
  try {
    const { data } = await afterpayApi.get("/configuration");
    return data;
  } catch (error) {
    console.error("Afterpay config error:", error.response?.data || error.message);
    throw error;
  }
};

// Format cart items for Afterpay
export const formatAfterpayItems = (cartItems) => {
  return cartItems.map((item) => ({
    name: item.title,
    sku: item._id.toString(),
    quantity: item.quantity,
    price: {
      amount: item.price.toString(),
      currency: "AUD",
    },
    categories: [[item.category, item.subCategory]],
    pageUrl: `/products/${item.handle}`,
    imageUrl: item.featured_image,
  }));
};

// Check if order amount is eligible for Afterpay
export const isOrderEligibleForAfterpay = (amount, config) => {
  if (!config) return false;
  const min = parseFloat(config.minimumAmount.amount);
  const max = parseFloat(config.maximumAmount.amount);
  return amount >= min && amount <= max;
};

3. Creating the Afterpay Component
Here's our React component for the Afterpay payment button:

"use client";

import React, { useEffect, useState } from "react";
import Image from "next/image";

export default function Afterpay({ paymentData }) {
  const [config, setConfig] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  // Format checkout data for Afterpay
  const formatCheckoutData = () => {
    const items = formatAfterpayItems(paymentData.orderProducts);

    return {
      amount: {
        amount: paymentData.total.toString(),
        currency: "AUD",
      },
      consumer: {
        phoneNumber: paymentData.shippingAddress.phone,
        givenNames: paymentData.shippingAddress.firstName,
        surname: paymentData.shippingAddress.lastName,
        email: paymentData.shippingAddress.email,
      },
      shipping: {
        name: `${paymentData.shippingAddress.firstName} ${paymentData.shippingAddress.lastName}`,
        line1: paymentData.shippingAddress.address,
        area1: paymentData.shippingAddress.suburb,
        region: paymentData.shippingAddress.state,
        postcode: paymentData.shippingAddress.postcode,
        countryCode: "AU",
        phoneNumber: paymentData.shippingAddress.phone,
      },
      merchant: {
        redirectConfirmUrl: `${YOUR_DOMAIN}/confirm`,
        redirectCancelUrl: `${YOUR_DOMAIN}/cancel`,
        popupOriginUrl: YOUR_DOMAIN,
      },
      items,
      merchantReference: paymentData.orderId,
    };
  };

  // Handle checkout process
  const handleCheckout = async () => {
    if (!config) return;

    setLoading(true);
    setError(null);

    try {
      const checkoutData = formatCheckoutData();
      const response = await fetch("/api/afterpay", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(checkoutData),
      });

      const data = await response.json();

      if (data.error) {
        throw new Error(data.error);
      }

      if (data.redirectCheckoutUrl) {
        // Store data for confirmation
        sessionStorage.setItem("afterpayToken", data.token);
        sessionStorage.setItem("afterpayAmount", paymentData.total.toString());
        sessionStorage.setItem("afterpayOrderId", paymentData.orderId);

        // Redirect to Afterpay checkout
        window.location.href = data.redirectCheckoutUrl;
      }
    } catch (error) {
      setError("Unable to initiate Afterpay checkout. Please try again.");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="w-full">
      <button
        onClick={handleCheckout}
        disabled={loading || !isEligible}
        className="w-full border flex items-center justify-center rounded-lg p-3 px-5 bg-primary-color text-white"
      >
        {loading ? (
          "Processing..."
        ) : (
          <div className="flex items-center gap-2">
            <span>Pay with</span>
            <Image
              src="/afterpay.png"
              alt="Afterpay"
              width={100}
              height={20}
              className="h-5 w-auto object-contain"
            />
          </div>
        )}
      </button>
    </div>
  );
}

4. Setting Up API Routes
Create an API route for handling Afterpay requests (app/api/afterpay/route.js):

import { NextResponse } from "next/server";
import { createCheckout, getAfterpayConfig } from "@/lib/afterpay";

export async function GET() {
  try {
    const config = await getAfterpayConfig();
    return NextResponse.json(config);
  } catch (error) {
    return NextResponse.json(
      { error: error.response?.data?.message || error.message },
      { status: error.response?.status || 500 }
    );
  }
}

export async function POST(request) {
  try {
    const checkoutData = await request.json();

    // Validate required fields
    const requiredFields = ["amount", "consumer", "shipping", "merchant"];
    const missingFields = requiredFields.filter(
      (field) => !checkoutData[field]
    );

    if (missingFields.length > 0) {
      return NextResponse.json(
        {
          error: "Missing required fields",
          details: `Missing: ${missingFields.join(", ")}`,
        },
        { status: 400 }
      );
    }

    const response = await createCheckout(checkoutData);
    return NextResponse.json(response);
  } catch (error) {
    return NextResponse.json(
      { error: error.response?.data?.message || error.message },
      { status: error.response?.status || 500 }
    );
  }
}

5. Handling Payment Confirmation
Create a confirmation page (app/confirm/page.js) to handle successful payments:

"use client";

export default function ConfirmPage() {
  const searchParams = useSearchParams();
  const [processing, setProcessing] = useState(true);
  const [paymentDetails, setPaymentDetails] = useState(null);

  useEffect(() => {
    const handleConfirmation = async () => {
      try {
        const status = searchParams.get("status");
        const orderToken = searchParams.get("orderToken");

        if (status === "SUCCESS" && orderToken) {
          const amount = sessionStorage.getItem("afterpayAmount");
          const merchantReference = sessionStorage.getItem("afterpayOrderId");

          const response = await fetch("/api/afterpay/capture", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              orderToken,
              amount,
              merchantReference,
            }),
          });

          if (!response.ok) {
            throw new Error("Payment capture failed");
          }

          const data = await response.json();
          setPaymentDetails(data);
        }
      } catch (error) {
        console.error("Confirmation error:", error);
      } finally {
        setProcessing(false);
      }
    };

    handleConfirmation();
  }, [searchParams]);

  // Render confirmation UI
}

Best Practices and Tips

Error Handling: Always implement comprehensive error handling at every step of the payment process.
Validation: Validate all data before sending it to Afterpay to avoid failed API calls.
Security: Never expose your Afterpay credentials in client-side code.
Testing: Use Afterpay's sandbox environment extensively before going live.
User Experience: Provide clear feedback during the payment process and handle edge cases gracefully.

DEV Community

Implementing Afterpay in a Next.js E-commerce Application: A Complete Guide

Top comments (0)

Read next

Introduction to Next.js: Building Your First Application

Next.js with Docker setup error fixed

🌐 Unleashing GraphQL in Next.js: Effortless Data Fetching! 🚀

Next.js and Prisma: Efficiently Creating Seed Data for Your App