# Hosted checkout, Pay button and branding

> Take payments with hosted payment links, a Pay button or inline checkout on your website, your own checkout domain and your logo and brand colour.

Source: https://anytime-capital.com/docs/checkout · Markdown: https://anytime-capital.com/docs/checkout.md · All docs: https://anytime-capital.com/docs/llms-full.txt

Every way to take a payment online runs on the same hosted checkout: a page served by Anytime Capital where your customer pays by card, Apple Pay or Google Pay, or by bank account where you have turned it on. Card details are entered there, never on your servers.

## Hosted payment links

A payment link's `url` (`https://anytime-capital.com/pay/business/pl_4kTz8QwN2xYb6RcD1mPa`) is a complete checkout page. Make links in the dashboard under **Payment Links**, or with the [Payment links API](https://anytime-capital.com/docs/payment-links.md). Share the link anywhere, download its QR code, or redirect a customer to it from your own checkout.

- **One-time or reusable:** a `singleUse` link closes after its first payment; a reusable one takes payments until you deactivate it.
- **After payment:** send the customer to your `successUrl`, or show your `confirmationMessage` on our confirmation page.
- **Buyer choices:** quantity, tips, pay what you want, discount codes, shipping and up to three checkout questions.
- **Terms consent:** with a terms link in Settings → Payments, a link can require customers to agree to your terms before paying.
- **Invoices** have their own pay page at the invoice's `url`, with the balance and any deposit.

## Pay button on your website

**Checkout tools → Add to your website** in the dashboard writes this code for any of your links. The button is a plain link to the checkout page, so it still works where scripts are stripped; our script (`/embed/anytime-pay.js`) upgrades it to a checkout that opens over your page.

**Pay button (opens checkout over your page)**

```html
<a href="https://anytime-capital.com/pay/business/pl_4kTz8QwN2xYb6RcD1mPa" data-anytime-pay="pl_4kTz8QwN2xYb6RcD1mPa" style="display:inline-block;padding:12px 24px;border-radius:8px;background:#2563EB;color:#FFFFFF;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer">Pay $125.00</a>
<script async src="https://anytime-capital.com/embed/anytime-pay.js"></script>
```

### Inline checkout

Place the checkout itself inside your page. It grows with its content.

```html
<div data-anytime-pay-inline="pl_4kTz8QwN2xYb6RcD1mPa">
  <a href="https://anytime-capital.com/pay/business/pl_4kTz8QwN2xYb6RcD1mPa">Pay securely with Anytime Capital Payments</a>
</div>
<script async src="https://anytime-capital.com/embed/anytime-pay.js"></script>
```

### Plain link, no script

A styled link to the checkout page, in your brand colour. It works anywhere HTML can be pasted, including site builders that don't allow scripts.

```html
<a href="https://anytime-capital.com/pay/business/pl_4kTz8QwN2xYb6RcD1mPa" target="_blank" rel="noopener" style="display:inline-block;padding:12px 24px;border-radius:8px;background:#2563EB;color:#FFFFFF;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer">Pay $125.00</a>
```

### Prefill checkout

Fill in the customer's email, apply a discount code and attach your own order reference. The reference is stored on the payment as `clientReference` and comes back in the API and in webhooks. A value the checkout can't use is ignored.

```html
<!-- On the Pay button or the inline checkout -->
<a href="https://anytime-capital.com/pay/business/pl_4kTz8QwN2xYb6RcD1mPa" data-anytime-pay="pl_4kTz8QwN2xYb6RcD1mPa"
   data-email="customer@example.com" data-code="WELCOME10" data-ref="order-1042">Pay</a>

<!-- Or on the link itself -->
https://anytime-capital.com/pay/business/pl_4kTz8QwN2xYb6RcD1mPa?prefilled_email=customer%40example.com&code=WELCOME10&ref=order-1042
```

Your own script can also open a checkout: `AnytimePay.open("pl_…")`, or `AnytimePay.open("pl_…", { email, code, ref })`.

### React to a payment on your page

When a payment succeeds, the element that opened the checkout (and the document) receive an `anytime-pay:succeeded` event. Unless you call `preventDefault()`, the page then goes on to the link's success URL when it has one. Use the event for the experience on the page, and the `payment.succeeded` webhook to fulfil the order.

```html
<script>
  document.addEventListener("anytime-pay:succeeded", function (event) {
    // event.detail: { paymentId, paymentLinkId, successUrl }
    // Call event.preventDefault() to stay on this page instead of
    // going on to the link's success URL.
  });
</script>
```

## Your own checkout domain

In **Settings → Domains**, connect a subdomain you own, such as `pay.yourbusiness.com`, and add the DNS record the page shows. Once it's connected your payment links, invoices and receipts open there, with Apple Pay and Google Pay set up on it for you. Your main website stays as it is: use a subdomain you don't use for anything else. A business can connect up to 2 domains.

## Your branding

In **Settings → Branding & receipts**, upload your logo (PNG, JPEG, WEBP, up to 1 MB) and pick your brand colour. They appear as the merchant on your payment pages, invoices, invoice emails and receipts, with a live preview as you edit. Receipts can also show your support email and phone, your address, a thank-you message and a footer note such as your return policy. Checkout itself stays secured and processed by Anytime Capital Payments.

## Choosing an approach

| You want to | Use |
| --- | --- |
| Sell one thing at a fixed price with no code | A reusable payment link from the dashboard, shared or as a QR code |
| Add a Pay button to a site builder or landing page | The Pay button or plain link snippet |
| Charge a cart total your app calculates | Create a `singleUse` link per order from your backend and redirect to its `url` |
| Bill a client with line items and a due date | An [invoice](https://anytime-capital.com/docs/invoices.md) |
| Take a payment face to face | [In-person QR checkout](https://anytime-capital.com/docs/in-person.md) |

---

Anytime Capital is a fintech company, not a bank. Payment processing, banking and payout services are provided by Anytime Capital's licensed partners. Rates shown are for US card payments; international cards, currency conversion and disputes may carry additional fees shown in your dashboard before you accept a payment.