> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/Antony-Figueroa/my-evershop-app/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

<Note>
  This extension is enabled by default in the Ana's Suplements configuration and styled with the brand's green color palette.
</Note>

## Payment Methods

### Cash on Delivery

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

<CardGroup cols={2}>
  <Card title="Features" icon="check">
    * Simple one-click selection at checkout
    * Customizable instructions
    * Spanish language support
    * Brand-styled UI components
  </Card>

  <Card title="Use Cases" icon="lightbulb">
    * First-time customers building trust
    * Customers without credit cards
    * Markets where COD is preferred
    * Gift purchases
  </Card>
</CardGroup>

#### Implementation

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

```tsx CashOnDelivery.tsx theme={null}
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.

<CardGroup cols={2}>
  <Card title="Features" icon="check">
    * Displays bank account details
    * CLABE number support (Mexico)
    * Customizable transfer instructions
    * Styled with brand colors
  </Card>

  <Card title="Use Cases" icon="lightbulb">
    * B2B orders
    * Large purchases
    * Customers preferring direct bank payment
    * International transfers
  </Card>
</CardGroup>

#### Implementation

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

```tsx BankTransfer.tsx theme={null}
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`:

```json theme={null}
{
  "system": {
    "extensions": [
      {
        "name": "offlinePayments",
        "resolve": "extensions/offlinePayments",
        "enabled": true
      }
    ]
  }
}
```

### Payment Method Settings

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

<Accordion title="Cash on Delivery Settings">
  ```env theme={null}
  COD_INSTRUCTIONS="Paga en efectivo cuando recibas tu pedido."
  ```
</Accordion>

<Accordion title="Bank Transfer Settings">
  ```env theme={null}
  BANK_NAME="Banco Nacional"
  BANK_ACCOUNT="1234567890"
  BANK_CLABE="012345678901234567"
  TRANSFER_INSTRUCTIONS="Envía el comprobante por WhatsApp al +52 123 456 7890"
  ```
</Accordion>

## 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

<Warning>
  **Order Verification**: Always verify payment receipt before fulfilling bank transfer orders to avoid fraud.
</Warning>

<Tip>
  **Clear Instructions**: Provide detailed instructions for both payment methods, including customer service contact information.
</Tip>

<Note>
  **Testing**: Test the checkout flow with both payment methods to ensure proper order creation and status handling.
</Note>

## Next Steps

<CardGroup cols={2}>
  <Card title="Product Catalog" icon="box" href="/extensions/product-catalog">
    Learn about product information enhancements
  </Card>

  <Card title="Page Components" icon="browser" href="/guides/page-components">
    Create custom checkout components
  </Card>
</CardGroup>