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

# Buy Button

> Embed a styled payment button anywhere on your Ghost site.

A Buy Button is a clickable button that you embed inline in any Ghost post or page. It opens a checkout or any URL when clicked.

Ghost has a built-in button block — a PayGlue Buy Button gives you more styling control: custom colors, border radius, button width, label text, and alignment, all managed from the dashboard without touching any code.

## What you need

* A PayGlue account
* To use **Link a product**: a payment provider connected, at least one product created, and a product mapping set up

## Create a button

<Steps>
  <Step title="Open Buy Buttons">
    In your PayGlue dashboard, go to **Installation > Buttons** and click **New button**.
  </Step>

  <Step title="Name your button">
    Enter an internal name. This is only visible to you in the dashboard and helps you identify the button later.

    Optionally add a **description** — also internal only — for your own notes.
  </Step>

  <Step title="Set the link">
    Choose how the button links to your checkout:

    **Free URL** — paste any link. This can be a checkout URL from your payment provider, a Ghost portal link, or any other page. No further setup required.

    **Link a product** — select a product from your connected payment provider. The checkout URL is filled in automatically. Your payment provider must be fully connected and a product mapping must exist before using this option. Without a mapping, a purchase goes through but PayGlue cannot grant Ghost access to the member automatically.

    <Frame>
      <img src="https://mintcdn.com/payglue/C3zo0LeG6bKgcCIE/images/payglue-button.png?fit=max&auto=format&n=C3zo0LeG6bKgcCIE&q=85&s=03daa68c78ffeb0ed8900dfa884f4a4d" alt="Payglue Button" width="1457" height="1572" data-path="images/payglue-button.png" />
    </Frame>

    <Note>
      If you see **Sandbox mode — using test products**, your Polar token is set to the test environment. Purchases made via sandbox buttons do not result in real charges and will not trigger webhooks in production. Switch to a production token in **Connection > Polar** to go live.
    </Note>
  </Step>

  <Step title="Customize appearance">
    Set the button label, background color, text color, border radius, and width. Use the alignment options to position the button within the Ghost editor column.

    Under **Open link in**, choose **New tab** (recommended for external checkout pages) or **Same tab**.

    <Frame>
      <img src="https://mintcdn.com/payglue/C3zo0LeG6bKgcCIE/images/payglue-button-custom.png?fit=max&auto=format&n=C3zo0LeG6bKgcCIE&q=85&s=6164e31427a815869f3657ce3dd98862" alt="Payglue Button Custom" width="1457" height="1572" data-path="images/payglue-button-custom.png" />
    </Frame>
  </Step>

  <Step title="Save and copy the embed code">
    Click **Save**. The embed code appears directly below the form.

    Copy the embed code.
  </Step>

  <Step title="Paste into Ghost">
    In your Ghost post or page editor, add an **HTML card** where you want the button to appear, then paste the embed code.

    <Frame>
      <img src="https://mintcdn.com/payglue/C3zo0LeG6bKgcCIE/images/payglue-button-demo.png?fit=max&auto=format&n=C3zo0LeG6bKgcCIE&q=85&s=093f238f0504f77d9a27e49c931b3ac0" alt="Payglue Button Demo" width="1457" height="1572" data-path="images/payglue-button-demo.png" />
    </Frame>
  </Step>

  <Step title="Want to test it?">
    Just visit [https://blog.payglue.io/three-buttons-one-dashboard-how-we-embed-payment-links-in-this-blog/](https://blog.payglue.io/three-buttons-one-dashboard-how-we-embed-payment-links-in-this-blog/) and you can smash some buttons.
  </Step>
</Steps>

## Editing a button

Open **Installation > Buttons** in the dashboard and click the edit icon next to any button. Changes apply to all posts that use that button's embed code — you do not need to update the embed in Ghost.

<Frame>
  <img src="https://mintcdn.com/payglue/C3zo0LeG6bKgcCIE/images/payglue-edit-button.png?fit=max&auto=format&n=C3zo0LeG6bKgcCIE&q=85&s=0ad8a427f81f2239f6fdc437510b539b" alt="Payglue Edit Button" width="1077" height="289" data-path="images/payglue-edit-button.png" />
</Frame>

## New tab vs. same tab

The default is **New tab**, which is recommended for external checkout pages. Choose **Same tab** if the link should keep the visitor within your Ghost site, for example when linking to a Ghost member portal page.