<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test rendering Apple Pay buttons</title>
    <style>
        .apple-pay-button {
            -webkit-appearance: -apple-pay-button;
            display: block;
        }

        .white {
            -apple-pay-button-style: white;
        }

        .white-outline {
            -apple-pay-button-style: white-outline;
        }

        .black {
            -apple-pay-button-style: black;
        }

        .check-out {
            -apple-pay-button-type: check-out;
        }

        .book {
            -apple-pay-button-type: book;
        }

        .subscribe {
            -apple-pay-button-type: subscribe;
        }
        .borderRadiusLarge {
            border-top-left-radius: 20px/21px;
            border-top-right-radius: 25px;
            border-bottom-left-radius: 10px/1px;
            border-bottom-right-radius: 5px;
        }
    </style>
</head>
<body bgcolor="#E6E6FA">
    <script>
        for (let style of ["white", "white-outline", "black"]) {
            for (let type of ["check-out", "book", "subscribe"]) {
                var button = document.createElement("button");
                button.classList.add("apple-pay-button", style, type, "borderRadiusLarge");
                document.body.appendChild(button);
            }
        }
    </script>
</body>
</html>