How to open payment UI in mobile application
- 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.
- 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.
- java
mWebView.setWebViewClient(new XsollaWebViewClient(this));
mWebView.setWebChromeClient(new XsollaWebChromeClient(this));
To configure opening the payment UI in Android WebView:
- Configure WebView according to this example:
- 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);
- Implement the
XsollaWebViewClient
class, that is inherited from theWebViewClient
class, and overrides theshouldOverrideUrlLoading
andonPageFinished
methods according to this example:
- 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);
}
}
- Implement the
XsollaWebChromeClient
class, that is inherited from theWebChromeClient
class, and overrides theonCreateWindow
andonCloseWindow
methods within it.
- 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;
}
}
- Implement the
XsollaChildWebView
class inherited from theWebView
class.
- 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));
}
}
- Declare the
mChildWebView
variable as a field in theMainActivity
class:
- java
mChildWebView = findViewById(R.id.childWebView);
The second WebView (childWebView
) is used for opening new windows in the payment UI:
Example of implementing the
- 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>
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:
- 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?
Rate this page
Don’t want to answer
Thank you for your feedback!
Found a typo or other text error? Select the text and press Ctrl+Enter.