With Payments

A footer that displays accepted card and wallet badges beside the usual store links. Reassures shoppers about secure checkout right before they buy.

import { CreditCard, Smartphone } from 'lucide-react';

export default function EcommerceFooterWithPayments() {
  return (
    <footer className="bg-muted/30 border-t px-4 py-8 md:py-12">
      <div className="container mx-auto max-w-7xl">
        <div className="grid grid-cols-2 gap-8 md:grid-cols-4 lg:grid-cols-5">
          {/* Company */}
          <div className="space-y-3">
            <h3 className="text-foreground font-semibold">Company</h3>
            <ul className="space-y-2 text-sm">
              <li>
                <a
                  href="/about"
                  className="text-muted-foreground hover:text-foreground transition-colors"
                >
                  About Us
                </a>
              </li>
              <li>
                <a
                  href="/careers"
                  className="text-muted-foreground hover:text-foreground transition-colors"
                >
                  Careers
                </a>
              </li>
              <li>
                <a
                  href="/press"
                  className="text-muted-foreground hover:text-foreground transition-colors"
                >
                  Press
                </a>
              </li>
              <li>
                <a
                  href="/contact"
                  className="text-muted-foreground hover:text-foreground transition-colors"
                >
                  Contact
                </a>
              </li>
            </ul>
          </div>

          {/* Customer Service */}
          <div className="space-y-3">
            <h3 className="text-foreground font-semibold">Support</h3>
            <ul className="space-y-2 text-sm">
              <li>
                <a
                  href="/help"
                  className="text-muted-foreground hover:text-foreground transition-colors"
                >
                  Help Center
                </a>
              </li>
              <li>
                <a
                  href="/shipping"
                  className="text-muted-foreground hover:text-foreground transition-colors"
                >
                  Shipping Info
                </a>
              </li>
              <li>
                <a
                  href="/returns"
                  className="text-muted-foreground hover:text-foreground transition-colors"
                >
                  Returns
                </a>
              </li>
              <li>
                <a
                  href="/size-guide"
                  className="text-muted-foreground hover:text-foreground transition-colors"
                >
                  Size Guide
                </a>
              </li>
            </ul>
          </div>

          {/* Shop */}
          <div className="space-y-3">
            <h3 className="text-foreground font-semibold">Shop</h3>
            <ul className="space-y-2 text-sm">
              <li>
                <a
                  href="/new-arrivals"
                  className="text-muted-foreground hover:text-foreground transition-colors"
                >
                  New Arrivals
                </a>
              </li>
              <li>
                <a
                  href="/bestsellers"
                  className="text-muted-foreground hover:text-foreground transition-colors"
                >
                  Best Sellers
                </a>
              </li>
              <li>
                <a
                  href="/sale"
                  className="text-muted-foreground hover:text-foreground transition-colors"
                >
                  Sale
                </a>
              </li>
              <li>
                <a
                  href="/gift-cards"
                  className="text-muted-foreground hover:text-foreground transition-colors"
                >
                  Gift Cards
                </a>
              </li>
            </ul>
          </div>

          {/* Legal */}
          <div className="space-y-3">
            <h3 className="text-foreground font-semibold">Legal</h3>
            <ul className="space-y-2 text-sm">
              <li>
                <a
                  href="/privacy"
                  className="text-muted-foreground hover:text-foreground transition-colors"
                >
                  Privacy Policy
                </a>
              </li>
              <li>
                <a
                  href="/terms"
                  className="text-muted-foreground hover:text-foreground transition-colors"
                >
                  Terms of Service
                </a>
              </li>
              <li>
                <a
                  href="/cookies"
                  className="text-muted-foreground hover:text-foreground transition-colors"
                >
                  Cookie Policy
                </a>
              </li>
              <li>
                <a
                  href="/accessibility"
                  className="text-muted-foreground hover:text-foreground transition-colors"
                >
                  Accessibility
                </a>
              </li>
            </ul>
          </div>

          {/* Newsletter - spans full width on mobile, single column on larger screens */}
          <div className="col-span-2 space-y-3 md:col-span-4 lg:col-span-1">
            <h3 className="text-foreground font-semibold">Stay Updated</h3>
            <p className="text-muted-foreground text-sm">
              Subscribe to get special offers and updates.
            </p>
            <div className="flex flex-col gap-2 sm:flex-row lg:flex-col">
              <input
                type="email"
                placeholder="Enter your email"
                className="border-input bg-background placeholder:text-muted-foreground focus:ring-ring flex-1 rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
              />
              <button className="bg-primary text-primary-foreground hover:bg-primary/90 rounded-md px-4 py-2 text-sm font-medium transition-colors">
                Subscribe
              </button>
            </div>
          </div>
        </div>

        {/* Payment Methods & Copyright */}
        <div className="mt-8 border-t pt-8">
          <div className="flex flex-col items-center justify-between gap-4 md:flex-row">
            {/* Payment Methods */}
            <div className="flex items-center gap-4">
              <span className="text-muted-foreground text-sm">We accept:</span>
              <div className="flex items-center gap-3">
                {/* Visa */}
                <div className="bg-background flex h-8 w-12 items-center justify-center rounded border">
                  <CreditCard className="text-muted-foreground h-4 w-4" />
                </div>
                {/* Mastercard */}
                <div className="bg-background flex h-8 w-12 items-center justify-center rounded border">
                  <div className="flex gap-0.5">
                    <div className="h-3 w-3 rounded-full bg-red-500 opacity-80"></div>
                    <div className="-ml-1 h-3 w-3 rounded-full bg-yellow-500 opacity-80"></div>
                  </div>
                </div>
                {/* PayPal */}
                <div className="bg-background flex h-8 w-12 items-center justify-center rounded border">
                  <span className="text-xs font-bold text-blue-600">PP</span>
                </div>
                {/* Apple Pay */}
                <div className="bg-background flex h-8 w-12 items-center justify-center rounded border">
                  <Smartphone className="text-muted-foreground h-4 w-4" />
                </div>
                {/* Google Pay */}
                <div className="bg-background flex h-8 w-12 items-center justify-center rounded border">
                  <span className="text-muted-foreground text-xs font-bold">
                    G
                  </span>
                </div>
                {/* American Express */}
                <div className="bg-background flex h-8 w-12 items-center justify-center rounded border">
                  <span className="text-xs font-bold text-blue-600">AE</span>
                </div>
              </div>
            </div>

            {/* Copyright */}
            <div className="text-muted-foreground text-center text-sm md:text-right">
              <p>
                &copy; {new Date().getFullYear()} Your Store Name. All rights
                reserved.
              </p>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}

About this block

With Payments is a full footer combining a five column grid with a payment method strip. The upper section holds four link columns (Company, Support, Shop, and Legal) and a fifth column that contains a "Stay Updated" email signup with an input and subscribe button. Below a dividing line, a bottom bar shows a "We accept:" label next to six bordered payment badges representing Visa, Mastercard, PayPal, Apple Pay, Google Pay, and American Express. A copyright line sits at the far right of that same row.

Each section is independent. You can rewrite the link labels, swap the column headings, replace the newsletter copy, or remove the signup column entirely. The payment badge row is equally self contained so you can add or remove individual badges to match the processors your checkout actually supports.

When to use

Reach for this block when checkout trust is a priority at the bottom of the page. It works especially well for a software or SaaS product that sells plans online, where prospects scroll past pricing to look for reassurance about accepted cards and wallets before committing. Compared to a simpler footer, the payment strip makes that reassurance visible without needing a dedicated trust section elsewhere on the page.

A natural flow around it on an Ecommerce page:

Before

Trust Guarantee blocks to reinforce security claims just before the footer
Customer Reviews to close with social proof ahead of the payment badges

After

Nothing follows a footer; this is the last block on the page

What you can customize

The block covers the standard footer needs plus payment visibility in one unit. Three areas are worth tailoring:

Payment badges. Swap in only the processors your checkout supports so the list is accurate and shoppers are not confused by unavailable options.
Link columns. Each column heading and its links are plain text, so you can retitle "Shop" to "Plans" or "Support" to "Docs" to match your product vocabulary.
Newsletter column. The signup field and button can be removed or replaced with a short tagline if you handle email capture elsewhere on the page.

Tip: keep the payment badge count to the methods you actually accept; showing unfamiliar logos erodes the trust the strip is meant to build.

About this block

When to use

A natural flow around it on an Ecommerce page:

Before

Trust Guarantee blocks to reinforce security claims just before the footer
Customer Reviews to close with social proof ahead of the payment badges

After

Nothing follows a footer; this is the last block on the page

What you can customize

The block covers the standard footer needs plus payment visibility in one unit. Three areas are worth tailoring:

Payment badges. Swap in only the processors your checkout supports so the list is accurate and shoppers are not confused by unavailable options.
Link columns. Each column heading and its links are plain text, so you can retitle "Shop" to "Plans" or "Support" to "Docs" to match your product vocabulary.
Newsletter column. The signup field and button can be removed or replaced with a short tagline if you handle email capture elsewhere on the page.

Tip: keep the payment badge count to the methods you actually accept; showing unfamiliar logos erodes the trust the strip is meant to build.

With Payments

About this block

When to use

What you can customize

Search Shadcn UI Blocks

About this block

When to use

What you can customize