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.

  1. 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.

  1. 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.
  2. 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.
  3. A user closes a WebView application in the launcher and returns to the game.
Note
The button for returning to the game is displayed only in a WebView application in a launcher. The external browser displays only a notification about the successful purchase. To configure redirect settings, refer to the instruction.

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
Copy
Full screen
Small screen
    {
        "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.

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

    1. 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.

    1. 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.
    Note
    To process saved payment methods and initiate charges, use tokenization.
    Example of the request for obtaining a token
    Copy
    Full screen
    Small screen
      {
          "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
              }
          }
      }
      
      Was this article helpful?
      Thank you!
      Is there anything we can improve? Message
      We’re sorry to hear that
      Please explain why this article wasn’t helpful to you. Message
      Thank you for your feedback!
      We’ll review your message and use it to help us improve your experience.
      Last updated: March 26, 2024

      Found a typo or other text error? Select the text and press Ctrl+Enter.

      Report a problem
      We always review our content. Your feedback helps us improve it.
      Provide an email so we can follow up
      Thank you for your feedback!