How to open payment UI in mobile application

Note
To quickly integrate Xsolla services, you can use ready-made SDKs:
  • Xsolla Mobile SDK — the recommended option to expand payment options and stay compliant with platform requirements.
  • Enterprise-level SDKs for Android — a solution for quick implementation of payment acceptance using all methods offered by Xsolla: bank and credit cards, e-wallets, QR codes, and native methods, e.g., Google Pay.
To receive payments in a mobile application, you can use the following options for opening the payment UI:
  • In a browser — in this case, a user is redirected to an external browser from the game to make a payment. The payment UI will look like this:
  • In Android WebView — in this case, the payment UI opens seamlessly within the game application, like this:
  • In Custom Tabs — in this case, the payment UI opens inside the game application, but a user sees a browser’s bar. The payment UI will look like this:

In browser

To open the payment UI in a browser and receive payments via any methods offered by Xsolla, follow the instruction for opening the payment UI.

In Android WebView

Android WebView is a pre-installed system component from Google that allows Android applications to display web content. For the payment UI to work correctly in Android WebView, you need to configure WebView and set up the setWebViewClient and setWebChromeClient methods.

Copy
Full screen
Small screen
  • java
mWebView.setWebViewClient(new XsollaWebViewClient(this));
mWebView.setWebChromeClient(new XsollaWebChromeClient(this));

To configure opening the payment UI in Android WebView:

  1. Configure WebView according to this example:

Copy
Full screen
Small screen
  • java
WebSettings webSettings = mWebView.getSettings();
webSettings.setBuiltInZoomControls(false);
webSettings.setUseWideViewPort(true);
webSettings.setDomStorageEnabled(true);
webSettings.setLoadWithOverviewMode(true);
webSettings.setJavaScriptEnabled(true);
webSettings.setSupportMultipleWindows(true);
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
  1. Implement the XsollaWebViewClient class, that is inherited from the WebViewClient class, and overrides the shouldOverrideUrlLoading and onPageFinished methods according to this example:
Copy
Full screen
Small screen
  • java
class XsollaWebViewClient extends WebViewClient {
    private final Context context;


    public XsollaWebViewClient(Context context) {
        this.context = context;
    }


    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        if(url.matches(".+://.*")) {
            try {
                Intent intent = Intent.parseUri(url, Intent.URI_INTENT_SCHEME);
                intent.addCategory("android.intent.category.BROWSABLE");
                intent.setComponent(null);
                context.startActivity(intent);
            } catch(URISyntaxException e) {
                Log.e("WebView", "Invalid URL format" + url, e);
            } catch (ActivityNotFoundException e) {
                Log.e("WebView", "No activity found to handle URL: " + url, e);
            }
            return true;
        }


        return false;
    }


    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
    }
}
  1. Implement the XsollaWebChromeClient class, that is inherited from the WebChromeClient class, and overrides the onCreateWindow and onCloseWindow methods within it.
Copy
Full screen
Small screen
  • java
public class XsollaWebChromeClient extends WebChromeClient {
    private final Context mContext;

    public XsollaWebChromeClient(Context context) {
        mContext = context;
    }

    @Override
    public boolean onCreateWindow(WebView view, boolean isDialog, boolean isUserGesture, android.os.Message resultMsg) {
        MainActivity mainActivity = (MainActivity) mContext;

        WebView.WebViewTransport transport = (WebView.WebViewTransport) resultMsg.obj;
        transport.setWebView(mainActivity.mChildWebView);
        resultMsg.sendToTarget();
        return true;
    }
}
  1. Implement the XsollaChildWebView class inherited from the WebView class.
Copy
Full screen
Small screen
  • java
public class XsollaChildWebView extends WebView {


    @SuppressLint("SetJavaScriptEnabled")
    public XsollaChildWebView(Context context, AttributeSet attrs) {
        super(context, attrs);


        WebSettings webSettings = getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setDomStorageEnabled(true);


        setWebViewClient(new XsollaWebViewClient(context));
        setWebChromeClient(new XsollaWebChromeClient(context));
    }
}
  1. Declare the mChildWebView variable as a field in the MainActivity class:
Copy
Full screen
Small screen
  • java
mChildWebView = findViewById(R.id.childWebView);

The second WebView (childWebView) is used for opening new windows in the payment UI:

Example of implementing the activity:

Copy
Full screen
Small screen
  • xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/mainWebView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.example.app.XsollaChildWebView
        android:id="@+id/childWebView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
Note
Refer to the GitHub repository for detailed code samples.

In Custom Tabs

Custom Tabs is a feature in Android browsers that allow developers to add a customized browser experience directly within the application. The difference between WebView and Custom Tabs is that user actions in WebView are isolated from their other Internet actions, whereas using Custom Tabs allows synchronization of user actions with their other activity in Chrome on their Android device.

Code sample for opening the payment UI in Custom Tabs:

Copy
Full screen
Small screen
  • java
String url = "https://secure.xsolla.com/paystation4?token=${token}";
CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder();
CustomTabsIntent customTabsIntent = builder.build();
customTabsIntent.launchUrl(this, Uri.parse(url));
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.
Rate this page
Rate this page
Is there anything we can improve?

Don’t want to answer

Thank you for your feedback!
Last updated: July 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!