> This page is for Afterpay Online Developer, version Main (default).
> For other versions, use one of these documentation indexes:
> - Main (default): https://developers.afterpay.com/afterpay-online-developer/main/llms.txt
> - v1: https://developers.afterpay.com/afterpay-online-developer/v-1/llms.txt
> - Chinese: https://developers.afterpay.com/afterpay-online-developer/chinese/llms.txt

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.afterpay.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.afterpay.com/_mcp/server.

# Examples

Examples on this Page:

* [Country Specific Configurations](#country-specific-configurations)

* [Badge Themes](#badge-themes)

## Country Specific Configurations

### 🇦🇺 ⠀ Australian Merchant Example

**HTML**

```html
<!doctype html>
<html>

  <head>
   <script 
       src="https://js.afterpay.com/afterpay-1.x.js" 
       id="afterpay-placement-script"
       data-min="35.00"
       data-max="2000.00" 
       async>
   </script>
  </head>

  <body>

    <div class="container">
      <div class="ap-example">
        <img id="product-img" src="https://static-us.afterpay.com/docs/assets/jsfiddle/sample-product.png" alt="small bag" />

        <div id="product-description-wrapper">
          <h1>Small Backpack</h1>
          <div class="product-price">$100.00</div>
          <!-- Afterpay Messaging Placement-->
          <afterpay-placement
           data-locale="en_AU"
             data-currency="AUD"
           data-amount="100"></afterpay-placement>
        </div>
      </div>
    </div>


  </body>

</html>
```

**Result**
![sample-product-image](/_fern-img/6a03673c83c686735cf2a2827ff571a954e43d54914ab019730ada93cb6481e5.webp)

### 🇨🇦⠀Canadian Merchant Example

**HTML**

```html
<!doctype html>
<html>

  <head>
    <!-- Afterpay.js  -->
   <script 
       src="https://js.afterpay.com/afterpay-1.x.js" 
       id="afterpay-placement-script"
       data-min="35.00"
       data-max="2000.00" 
       async>
   </script>
    <!-- Afterpay.js -->

  </head>

  <body>

    <div class="container">
      <div class="ap-example">
        <img id="product-img" src="https://static-us.afterpay.com/docs/assets/jsfiddle/sample-product.png" alt="small bag" />

        <div id="product-description-wrapper">
          <h1>Small Backpack</h1>
          <div class="product-price">$100.00</div>
          <!-- Afterpay Messaging  -->
          <afterpay-placement
             data-locale="en_CA"
             data-currency="CAD"
             data-amount="100">
           </afterpay-placement>
         <!-- Afterpay Messaging  -->
        </div>
      </div>
    </div>


  </body>

</html>
```

**Result**
![sample-product-image](/_fern-img/6a03673c83c686735cf2a2827ff571a954e43d54914ab019730ada93cb6481e5.webp)

## Badge Themes

### Black on Mint

**HTML**

```html
<!doctype html>
<html>

  <head>
    <script src="https://js.afterpay.com/afterpay-1.x.js" 
        async></script>
  </head>

  <body>

    <div class="container">
      <div class="ap-example">
        <img id="product-img" src="https://static-us.afterpay.com/docs/assets/jsfiddle/sample-product.png" alt="small bag" />

        <div id="product-description-wrapper">
          <h1>Small Backpack</h1>
          <div class="product-price">$25.00</div>
          <!-- Afterpay Messaging Placement-->
          <afterpay-placement data-locale="en_US" data-badge-theme="black-on-mint" data-amount="25"></afterpay-placement>
        </div>
      </div>
    </div>


  </body>

</html>
```

**Result**

### Mint on Black

**HTML**

```html
<!doctype html>
<html>

  <head>
    <script src="https://js.afterpay.com/afterpay-1.x.js" 
        async></script>
  </head>

  <body>

    <div class="container">
      <div class="ap-example">
        <img id="product-img" src="https://static-us.afterpay.com/docs/assets/jsfiddle/sample-product.png" alt="small bag" />

        <div id="product-description-wrapper">
          <h1>Small Backpack</h1>
          <div class="product-price">$25.00</div>
          <!-- Afterpay Messaging Placement-->
          <afterpay-placement data-locale="en_US" data-badge-theme="mint-on-black" data-amount="25"></afterpay-placement>
        </div>
      </div>
    </div>


  </body>

</html>
```

**Result**
![sample product image mint on black](/_fern-img/732895bfcf843c2147f33262968752f3797f47db7418ebf29aec268f906dffe9.webp)

### White on Black

**HTML**

```html
<!doctype html>
<html>

  <head>
    <script src="https://js.afterpay.com/afterpay-1.x.js" 
        async></script>
  </head>

  <body>

    <div class="container">
      <div class="ap-example">
        <img id="product-img" src="https://static-us.afterpay.com/docs/assets/jsfiddle/sample-product.png" alt="small bag" />

        <div id="product-description-wrapper">
          <h1>Small Backpack</h1>
          <div class="product-price">$25.00</div>
          <!-- Afterpay Messaging Placement-->
          <afterpay-placement data-locale="en_US" data-badge-theme="white-on-black" data-amount="25"></afterpay-placement>
        </div>
      </div>
    </div>


  </body>

</html>
```

**Result**
![sample product image white on black](/_fern-img/811d3da9c41961a8bf363226fdbd4bdccfd457541f0502c70fa5648fdf8e0456.webp)