<!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;
        }

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

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

        .set-up {
            -apple-pay-button-type: set-up;
        }

        .donate {
            -apple-pay-button-type: donate;
        }
    </style>
</head>
<body>
    <script>
        for (let style of ["white", "white-outline", "black"]) {
            for (let type of ["plain", "buy", "set-up", "donate"]) {
                var button = document.createElement("button");
                button.classList.add("apple-pay-button", style, type);
                document.body.appendChild(button);
            }
        }
    </script>
</body>
</html>