Examples on this Page:
HTML
1 <!doctype html> 2 <html> 3 4 <head> 5 <script 6 src="https://js.afterpay.com/afterpay-1.x.js" 7 id="afterpay-placement-script" 8 data-min="35.00" 9 data-max="2000.00" 10 async> 11 </script> 12 </head> 13 14 <body> 15 16 <div class="container"> 17 <div class="ap-example"> 18 <img id="product-img" src="https://static-us.afterpay.com/docs/assets/jsfiddle/sample-product.png" alt="small bag" /> 19 20 <div id="product-description-wrapper"> 21 <h1>Small Backpack</h1> 22 <div class="product-price">$100.00</div> 23 <!-- Afterpay Messaging Placement--> 24 <afterpay-placement 25 data-locale="en_AU" 26 data-currency="AUD" 27 data-amount="100"></afterpay-placement> 28 </div> 29 </div> 30 </div> 31 32 33 </body> 34 35 </html>
Result
HTML
1 <!doctype html> 2 <html> 3 4 <head> 5 <!-- Afterpay.js --> 6 <script 7 src="https://js.afterpay.com/afterpay-1.x.js" 8 id="afterpay-placement-script" 9 data-min="35.00" 10 data-max="2000.00" 11 async> 12 </script> 13 <!-- Afterpay.js --> 14 15 </head> 16 17 <body> 18 19 <div class="container"> 20 <div class="ap-example"> 21 <img id="product-img" src="https://static-us.afterpay.com/docs/assets/jsfiddle/sample-product.png" alt="small bag" /> 22 23 <div id="product-description-wrapper"> 24 <h1>Small Backpack</h1> 25 <div class="product-price">$100.00</div> 26 <!-- Afterpay Messaging --> 27 <afterpay-placement 28 data-locale="en_CA" 29 data-currency="CAD" 30 data-amount="100"> 31 </afterpay-placement> 32 <!-- Afterpay Messaging --> 33 </div> 34 </div> 35 </div> 36 37 38 </body> 39 40 </html>
Result
HTML
1 <!doctype html> 2 <html> 3 4 <head> 5 <script src="https://js.afterpay.com/afterpay-1.x.js" 6 async></script> 7 </head> 8 9 <body> 10 11 <div class="container"> 12 <div class="ap-example"> 13 <img id="product-img" src="https://static-us.afterpay.com/docs/assets/jsfiddle/sample-product.png" alt="small bag" /> 14 15 <div id="product-description-wrapper"> 16 <h1>Small Backpack</h1> 17 <div class="product-price">$25.00</div> 18 <!-- Afterpay Messaging Placement--> 19 <afterpay-placement data-locale="en_US" data-badge-theme="black-on-mint" data-amount="25"></afterpay-placement> 20 </div> 21 </div> 22 </div> 23 24 25 </body> 26 27 </html>
Result
HTML
1 <!doctype html> 2 <html> 3 4 <head> 5 <script src="https://js.afterpay.com/afterpay-1.x.js" 6 async></script> 7 </head> 8 9 <body> 10 11 <div class="container"> 12 <div class="ap-example"> 13 <img id="product-img" src="https://static-us.afterpay.com/docs/assets/jsfiddle/sample-product.png" alt="small bag" /> 14 15 <div id="product-description-wrapper"> 16 <h1>Small Backpack</h1> 17 <div class="product-price">$25.00</div> 18 <!-- Afterpay Messaging Placement--> 19 <afterpay-placement data-locale="en_US" data-badge-theme="mint-on-black" data-amount="25"></afterpay-placement> 20 </div> 21 </div> 22 </div> 23 24 25 </body> 26 27 </html>
Result
HTML
1 <!doctype html> 2 <html> 3 4 <head> 5 <script src="https://js.afterpay.com/afterpay-1.x.js" 6 async></script> 7 </head> 8 9 <body> 10 11 <div class="container"> 12 <div class="ap-example"> 13 <img id="product-img" src="https://static-us.afterpay.com/docs/assets/jsfiddle/sample-product.png" alt="small bag" /> 14 15 <div id="product-description-wrapper"> 16 <h1>Small Backpack</h1> 17 <div class="product-price">$25.00</div> 18 <!-- Afterpay Messaging Placement--> 19 <afterpay-placement data-locale="en_US" data-badge-theme="white-on-black" data-amount="25"></afterpay-placement> 20 </div> 21 </div> 22 </div> 23 24 25 </body> 26 27 </html>
Result
