Clearpay JS

Mint on black

by afterpay

HTML

<!doctype html>
<html>

  <head>
    <!-- Afterpay.js  -->
   <script 
       src="https://js.afterpay.com/afterpay-1.x.js" 
       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_GB"
             data-currency="GBD"
             data-amount="100"
             data-badge-theme="mint-on-black"
             >
           </afterpay-placement>
         <!-- Afterpay Messaging  -->
        </div>
      </div>
    </div>


  </body>

</html>

CSS

.container {
  display: flex;
  flex-wrap: wrap;
  font-family: Arial,Helvetica Neue,Helvetica,sans-serif; 
  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 3px 10px;
    -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 3px 10px;
    box-shadow: rgba(0, 0, 0, 0.4) 0 3px 10px;
    padding: 18px 20px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
}


.ap-example {
  padding: 10px 40px 10px 10px;

  margin: 10px;
}
.product-price {
  margin-top: 20px;
  font-size: 28px;
}


.afterpay-paragraph{ font-size: 18px;}

.afterpay-link{ font-size: 16px; }
  #product-description-wrapper {
    float: right;
    margin-top: 40px;
  }
 .product-price { margin-top: 50px; }
  #product-img {  max-width: 220px }