Afterpay Messaging

Examples

Examples on this Page:

Country Specific Configurations

🇦🇺 ⠀ Australian Merchant Example

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 sample-product-image

🇨🇦⠀Canadian Merchant Example

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 sample-product-image

Badge Themes

Black on Mint

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

Mint on Black

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 sample product image mint on black

White on Black

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 sample product image white on black