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

# Payment Slots

> Create custom payment-method components for the checkout

A **payment slot** lets you render your own component inside a payment method in the checkout, for example to show a disclaimer, terms, or extra instructions when a shopper selects a specific method.

Each payment method exposes one content slot, and the slot id is derived from the method itself. Build a component for that slot id, deploy it, and it renders whenever that method is selected.

## How a payment slot id is built

A payment slot id is derived from the payment method's **name** and **id**:

1. Take the method `name`.
2. Remove accents and lowercase it.
3. Replace every run of non-alphanumeric characters with `_`.
4. Append the method `id`.

The result is:

```
payment_<sanitized_name>_<id>_content
```

**Example**: a method `{ id: "203", name: "Pay in Installments" }`:

| Step           | Value                                     |
| -------------- | ----------------------------------------- |
| Method name    | `Pay in Installments`                     |
| Sanitized name | `pay_in_installments`                     |
| Method id      | `203`                                     |
| **Slot id**    | `payment_pay_in_installments_203_content` |

## Finding the method name and id

The `name` and `id` come straight from the checkout session, so you don't need to look them up in your payment provider's admin.

Read `session.payment.availableMethods`. Each entry is a payment method with an `id` and a `name`:

```json theme={"system"}
{ "id": "16", "name": "Vale" }
```

Use those two values to build the slot id as shown above.

## Creating a custom payment component

### 1. Build the component

The component receives `children` (the method's default content) and renders it, then adds your own content below. Keep the copy inline:

```tsx theme={"system"}
// components/PaymentInstallmentNotice/index.tsx
import type { ReactNode } from "react";
import styles from "./index.module.css";

export default function PaymentInstallmentNotice({
  children,
}: {
  children?: ReactNode;
}) {
  return (
    <>
      {children}
      <p className={styles.notice}>
        Pay in 3 interest-free installments with your card. You'll be
        redirected to complete the payment, so please don't close the page.{" "}
        <a href="https://example.com/terms" target="_blank" rel="noreferrer">
          Terms & conditions
        </a>
      </p>
    </>
  );
}
```

### 2. Add meta.json

Point the component at the slot id. `meta.json` only needs the slot plus the required identifiers:

```json theme={"system"}
// components/PaymentInstallmentNotice/meta.json
{
  "name": "payment-installment-notice",
  "version": "1.0.0",
  "slot": "payment_pay_in_installments_203_content",
  "id": "2893c0fc-1872-4a59-be2a-dba92d7a54f5"
}
```

The `slot` must match the id you built from the method's name and id.

### 3. Deploy

Deploy the component from **Studio**. Once the build succeeds, the component renders whenever that payment method is selected in the checkout. See [Studio](./studio-editor.mdx) for the deploy flow.

## Styling

Style your component with a CSS module and the checkout's CSS variables so it follows the active theme:

```css theme={"system"}
/* components/PaymentInstallmentNotice/index.module.css */
.notice {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--color-secondary, #666);
}

.notice a {
  color: var(--color-primary);
  text-decoration: underline;
}
```

## Troubleshooting

<AccordionGroup>
  <Accordion title="The payment method doesn't appear in checkout">
    The method is provided by your payment provider, not by the component. Confirm it's enabled for your store and that any eligibility rules (order value, categories, region) are met.
  </Accordion>

  <Accordion title="The slot renders nothing">
    The `slot` in `meta.json` must exactly match the generated id. Re-derive it from the method's `name` and `id` (`payment_<sanitized_name>_<id>_content`) and confirm the method `id` is correct.
  </Accordion>

  <Accordion title="Styling looks off">
    Make sure your CSS module is imported in the component and deployed alongside it. Use the checkout CSS variables for colors so it follows the active theme.
  </Accordion>

  <Accordion title="Testing before you deploy">
    Run the dev server and open **Studio** to preview your component live in the checkout. Select the payment method to see your component render. See [Studio](./studio-editor.mdx).
  </Accordion>
</AccordionGroup>

## Related

* [Studio](./studio-editor.mdx) — preview and deploy components
* [Slots](../concepts/slots.mdx) — the slot system in general
* [Components](../concepts/component.mdx) — how components work