<!DOCTYPE html>
<html>
    <head>
        <title>Install TommyPay</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>
    <body>
        <h2>Install TommyPay</h2>
        <p><i>A very primitive payment app that shows the entire payment request passed
            to it as JSON.</i></p>

        <pre id="paymentView"></pre>

        <button id="install" onclick="install()">Install Payment App</button>

        <script>
            var paymentView = document.getElementById("paymentView");

            function install() {
                console.log("install()");
                navigator.serviceWorker.register("./app.js")
                .then(function(registration) {
                    console.log("registering");
                    paymentView.textContent += "Registering TommyPay\n";
                    return registration.paymentAppManager.setManifest({
                        label: "TommyPay",
                        options: [
                        {
                            label: "Create new TommyPay account",
                            id: "new",
                            enabledMethods: [ "basic-card" ]
                        }]
                    });
                }).then(function() {
                    console.log("registered");
                    paymentView.textContent += "TommyPay successfully registered\n";
                }).catch(function(error) {
                    paymentView.textContent += error + "\n";
                });
            }
        </script>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <title>Install TommyPay</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>
    <body>
        <h2>Install TommyPay</h2>
        <p><i>A very primitive payment app that shows the entire payment request passed
            to it as JSON.</i></p>

        <pre id="paymentView"></pre>

        <button id="install" onclick="install()">Install Payment App</button>

        <script>
            var paymentView = document.getElementById("paymentView");

            function install() {
                console.log("install()");
                navigator.serviceWorker.register("./app.js")
                .then(function(registration) {
                    console.log("registering");
                    paymentView.textContent += "Registering TommyPay\n";
                    return registration.paymentAppManager.setManifest({
                        name: "TommyPay",
                        label: "TommyPay",
                        options: [
                        {
                            name: "Create new TommyPay account",
                            label: "Create new TommyPay account",
                            id: "new",
                            enabledMethods: [ "basic-card" ]
                        }]
                    });
                }).then(function() {
                    console.log("registered");
                    paymentView.textContent += "TommyPay successfully registered\n";
                }).catch(function(error) {
                    paymentView.textContent += error + "\n";
                });
            }
        </script>
    </body>
</html>


Support both new and old field names
Support both new and old field names
