Offline Payments Extension

Cash on delivery and bank transfer payment methods for your EverShop store

Overview

The Offline Payments extension provides two alternative payment methods for customers who prefer not to use credit cards or online payment gateways:

• Cash on Delivery (COD) - Customers pay in cash when they receive their order
• Bank Transfer - Customers transfer funds to your bank account before order fulfillment

This extension is enabled by default in the Ana’s Suplements configuration and styled with the brand’s green color palette.

Payment Methods

Cash on Delivery

The cash on delivery payment method allows customers to pay when their order is delivered to their door.

Features

• Simple one-click selection at checkout
• Customizable instructions
• Spanish language support
• Brand-styled UI components

Use Cases

• First-time customers building trust
• Customers without credit cards
• Markets where COD is preferred
• Gift purchases

Implementation

The COD payment method is implemented in extensions/offlinePayments/src/pages/frontStore/checkout/cod/CashOnDelivery.tsx:

CashOnDelivery.tsx

import React from 'react';
import { useCheckout } from '@evershop/evershop';

type CashOnDeliveryProps = {
  setting: {
    codInstructions?: string;
  };
};

export default function CashOnDeliveryMethod({ setting }: CashOnDeliveryProps) {
  const checkout = useCheckout();
  const { paymentMethods, setPaymentMethods } = checkout;
  const selectedPaymentMethod = paymentMethods?.find(
    (pm) => pm.code === 'cod'
  );

  return (
    <div className="bg-[#F8FAF9] border border-[#E8F5E9] rounded-lg p-4 mb-4">
      <div className="flex justify-start items-center gap-2">
        {(!selectedPaymentMethod || selectedPaymentMethod.code !== 'cod') && (
          <a
            href="#"
            onClick={(e) => {
              e.preventDefault();
              setPaymentMethods([
                ...paymentMethods.filter((pm) => pm.code !== 'cod'),
                { code: 'cod', name: 'Contra Entrega' }
              ]);
            }}
            className="flex items-center gap-2 text-[#2D5A3D] hover:text-[#1E3D2A]"
          >
            <span className="w-4 h-4 border-2 border-[#2D5A3D] rounded-full"></span>
            <span className="font-medium">Contra Entrega</span>
          </a>
        )}
        {selectedPaymentMethod && selectedPaymentMethod.code === 'cod' && (
          <div className="w-full">
            <div className="flex items-center gap-2 mb-3">
              <span className="w-4 h-4 bg-[#2D5A3D] rounded-full flex items-center justify-center">
                <span className="w-2 h-2 bg-white rounded-full"></span>
              </span>
              <span className="font-medium text-[#2D5A3D]">Contra Entrega</span>
            </div>
            <div className="ml-6 text-sm text-[#4A5568] bg-white p-3 rounded border border-[#E8F5E9]">
              <p className="mb-2">
                <strong>Instrucciones:</strong>
              </p>
              <p>{setting?.codInstructions || 'Paga en efectivo cuando recibas tu pedido en la puerta de tu casa.'}</p>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

export const layout = {
  areaId: 'checkoutPaymentMethod',
  sortOrder: 10
};

Key Features:

• Uses the useCheckout hook to access checkout state
• Radio button styled with brand colors (#2D5A3D green)
• Displays customizable instructions when selected
• Registered in the checkoutPaymentMethod area with sort order 10

Bank Transfer

The bank transfer method provides bank account details for customers to transfer funds before order fulfillment.

Features

• Displays bank account details
• CLABE number support (Mexico)
• Customizable transfer instructions
• Styled with brand colors

Use Cases

• B2B orders
• Large purchases
• Customers preferring direct bank payment
• International transfers

Implementation

The bank transfer payment method is implemented in extensions/offlinePayments/src/pages/frontStore/checkout/transfer/BankTransfer.tsx:

BankTransfer.tsx

import React from 'react';
import { useCheckout } from '@evershop/evershop';

type BankTransferProps = {
  setting: {
    bankName?: string;
    accountNumber?: string;
    clabe?: string;
    transferInstructions?: string;
  };
};

export default function BankTransferMethod({ setting }: BankTransferProps) {
  const checkout = useCheckout();
  const { paymentMethods, setPaymentMethods } = checkout;
  const selectedPaymentMethod = paymentMethods?.find(
    (pm) => pm.code === 'bank_transfer'
  );

  return (
    <div className="bg-[#F8FAF9] border border-[#E8F5E9] rounded-lg p-4 mb-4">
      <div className="flex justify-start items-center gap-2">
        {(!selectedPaymentMethod || selectedPaymentMethod.code !== 'bank_transfer') && (
            <a
            href="#"
            onClick={(e) => {
              e.preventDefault();
              setPaymentMethods([
                ...paymentMethods.filter((pm) => pm.code !== 'bank_transfer'),
                { code: 'bank_transfer', name: 'Transferencia Bancaria' }
              ]);
            }}
            className="flex items-center gap-2 text-[#2D5A3D] hover:text-[#1E3D2A]"
          >
            <span className="w-4 h-4 border-2 border-[#2D5A3D] rounded-full"></span>
            <span className="font-medium">Transferencia Bancaria</span>
          </a>
        )}
        {selectedPaymentMethod && selectedPaymentMethod.code === 'bank_transfer' && (
          <div className="w-full">
            <div className="flex items-center gap-2 mb-3">
              <span className="w-4 h-4 bg-[#2D5A3D] rounded-full flex items-center justify-center">
                <span className="w-2 h-2 bg-white rounded-full"></span>
              </span>
              <span className="font-medium text-[#2D5A3D]">Transferencia Bancaria</span>
            </div>
            <div className="ml-6 text-sm text-[#4A5568] bg-white p-3 rounded border border-[#E8F5E9]">
              <p className="mb-3">
                <strong>Datos para la transferencia:</strong>
              </p>
              <div className="space-y-2 mb-3">
                <p><strong>Banco:</strong> {setting?.bankName || 'Banco ejemplo'}</p>
                <p><strong>Cuenta:</strong> {setting?.accountNumber || '1234567890'}</p>
                <p><strong>CLABE:</strong> {setting?.clabe || '012345678901234567'}</p>
              </div>
              <p className="mb-2">
                <strong>Instrucciones:</strong>
              </p>
              <p>{setting?.transferInstructions || 'Realiza tu transferencia y envíanos el comprobante. Tu pedido será procesado al confirmar el pago.'}</p>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

export const layout = {
  areaId: 'checkoutPaymentMethod',
  sortOrder: 20
};

Key Features:

• Displays bank name, account number, and CLABE
• Configurable through extension settings
• Spanish language labels (“Transferencia Bancaria”)
• Registered in the checkoutPaymentMethod area with sort order 20

Configuration

The extension is enabled in config/default.json:

{
  "system": {
    "extensions": [
      {
        "name": "offlinePayments",
        "resolve": "extensions/offlinePayments",
        "enabled": true
      }
    ]
  }
}

Payment Method Settings

You can configure payment method settings through environment variables or admin settings:

Cash on Delivery Settings

COD_INSTRUCTIONS="Paga en efectivo cuando recibas tu pedido."

Bank Transfer Settings

BANK_NAME="Banco Nacional"
BANK_ACCOUNT="1234567890"
BANK_CLABE="012345678901234567"
TRANSFER_INSTRUCTIONS="Envía el comprobante por WhatsApp al [phone]"

Styling

Both payment methods use the Ana’s Suplements brand colors:

• Primary Green: #2D5A3D - For selected state and labels
• Background: #F8FAF9 - For payment method containers
• Borders: #E8F5E9 - For borders and dividers
• Hover State: #1E3D2A - Darker green for hover effects
• Text: #4A5568 - For instructions and details

Extension Structure

extensions/offlinePayments/
├── src/
│   └── pages/
│       └── frontStore/
│           └── checkout/
│               ├── cod/
│               │   └── CashOnDelivery.tsx
│               └── transfer/
│                   └── BankTransfer.tsx
├── package.json
└── tsconfig.json

Best Practices

Order Verification: Always verify payment receipt before fulfilling bank transfer orders to avoid fraud.

Clear Instructions: Provide detailed instructions for both payment methods, including customer service contact information.

Testing: Test the checkout flow with both payment methods to ensure proper order creation and status handling.

Next Steps

Product Catalog

Learn about product information enhancements

Page Components

Create custom checkout components