Clearpay JS

Default

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="GBP"
            data-amount="100"
          ></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 }