<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test rendering Apple Pay buttons in version 4</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;
        }
    </style>
</head>
<body>
    <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);
                document.body.appendChild(button);
            }
        }
    </script>
</body>
</html>