How to open external browser from game launcher

How it works

The WebView application allows you to open the payment UI inside a game launcher, but it has limitations, for example, it can’t access saved passwords or open several tabs. This means users can’t make a purchase using payment methods that require additional user verification with redirection to a new browser tab, e.g., 3-D Secure or PayPal authentication.

To bypass this limitation, you can configure the opening of the payment UI in a new tab of an external browser that a user sets as their default browser (onwards – the external browser) to allow users to make a purchase, save payment methods, and return to a game.

Make purchase

User flow

1. A user opens a WebView application to make a purchase, and clicks Buy.
2. The payment UI opens in a WebView application, and a user chooses a payment method.

3. A user is automatically redirected to a new tab of an external browser to make a purchase.

The WebView application displays the description of steps to be completed in an opened tab of the external browser.

4. A user enters their data and confirms the purchase in an external browser tab. If the purchase is successful, there is a notification about the successful purchase.
5. A user returns to the WebView application where there is also a notification about the successful purchase and a button to return to the game.
6. A user closes a WebView application in the launcher and returns to the game.

Setting up

To set up a redirection from a launcher to a default browser to make a purchase, pass the settings.ui.is_independent_windows: true parameter in the token.

Example of the request for obtaining a token

{
    "user": {
        "id": {
            "value": "158804750"
        },
        "email": {
            "value": "email@example.com"
        },
        "country": {
            "value": "US"
        }
    },
    "settings": {
        "mode": "sandbox",
        "project_id": 53737,
        "language": "en",
        "currency": "USD",
        "ui": {
            "is_independent_windows": true,
            "user_account": {
                "payment_accounts": {
                    "order": 1,
                    "enable": false
                },
                "history": {
                    "order": 2,
                    "enable": true
                }
            }
        }
    },
    "purchase": {
        "description": {
            "value": "Test purchase",
            "items": [
                {
                    "name": "Test purchase",
                    "quantity": 1,
                    "price": {
                        "amount": "19.99"
                    },
                    "image_url": "\/\/images.ctfassets.net\/wn7ipiv9ue5v\/2E36gdKHDOIRmxX6H1y2h2\/6941cea2e876c0466e79a16eccab0351\/greatWhiteCard.jpg"
                }
            ]
        },
        "checkout": {
            "currency": "USD",
            "amount": 19.99
        }
    }
}

Save payment account

User flow

1. On your application’s side, a user goes to a page to manage their saved payment accounts.

2. User clicks Add new method.
3. In the window that opens, a user chooses a payment account.

4. A user is automatically redirected to a new tab of an external browser to verify their account.

Your application displays the description of steps to be completed in an opened tab of the external browser.

5. A user enters and confirms their data in an external browser tab. If successful, there is a notification that a user can return to the application.

The method will be automatically added to the user’s list of saved payment accounts in your application.

Setting up

To set up a redirection to an external browser to save a payment account, pass the following parameters in the token: settings.ui.mode: user and settings.ui.is_independent_windows: true.

Example of the request for obtaining a token

{
    "user": {
        "id": {
            "value": "test",
            "hidden": true
        },
        "email": {
            "value": "email@example.com"
        },
        "country": {
            "value": "US",
            "allow_modify": true
        }
    },
    "settings": {
        "project_id": 136187,
        "language": "en",
        "currency": "USD",
        "ui": {
        "mode": "user_account",
            "is_independent_windows": true
        }
    }
}

Rate this page

Is there anything we can improve? Send

Don’t want to answer

Thank you for your feedback!