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

# Accept payments on the web

> Choose the right web integration for your checkout: Embed or Secure Fields.

Gr4vy offers two approaches for accepting payments on the web. Both are PCI-compliant and support cards, digital wallets, and 100+ payment methods. The right choice depends on how much control you need over your checkout UI.

## Compare approaches

|                     | Embed                                 | Secure Fields                                                    |
| ------------------- | ------------------------------------- | ---------------------------------------------------------------- |
| **Best for**        | Fast integration with a complete UI   | Custom checkout with full design control                         |
| **UI**              | Pre-built, customizable payment sheet | You build the UI around minimal card fields                      |
| **Payment methods** | Cards, wallets, BNPL, local methods   | Cards in Secure Fields, plus APMs and wallets through Direct API |
| **3DS**             | Handled automatically                 | Native or Hosted (your choice)                                   |
| **PCI scope**       | SAQ A                                 | SAQ A                                                            |
| **Setup time**      | Fastest                               | More involved                                                    |

## Embed

Embed is a drop-in payment sheet that you add to your checkout page. It handles payment method selection, card capture, digital wallets, and buyer interactions with no custom UI required. You can customize its appearance to match your brand.

<CardGroup cols={1}>
  <Card title="Get started with Embed" icon="globe" href="/guides/payments/embed/quick-start/overview">
    Use Embed with React, Node.js, or vanilla JavaScript.
  </Card>
</CardGroup>

### Extend your Embed integration

<CardGroup cols={3}>
  <Card title="Apple Pay" icon="apple-pay" href="/guides/features/apple-pay/web">
    Set up Apple Pay in your web checkout with Embed.
  </Card>

  <Card title="Google Pay" icon="google-pay" href="/guides/features/google-pay/web">
    Set up Google Pay in your web checkout with Embed.
  </Card>

  <Card title="3-D Secure" icon="shield-check" href="/guides/features/3ds/embed">
    Configure and test 3-D Secure for Embed transactions.
  </Card>
</CardGroup>

## Secure Fields

Secure Fields provides lightweight, PCI-compliant card input fields that drop into your own checkout UI. You control the layout, design, and flow. Gr4vy securely captures and vaults card data.

If you need APMs, you can combine Secure Fields with [Direct API mode](/guides/payments/direct-api/quick-start/overview). This lets you keep your custom card form while still offering additional payment methods such as Apple Pay, Google Pay, BNPL, and local payment methods.

<CardGroup cols={1}>
  <Card title="Get started with Secure Fields" icon="globe" href="/guides/payments/secure-fields/quick-start/overview">
    Use Secure Fields with React, Node.js, or vanilla JavaScript.
  </Card>
</CardGroup>

### Extend Secure Fields with Direct API

<CardGroup cols={3}>
  <Card title="List payment options (APMs)" icon="list" href="/guides/payments/direct-api/quick-start/payment-options">
    Use Direct API to show eligible APMs for each checkout context.
  </Card>

  <Card title="Apple Pay without Embed" icon="apple-pay" href="/guides/features/apple-pay/web-without-sdk">
    Add Apple Pay to custom web checkouts built outside Embed.
  </Card>

  <Card title="Google Pay without Embed" icon="google-pay" href="/guides/features/google-pay/web-without-sdk">
    Add Google Pay to custom web checkouts built outside Embed.
  </Card>
</CardGroup>

## Not sure which to choose?

Start with **Embed** if you want the fastest path to a working checkout with the broadest payment method coverage out of the box. Choose **Secure Fields** if your design requires full control over the card form, or if you want to combine custom card capture with Direct API for APMs and wallets.