e2e-tests/validation-errors.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Validation Errors | PayPal JS</title>
    </head>
    <body>
        <h1>Validation Errors</h1>

        <button id="btn-load-no-client-id" type="button">
            Missing client-id
        </button>
        <button id="btn-load-invalid-client-id" type="button">
            Invalid client-id
        </button>
        <p id="error-message"></p>

        <script type="module">
            import { loadScript } from "../../dist/esm/paypal-js.js";

            function setErrorMessage(text) {
                document.querySelector("#error-message").innerHTML = text;
            }

            document
                .querySelector("#btn-load-no-client-id")
                .addEventListener("click", () => {
                    // Error: Expected client-id to be passed
                    loadScript({}).catch((err) => setErrorMessage(err));
                });

            document
                .querySelector("#btn-load-invalid-client-id")
                .addEventListener("click", () => {
                    // Error: client-id not recognized for either production or sandbox: invalid-client-id-value
                    loadScript({
                        clientId: "invalid-client-id-value",
                    }).catch((err) => setErrorMessage(err));
                });
        </script>
    </body>
</html>