# Choose how to take payments

Compare hosted checkout, embedded checkout, card fields, payment links, invoices, mobile apps and the WooCommerce plugin by the front-end work they need, what your customer sees, the payment methods they offer and how you learn the result.

Source: https://vezmo.com/docs/developers/integration-options

## Overview

Every way to take a payment with Vezmo ends in the same place: a payment in **VezmoPay › Transactions**, the same
webhook events and the same Payments API. They differ in how much you build and where your customer pays.

Card details never reach your servers in any of them: Vezmo's checkout or its secure fields collect them.

## Compare the options

| Option | Front-end work | What your customer sees | How you learn the result |
| --- | --- | --- | --- |
| [Hosted checkout](/docs/developers/hosted-checkout) | None. Your server creates a session and sends the customer to its `url`. | A checkout page hosted by Vezmo, with your business name. | `payment.success` webhook; the customer comes back to your `successUrl` with `paymentId` and `status`. |
| [Embedded checkout](/docs/developers/embedded-checkout) | A script tag, a container and your own Pay button. Your site must be in **Trusted origins**. | Vezmo's payment form inside your own page, in a frame. | Browser events (`success`, `pending`, `error`) for your page; the webhook for your server. |
| [Card fields](/docs/developers/embedded-checkout) | Most: you build the checkout page and mount Vezmo's secure payment field in it, styled to match. Your site must be in **Trusted origins**. | Your own checkout page, with Vezmo's payment field. | The result of `confirm()` for your page; the webhook for your server. |
| [Payment links](/docs/get-paid/payment-links) | None. Make a link in the dashboard or with `POST /merchant/paylinks`. | A Vezmo checkout page for one amount, opened from a link you send. | `payment.success`; the link shows **Paid**. |
| [Invoices](/docs/get-paid/invoices) | None. Send one from the dashboard or with `POST /merchant/invoice`. | An emailed invoice with a page to pay it. | `invoice.paid` and `payment.success`. |
| [Mobile apps](https://user.vezmo.com/docs/v1/mobile) | Checkout for apps: open the hosted checkout in the phone's secure browser sheet, no SDK. | The hosted checkout. | The webhook; your app's return link carries `status`, and `paymentId` unless the payment failed. |
| [WooCommerce](/docs/developers/woocommerce) | None. Install the plugin and select **Connect with VezmoPay**. | Vezmo's payment form on your store's checkout, in a frame, or a Vezmo checkout page. | The plugin updates each order from the webhook. |

## Payment methods

- **Hosted checkout, embedded checkout and mobile apps** offer cards, Apple Pay and Google Pay, and every other method
  you have turned on that fits the payment: US bank payments, pay-later methods and the customer's own currency where
  available.
- **Card fields** offer cards, Apple Pay and Google Pay, US bank payments and most of the other methods. A few are on
  the hosted and embedded checkout only; the [Elements reference](https://user.vezmo.com/docs/v1/elements) lists them.
- **Payment links and invoices** offer the same payment methods as hosted checkout.

Which methods you offer is set per business. See [Payment methods in the API reference](https://user.vezmo.com/docs/v1/payment-methods).

## Which one to pick

- **You have a website and want the least work:** hosted checkout. One API call and a redirect.
- **You want your customer to stay on your page:** embedded checkout. Add your site to **Trusted origins** first.
- **You want full control of the page's layout:** card fields.
- **You don't have a website, or you bill clients by email:** payment links and invoices, from the dashboard. No code.
- **You sell in an app:** checkout for apps.
- **You run a WooCommerce store:** the plugin. **Connect with VezmoPay** generates a key for you, which turns off your
  current key of that mode (see [API keys](/docs/developers/api-keys#one-active-key-per-mode)).

## The parts they share

- **One session API.** Hosted checkout, embedded checkout, card fields and mobile apps all start with the same server
  call, `POST /merchant/secure-payments`. Moving between them changes a few fields of that call, not your server's
  design.
- **Webhooks.** Ship orders on the `payment.success` event, never on a browser event or a redirect alone. See
  [Webhooks](/docs/developers/webhooks).
- **Test mode.** Every option works with a test key and test cards. See
  [Test mode for developers](/docs/developers/test-mode).

## Related

- [Take your first test payment](/docs/developers/quickstart)
- [Hosted checkout](/docs/developers/hosted-checkout)
- [Go-live checklist](/docs/developers/go-live)
- [API reference](https://user.vezmo.com/docs/v1)