# Add Railbed to your website

> Keep customers on your site while they choose what to buy. Copy a small HTML snippet; Railbed handles the checkout.

Source: https://railbed.io/docs/user-guide/widgets-and-buttons/ · Updated: 2026-09-26 · Railbed by DeepWork user guide

## Choose the right format

A **buy button** opens a checkout over your website when clicked. A **payment widget** places a compact checkout directly inside your page. A **pricing table** can also sit inside your page with its plans visible.

These use checkouts created in the dashboard. Your website does not need an API key, a server integration or card fields.

| Format | Start with | What buyers see on your site |
|---|---|---|
| Buy button | A checkout page or pricing table | A button; clicking opens the checkout in an overlay |
| Payment widget | A payment widget checkout | The compact checkout itself, inline |
| Pricing table | A pricing table checkout | Plans and the price switch, if configured |

## Copy the code from Railbed

1. Open **Checkouts** and select your saved checkout.
2. Choose **Share**, then find **Add it to your site**.
3. Where offered, choose what to add. For a button, set **Button text** and **Shape**.
4. Copy the generated code and paste it into your site's HTML or custom-code block.
5. Preview the published page. Some site builders do not run custom scripts inside their editing canvas.

Start with a Test checkout. When ready, copy code from a separate Live checkout and replace the Test snippet.

## Add a buy button

Include the script once per page, then put the button where you want it:

Example: A button that opens your checkout

```html
<script src="https://pay.railbed.io/embed.js" async></script>

<railbed-button
  checkout="your-checkout-slug"
  label="Book a consultation"
  shape="rounded">
</railbed-button>
```

| Attribute | What it does |
|---|---|
| checkout | Required. The slug from your saved checkout URL |
| label | Optional. Your button text; defaults to Buy now, or See plans for a pricing table |
| shape | Optional. Use pill or rounded; the default is pill |

The button takes your business's brand color. Set that in [Settings](https://railbed.io/docs/user-guide/branding-and-settings.md). The button label is separate from the payment button text inside the checkout.

## Add an inline checkout

For a payment widget or pricing table, use this element:

Example: A checkout embedded in your page

```html
<script src="https://pay.railbed.io/embed.js" async></script>

<railbed-checkout
  checkout="your-widget-slug">
</railbed-checkout>
```

The embedded page adjusts its height to its content and keeps the configured Light or Dark theme. Give it enough width for the checkout to be readable; test the surrounding layout on a phone too.

## What happens when a buyer pays

The buyer starts in your embedded checkout. The card provider opens in a new tab because card entry happens on the provider's own page. If the browser blocks the new tab, the provider can open in the same tab instead.

After confirmation, the checkout can send the parent page to the success URL you configured. If a buyer tries to close an overlay while paying, it asks before closing. Returning to your website alone does not confirm payment: check Payments or use your connected store's verified order status.

## Troubleshoot an embed

- **Nothing appears:** confirm your site builder allows custom HTML and JavaScript, includes the script, and keeps the custom element tags. Check the published page as well as the editor.
- **Checkout unavailable:** check that the slug matches an existing checkout and that it has not been deleted or become unavailable.
- **Still in Test mode:** copy the code from the Live checkout. Flipping your dashboard mode does not change the slug in your website.
- **Provider opens elsewhere:** that is expected. Provider card entry is not embedded inside your website.

Only Railbed checkout and payment pages can be framed. Do not try to embed the dashboard or a tracking page. If a custom integration needs more control, use the [developer guides](https://railbed.io/docs/guides/hosted-checkout.md).