Skip to main content
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" }:
StepValue
Method namePay in Installments
Sanitized namepay_in_installments
Method id203
Slot idpayment_pay_in_installments_203_content

​
Finding the method name and id

The name and id come straight from the checkout session — 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: 
{ "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: 
// 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 — 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: 
// 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 for the deploy flow.

​
Styling

Style your component with a CSS module and the checkout’s CSS variables so it follows the active theme: 
/* 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

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.
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.
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.
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 — preview and deploy components
  • Slots — the slot system in general
  • Components — how components work