Afterpay Widget

minimum config options

by afterpay

HTML

<!doctype html>
<html>

  <head>
    <script src="https://js.afterpay.com/afterpay-1.x.js" 
       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">$25.00</div>
          <!-- Afterpay Messaging Placement-->
          <afterpay-placement data-locale="en_US" data-amount="25"></afterpay-placement>
        </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 }