Shop online with AR Quick Look

5:47 - Customization Options - Recap

<a rel="ar" href="alarm-clock.usdz#canonicalWebPageURL=https://developer.apple.com/alarm-clock-product-page/&allowsContentScaling=0">
    <img src="alarm-clock-thumbnail.jpg">
</a>

8:53 - Apple Pay Banner

<a rel="ar" id="ar-link" href="alarm-clock.usdz#applePayButtonType=plain&checkoutTitle=Retro%20Alarm%20Clock&checkoutSubtitle=Charming%20old-school%20look%20with%20built-in%20FM%20tuner&price=$92.50">
    <img src="alarm-clock-thumbnail.jpg">
</a>

11:42 - Custom Action Banner

<a rel="ar" id="ar-link" href="kids-slide.usdz#callToAction=Preorder&checkoutTitle=Kids%20Slide&checkoutSubtitle=Enjoy%20the%20playground,%20right%20from%20your%20home&price=$145">
    <img src="kids-slide-thumbnail.jpg">
</a>

13:39 - Custom Banner

<a rel="ar" id="ar-link" href="solar-panels.usdz#custom=https://developer.apple.com/solar_panels_banner.html&customHeight=small">
    <img src="solar-panels-thumbnail.jpg">
</a>

14:04 - Custom Banner - Medium Height

<a rel="ar" id="ar-link" href="solar-panels.usdz#custom=https://developer.apple.com/solar_panels_banner.html&customHeight=medium">
    <img src="solar-panels-thumbnail.jpg">
</a>

14:09 - Custom Banner - Large Height

<a rel="ar" id="ar-link" href="solar-panels.usdz#custom=https://developer.apple.com/solar_panels_banner.html&customHeight=large">
    <img src="solar-panels-thumbnail.jpg">
</a>

16:31 - Full Apple Pay with Event Listener Example

<a rel="ar" id="ar-link" href="alarm-clock.usdz#applePayButtonType=plain&checkoutTitle=Retro%20Alarm%20Clock&checkoutSubtitle=Charming%20old-school%20look%20with%20built-in%20FM%20tuner&price=$92.50">
    <img src="alarm-clock-thumbnail.jpg">
</a>



<script type="application/javascript">
    const linkElement = document.getElementById("ar-link");
    linkElement.addEventListener("message", function (event) {
        if (event.data == "_apple_ar_quicklook_button_tapped") {
            // handle the user tap.   
        }
    }, false);
</script>