---
updatedAt: 2026-08-21T21:32:28.000Z
agentTools:
  projectIndex: https://developer.paze.com/public/llms.txt
---

# Overview

<HTMLBlock>{`
  
  <section class="auto-hero">
    <h1>Button Initiated Checkout</h1>
    <p>

Paze&#174 provides buttons designed to align with various user call to actions. And, in various styles to fit your user interface. Each button has Paze specific colors, shapes, and labels. You can style the button to match your UI with accessibility built in.  
    </p>

    
  </section>
`}</HTMLBlock>

<HTMLBlock>{`
<style>wistia-player[media-id='8os82xpitc']:not(:defined) { background: center / contain no-repeat url('https://fast.wistia.com/embed/medias/8os82xpitc/swatch'); display: block; filter: blur(5px); padding-top:46.88%; }</style> <wistia-player media-id="8os82xpitc" aspect="2.1333333333333333"></wistia-player>
`}</HTMLBlock>

<HTMLBlock>{`

<section class="section">
  <h2>Paze button everywhere</h2>
  <p class="section-intro">

   A Paze button can be placed on the checkout, product details, and cart pages. We recommend adding Paze anywhere a customer can choose a payment method and initiate a purchase. Follow the Paze button guidelines for best results. 
  </p>
</section>
`}</HTMLBlock>

<HTMLBlock>{`

<section class="section">
  <div class="feature">
    <div class="feature-img">
      <img
        src="https://files.readme.io/36c81fa22509007c8dd9e0f77fe1cc2c99b8b503b3239e51d0c58788e51d1b2e-pdp.svg"
        alt="Checkout form identifying customer by email"
      />
    </div>
    <div class="feature-text">
      <h3>Product details page</h3>
      <p>

Customers can complete their purchase from a product detials page, without the need to add to cart or fill out a form.
      </p>
    </div>
  </div>
</section>
`}</HTMLBlock>

<HTMLBlock>{`

<section class="section" style="margin-top:-100px;">
  <div class="feature reverse">
    <div class="feature-img">
      <img
        src="https://files.readme.io/fa283b21be7be1a562b0a499d06ba30b78159ed1f2d5afd19c09afe3ec7c0621-cart.svg"
        alt="Phone showing Paze checkout dialog"
      />
    </div>
    <div class="feature-text">
      <h3>Cart page</h3>
      <p>

Simplify transactions by adding Paze as a default and prominent checkout option.      </p>
    </div>
  </div>
</section>
`}</HTMLBlock>

<HTMLBlock>{`

<section class="section" style="margin-top:-100px;">
  <div class="feature">
    <div class="feature-img">
      <img
        src="https://files.readme.io/97deb8c3f15ab3b5372db7b83e381b4e2fd0c8291fb5407886f5f55effe07c0d-checkout.svg"
        alt="Phone showing biometric authentication prompt"
      />
    </div>
    <div class="feature-text">
      <h3>Checkout Page</h3>
      <p>

Simplify payment card selection by always displaying Paze      </p>
    </div>
  </div>
</section>
`}</HTMLBlock>

<HTMLBlock>{`


<style>
  /* ==========================
     Base layout + typography
  ========================== */
  header#content-head {
    display:none;
  }

  .auto-hero {
    text-align: center;
    padding: 0px 20px 40px;
    margin: 0 auto;
  }

  .auto-hero h1 {
    font-size: 42px !important;
    font-weight: 700;
    margin-bottom: 24px !important;
    color: #2B2BEE;
  }

  .auto-hero p {
    margin: 0 !important;
    font-size: 19px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 28.8px !important;
  }

  .auto-hero-img {
    display: flex;
    justify-content: center;
  }

  .auto-hero-img img {
    max-width: 100%;
    height: auto;
  }

  .section {
    padding: 0 40px;
    margin: 0 auto;
    position: relative;
    overflow: visible;
  }

  .section h2 {
    text-align: center;
    font-size: 32px;
    margin-bottom: 24px !important;
    font-size: 36px !important;
    font-style: normal !important;
    font-weight: 900 !important;
    line-height: 43.2px !important;
    letter-spacing: -1px !important;
  }

  .section-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
  }
  
  p.section-intro{
    font-size: 24px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 120% !important;
  }

  /* ==========================
     Feature rows (phone + text)
     ========================== */
  .feature {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* no extra flex spacing */
    gap: 0;                      /* spacing handled via margins */
    margin-bottom: 20px;
    position: relative;
    overflow: visible !important; /* let purple bar escape */
  }

  .feature.reverse {
    flex-direction: row-reverse;
  }

  .feature-img,
  .feature-text {
    padding: 0;
  }

  .feature-img {
    flex-shrink: 0;
  }

  .feature-img img {
    display: block;
    max-width: 525px;
    height: auto;
    border-radius: 24px;
    margin-left: -20px;
    padding: 120px;
  }

  .feature-text {
    width: 300px;
    max-width: 100%;
  }

  /* Text hugged tighter when phone is on the LEFT */
  .feature .feature-text {
    margin-left: -9% !important;
  }

  /* Text hugged tighter when phone is on the RIGHT */
  .feature.reverse .feature-text {
    margin-right: -11% !important;
  } 

  .feature-text h3 {
    font-size: 20px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height:  28px !important;
    letter-spacing: -0.1px !important;
  }

  .feature-text p {
    font-size: 15px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 21px !important;
    letter-spacing: -0.1px !important;
  }

  /* ==========================
     Purple blobs
     ========================== */
  .feature::before,
  .feature::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 360px;
    height: 220px;
    background: #eef0ff;
    transform: translateY(-50%);
    z-index: -1;
  }

  .feature::before {
    left: -160px;   /* left side blob */
    border-radius: 0 90px 90px 0;
  }

  .feature::after {
    right: -80%;
    width: 100%;    /* extends out to the right */
    border-radius: 90px 0 0 90px;
  }

  /* ==========================
     Medium / desktop down
     Stack phone + text earlier
     ========================== */
  @media (max-width: 1190px) {
    .section {
      padding: 0 24px;
    }

    .feature,
    .feature.reverse {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .feature-img img {
      max-width: 420px;
      padding: 90px;
      margin-left: 0;
    }

    .feature-text {
      width: auto;
      max-width: 440px;
      margin: 24px auto 0;
    }

    .feature .feature-text,
    .feature.reverse .feature-text {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    /* Remove blobs so they can't overlap */
    .feature::before,
    .feature::after {
      display: none;
    }
  }

  /* ==========================
     Responsive tweaks (phones)
     ========================== */
  @media (max-width: 768px) {
    .section {
      padding: 0 16px;
    }

    .feature,
    .feature.reverse {
      flex-direction: column;
      text-align: center;
    }

    .feature-img img {
      width: 220px;
      margin-left: 0;
      padding: 80px;
    }

    .feature-text {
      margin: 16px auto 0;
      max-width: 360px;
    }

    /* Keep blobs hidden on small screens */
    .feature::before,
    .feature::after {
      display: none;
    }
  }

  /* ==========================
     Scroll + container overrides
     ========================== */

  /* Kill horizontal scroll at viewport edge */
  html,
  body {
    overflow-x: hidden !important;
  }

  /* Let purple bars escape ReadMe’s content wrappers */
  .SuperHubDoc-article3ArTrEavUTKg,
  #content-container,
  .rm-Markdown,
  .rdmd-html,
  .section {
    overflow: visible !important;
  }

  /* Outer content shell shouldn’t scroll sideways either */
  .ContentWithOwlbot-content2X1XexaN8Lf2 {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: hidden;
  }
</style>
`}</HTMLBlock>

<br />

<br />