samples/payment.html

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>OKSDK - Payment processing</title>

    <script type="text/javascript" src="../oksdk.js"></script>
</head>
<body>

<div id="content" style="display: none;">
    <p>
        <input type="button" onclick="openPayment();" value="Open payment"/><br/>
    </p>
    <p>
        <input type="button" onclick="openPaymentInFrame();" value="Open payment in frame"/><br/>
    </p>
</div>

<script type="text/javascript">
    function openPayment() {
        // Here we initiate payment by opening a new window selling a product
        // named "Zombie leg" for 1 OK, with callback id for the item "zombie-leg-1"
        OKSDK.Payment.show("Zombie Leg", 1, "zombie-leg-1");
    }

    function openPaymentInFrame() {
        // Here we initiate payment by opening a new window selling a product
        // named "Zombie leg" for 1 OK, with callback id for the item "zombie-leg-1"
        OKSDK.Payment.showInFrame("Zombie Leg", 1, "zombie-leg-1", null, "paymentFrame");
    }

    // Start our processing when the page is loaded
    document.addEventListener('DOMContentLoaded', function () {
        var config = {
            app_id: 0,      // <-- insert APP ID here
            app_key: ''     // <-- insert APP PUBLIC KEY here
        };

        OKSDK.init(config, function () {
            // Authorization / initialization finished correctly
            // We can start proceeding with OAUTH stuff

            document.getElementById('content').style.display = '';

        }, function (error) {
            alert('OKSDK error' + OKSDK.Util.toString(error));
        });

        let args = OKSDK.Util.getRequestParameters(window.location.search);
        if (args['custom_args'] && (args['custom_args'].search("payment") == 0)) {
            // When payment is finished the application is being re-launched with
            // custom_args containing "payment=ok" or "payment=cancel".
            //
            // We detected that the launch is a payment callback, and since we opened a new window
            // for payment processing, we should send the message to our original game window
            // and close the current window.
            //
            let paymentResult = decodeURIComponent(args['custom_args']).split('=');

            if (window.parent) {
                    window.parent.postMessage(JSON.stringify({
                        type: 'payment',
                        result: paymentResult,
                        fromAndroid: OKSDK.Util.isLaunchedFromOKApp()
                    }), "*");
            }

            if (window.opener) {
                    // Post a message {type:"payment",result:"..."}
                    window.opener.postMessage(JSON.stringify({
                        type: 'payment',
                        result: paymentResult,
                        fromAndroid: OKSDK.Util.isLaunchedFromOKApp()
                    }), "*");
                    window.close();
                    return;
            }
        }
    });

    function processLegacyPayment(event) {
        return JSON.parse(event.data || "");
    }

    function processNewPayment(event) {
       switch (event.data) {
            case "payment=ok":
                return {"type": "payment", "result": "ok"};
            case "payment=cancel":
                return {"type": "payment", "result": "cancel"};
            default:
                return {};
        }
    }

    // Since we are using separate window when opening a payment, we should send/receive messages
    // to communicate with the opened window
    window.addEventListener('message', function (event) {
        OKSDK.Payment.closePaymentFrame("paymentFrame");

        var result;
        try {
            result = processLegacyPayment(event);
        } catch (e) {
            result = processNewPayment(event);
        }

        if (result.type == 'payment') {
            let paymentResult = result.result;
            let fromAndroid = result.fromAndroid || OKSDK.Util.isLaunchedFromOKApp();
            alert('Payment returned result: ' + JSON.stringify(paymentResult) + '\n' + 'From android: ' + fromAndroid);
        }
    }, false);
</script>

</body>
</html>