> ## Documentation Index
> Fetch the complete documentation index at: https://docs.augustus.com/llms.txt
> Use this file to discover all available pages before exploring further.

> Best practices on how to integrate Augustus payments into your e-commerce checkout.

# Ecommerce

<Frame>
  <img src="https://mintcdn.com/getivy/J1t6OrlJaZyvflSC/images/EcommPresentation.png?fit=max&auto=format&n=J1t6OrlJaZyvflSC&q=85&s=32af0d91030b17d67c7704110518eb47" alt="Ecommerce presentation showing payment flow" width="1770" height="700" data-path="images/EcommPresentation.png" />
</Frame>

## UX best practice

### Title

When integrating Augustus payment method into your checkout, you have two main approaches to consider.

* **Approach 1: Use a neutral label**
  * `"Pay by Bank"` - standard term that clearly communicates the payment is processed through the customer's bank
  * `"Open Banking"` or `"Instant Pay"` - alternatives that emphasise the regulatory framework or speed
* **Approach 2: Brand it as your own**
  * Create a custom name using your brand (e.g., `"{Brand name} Pay"`)
  * This option allows full alignment with your existing branding

### Subtitle

A clear subtitle helps customers understand the key benefits of this payment option.

* **Suggested implementation:**
  * Subtitle: *"Pay directly from your bank account: secure, instant, and no card needed"*
  * Ensure the subtitle appears directly beneath your payment method title at checkout

### Bank logos

Show logos of popular banks to build trust and familiarity.

* Suggested implementation:
  * Include the logos of the most popular banks in the region.
  * [Download bank logos](/docs/payin/instant-bank-transfer/assets)

### Default positioning

Position Pay by Bank as the default and primary payment option.

* **Suggested implementation:**
  * Place Pay by Bank as the first payment option in your list
  * Pre-select it by default if possible

### Recommended label

Build trust by recommending Pay by Bank

* **Suggested implementation:**
  * Add a "Recommended" label next to Pay by Bank
  * Use consistent styling with other UI elements in your payment flow

<Frame>
  <img src="https://mintcdn.com/getivy/J1t6OrlJaZyvflSC/images/EcommTooltip.png?fit=max&auto=format&n=J1t6OrlJaZyvflSC&q=85&s=644cb896b31823486ba0fbbc64f20f64" alt="Ecommerce tooltip example showing payment information" width="1400" height="800" data-path="images/EcommTooltip.png" />
</Frame>

### Educational tooltip

Add a tooltip icon next to "Pay by Bank" that shows key information on hover/tap.

* Suggested copy:
  * **What is Pay by Bank?** Like a bank transfer, but easier. **Instant and automatically set up for your purchase.** **As secure as online banking.** **You approve the payment directly with your bank.**

### Dynamic CTA

Set clear expectations about the next step by adding a dynamic CTA when Pay by Bank is selected

<Frame>
  <img src="https://mintcdn.com/getivy/J1t6OrlJaZyvflSC/images/DynamicCTA.png?fit=max&auto=format&n=J1t6OrlJaZyvflSC&q=85&s=6d803973d20b8f1136722ed048d2a807" alt="Dynamic CTA example showing 'Continue to select your bank' button" width="1400" height="740" data-path="images/DynamicCTA.png" />
</Frame>

* **Suggested implementation:**
  * On the final page before redirecting to Augustus, label the CTA *"Continue to select your bank"*

## Translations

<Tabs>
  <Tab title="Main Content">
    <CardGroup cols={2}>
      <Card title="English">
        <div className="space-y-2">
          <p className="text-sm font-bold">
            Pay by bank
          </p>

          <p className="mt-1">
            Pay directly from your bank account: secure, instant, and no card needed.
          </p>

          Recommended
        </div>
      </Card>

      <Card title="Deutsch">
        <div className="space-y-2">
          <p className="text-sm font-bold">
            Sofortüberweisung / Echtzeit-Überweisung
          </p>

          <p className="mt-1">
            Direkt von Ihrem Bankkonto zahlen: sicher, sofort und keine Karte erforderlich.
          </p>

          Empfohlen
        </div>
      </Card>

      <Card title="Nederlands">
        <div className="space-y-2">
          <p className="text-sm font-bold">
            Betaal via je bank
          </p>

          <p className="mt-1">
            Direct vanaf uw bankrekening betalen: veilig, direct en geen kaart nodig.
          </p>

          Aanbevolen
        </div>
      </Card>

      <Card title="Svenska">
        <div className="space-y-2">
          <p className="text-sm font-bold">
            Bankbetalning
          </p>

          <p className="mt-1">
            Betala direkt från ditt bankkonto: säkert, snabbt och utan kort.
          </p>

          Rekommenderad
        </div>
      </Card>

      <Card title="Français">
        <div className="space-y-2">
          <p className="text-sm font-bold">
            Virement instantané
          </p>

          <p className="mt-1">
            Payez directement depuis votre compte bancaire: sécurisé, instantané, et sans carte.
          </p>

          Recommandé
        </div>
      </Card>

      <Card title="Italiano">
        <div className="space-y-2">
          <p className="text-sm font-bold">
            Paga con la tua banca
          </p>

          <p className="mt-1">
            Paga direttamente dal tuo conto corrente: sicuro, istantaneo e senza carta di credito.
          </p>

          Consigliato
        </div>
      </Card>

      <Card title="Español">
        <div className="space-y-2">
          <p className="text-sm font-bold">
            Pagar con Cuenta Bancaria
          </p>

          <p className="mt-1">
            Pague directamente desde su cuenta bancaria: seguro, instantáneo y sin necesidad de tarjeta.
          </p>

          Recomendado
        </div>
      </Card>

      <Card title="Português">
        <div className="space-y-2">
          <p className="text-sm font-bold">
            Pagamento instantâneo
          </p>

          <p className="mt-1">
            Pague diretamente da sua conta bancária: seguro, imediato e sem necessidade de cartão.
          </p>

          Recomendado
        </div>
      </Card>

      <Card title="Polski">
        <div className="space-y-2">
          <p className="text-sm font-bold">
            Płać przez bank
          </p>

          <p className="mt-1">
            Płać bezpośrednio z konta bankowego: bezpiecznie, natychmiastowo, bez potrzeby użycia karty.
          </p>

          Polecane
        </div>
      </Card>

      <Card title="Slovenčina">
        <div className="space-y-2">
          <p className="text-sm font-bold">
            Okamžitá banková platba
          </p>

          <p className="mt-1">
            Plaťte priamo z Vášho bankového účtu: bezpečne, okamžite a bez potreby karty.
          </p>

          Odporúčané
        </div>
      </Card>
    </CardGroup>
  </Tab>

  <Tab title="Tooltip Content">
    <CardGroup cols={2}>
      <Card title="English">
        <div className="space-y-2">
          <p className="text-sm font-bold">
            What is Pay by Bank?
          </p>

          * Like a bank transfer, but easier
          * Instant and automatically set up for your purchase
          * As secure as online banking
          * You approve the payment directly with your bank
        </div>
      </Card>

      <Card title="Deutsch">
        <div className="space-y-2">
          <p className="text-sm font-bold">
            Was ist eine Sofortüberweisung? / Was ist eine Echtzeit-Überweisung?
          </p>

          * Wie eine Banküberweisung, aber einfacher
          * Sofort und automatisch für Ihren Einkauf eingerichtet
          * So sicher wie Online-Banking
          * Sie genehmigen die Zahlung direkt bei Ihrer Bank
        </div>
      </Card>

      <Card title="Nederlands">
        <div className="space-y-2">
          <p className="text-sm font-bold">
            Wat is Betaal via je bank?
          </p>

          * Zoals een bankoverschrijving, maar eenvoudiger
          * Direct en automatisch ingesteld voor uw aankoop
          * Even veilig als internetbankieren
          * U keurt de betaling direct goed bij uw bank
        </div>
      </Card>

      <Card title="Svenska">
        <div className="space-y-2">
          <p className="text-sm font-bold">
            Vad är Bankbetalning?
          </p>

          * Som en banköverföring, fast enklare
          * Direkt och automatiskt inställd för ditt köp
          * Lika säkert som internetbank
          * Du godkänner betalningen direkt med din bank
        </div>
      </Card>

      <Card title="Français">
        <div className="space-y-2">
          <p className="text-sm font-bold">
            Qu'est-ce que "Virement instantané" ?
          </p>

          * Comme un virement bancaire, mais plus simple
          * Instantané et automatiquement configuré pour votre achat
          * Aussi sécurisé qu'une banque en ligne
          * Vous autorisez le paiement directement avec votre banque
        </div>
      </Card>

      <Card title="Italiano">
        <div className="space-y-2">
          <p className="text-sm font-bold">
            Cos'è Paga con la tua banca?
          </p>

          * Come un bonifico bancario, ma più semplice
          * Istantaneo e già configurato per il tuo acquisto
          * Sicuro come l'home banking
          * Approvi il pagamento direttamente con la tua banca
        </div>
      </Card>

      <Card title="Español">
        <div className="space-y-2">
          <p className="text-sm font-bold">
            ¿Qué es Pagar con Cuenta Bancaria?
          </p>

          * Como una transferencia bancaria, pero más fácil
          * Instantáneo y configurado automáticamente para su compra
          * Tan seguro como la banca en línea
          * Usted aprueba el pago directamente con su banco
        </div>
      </Card>

      <Card title="Português">
        <div className="space-y-2">
          <p className="text-sm font-bold">
            O que é Pagamento instantâneo?
          </p>

          * Como uma transferência bancária, só que mais fácil
          * Instantâneo e automaticamente configurado para a sua compra
          * Tão seguro quanto o seu banco online
          * Você aprova o pagamento diretamente com o seu banco
        </div>
      </Card>

      <Card title="Polski">
        <div className="space-y-2">
          <p className="text-sm font-bold">
            Czym jest "Płać przez bank"?
          </p>

          * Jak przelew bankowy, ale łatwiejszy
          * Natychmiastowy i automatycznie skonfigurowany dla Twojego zakupu
          * Równie bezpieczny jak bankowość internetowa
          * Zatwierdzasz płatność bezpośrednio w swoim banku
        </div>
      </Card>

      <Card title="Slovenčina">
        <div className="space-y-2">
          <p className="text-sm font-bold">
            Čo je Okamžitá banková platba?
          </p>

          * Ako bankový prevod, len jednoduchší
          * Okamžitý a automaticky nastavený pre Váš nákup
          * Rovnako bezpečný ako internetbanking
          * Platbu schvaľujete priamo vo Vašej banke
        </div>
      </Card>
    </CardGroup>
  </Tab>
</Tabs>