Skip to main content

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.

​
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: 
COD_INSTRUCTIONS="Paga en efectivo cuando recibas tu pedido."

BANK_NAME="Banco Nacional"
BANK_ACCOUNT="1234567890"
BANK_CLABE="012345678901234567"
TRANSFER_INSTRUCTIONS="Envía el comprobante por WhatsApp al +52 123 456 7890"

​
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

Build docs developers (and LLMs) love

Get started for freeTalk to us