如何在移动应用中打开支付UI

注:
要快速集成各项艾克索拉服务,可使用艾克索拉Mobile SDK。它是扩展支付选项及确保符合平台要求的推荐集成方式。
要在移动应用中接收付款,可使用以下支付UI打开方式:
  • 在浏览器中 — 此方式下,用户从游戏跳转到外部浏览器进行支付。支付UI类似如下:
  • 在Custom Tabs中 — 此方式下,支付UI在游戏应用内打开,但用户可以看见浏览器栏。支付UI类似如下:

在浏览器中

要在浏览器中打开支付UI并通过艾克索拉提供的任何方式接收付款,请按照打开支付UI的说明进行操作。

在Android WebView中

Android WebView是Google的预装系统组件,可以让Android应用显示网页内容。要使支付UI在Android WebView中正常工作,需配置WebView并设置setWebViewClientsetWebChromeClient方法。

Copy
Full screen
Small screen
1mWebView.setWebViewClient(new XsollaWebViewClient(this));
2mWebView.setWebChromeClient(new XsollaWebChromeClient(this));

要配置在Android WebView中打开支付UI:

  1. 按照此示例配置WebView:

Copy
Full screen
Small screen
1WebSettings webSettings = mWebView.getSettings();
2webSettings.setBuiltInZoomControls(false);
3webSettings.setUseWideViewPort(true);
4webSettings.setDomStorageEnabled(true);
5webSettings.setLoadWithOverviewMode(true);
6webSettings.setJavaScriptEnabled(true);
7webSettings.setSupportMultipleWindows(true);
8webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
  1. 按照此示例实现从WebViewClient类继承的XsollaWebViewClient类并覆写shouldOverrideUrlLoadingonPageFinished方法:
Copy
Full screen
Small screen
 1class XsollaWebViewClient extends WebViewClient {
 2    private final Context context;
 3
 4
 5    public XsollaWebViewClient(Context context) {
 6        this.context = context;
 7    }
 8
 9
10    @Override
11    public boolean shouldOverrideUrlLoading(WebView view, String url) {
12        if(url.matches(".+://.*")) {
13            try {
14                Intent intent = Intent.parseUri(url, Intent.URI_INTENT_SCHEME);
15                intent.addCategory("android.intent.category.BROWSABLE");
16                intent.setComponent(null);
17                context.startActivity(intent);
18            } catch(URISyntaxException e) {
19                Log.e("WebView", "Invalid URL format" + url, e);
20            } catch (ActivityNotFoundException e) {
21                Log.e("WebView", "No activity found to handle URL: " + url, e);
22            }
23            return true;
24        }
25
26
27        return false;
28    }
29
30
31    @Override
32    public void onPageFinished(WebView view, String url) {
33        super.onPageFinished(view, url);
34    }
35}
  1. 实现从WebChromeClient类继承的XsollaWebChromeClient类并覆写其中的onCreateWindowonCloseWindow方法。
Copy
Full screen
Small screen
 1public class XsollaWebChromeClient extends WebChromeClient {
 2    private final Context mContext;
 3
 4    public XsollaWebChromeClient(Context context) {
 5        mContext = context;
 6    }
 7
 8    @Override
 9    public boolean onCreateWindow(WebView view, boolean isDialog, boolean isUserGesture, android.os.Message resultMsg) {
10        MainActivity mainActivity = (MainActivity) mContext;
11
12        WebView.WebViewTransport transport = (WebView.WebViewTransport) resultMsg.obj;
13        transport.setWebView(mainActivity.mChildWebView);
14        resultMsg.sendToTarget();
15        return true;
16    }
17}
  1. 实现从WebView类继承的XsollaChildWebView类。
Copy
Full screen
Small screen
 1public class XsollaChildWebView extends WebView {
 2
 3
 4    @SuppressLint("SetJavaScriptEnabled")
 5    public XsollaChildWebView(Context context, AttributeSet attrs) {
 6        super(context, attrs);
 7
 8
 9        WebSettings webSettings = getSettings();
10        webSettings.setJavaScriptEnabled(true);
11        webSettings.setDomStorageEnabled(true);
12
13
14        setWebViewClient(new XsollaWebViewClient(context));
15        setWebChromeClient(new XsollaWebChromeClient(context));
16    }
17}
  1. mChildWebView变量声明为MainActivity类中的字段:
Copy
Full screen
Small screen
1mChildWebView = findViewById(R.id.childWebView);

第二个 WebView (childWebView)用于在支付UI中打开新窗口:

实现activity的示例:

Copy
Full screen
Small screen
 1<?xml version="1.0" encoding="utf-8"?>
 2<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3    xmlns:app="http://schemas.android.com/apk/res-auto"
 4    xmlns:tools="http://schemas.android.com/tools"
 5    android:layout_width="match_parent"
 6    android:layout_height="match_parent"
 7    tools:context=".MainActivity">
 8
 9    <WebView
10        android:id="@+id/mainWebView"
11        android:layout_width="match_parent"
12        android:layout_height="match_parent"
13        app:layout_constraintBottom_toBottomOf="parent"
14        app:layout_constraintEnd_toEndOf="parent"
15        app:layout_constraintStart_toStartOf="parent"
16        app:layout_constraintTop_toTopOf="parent" />
17
18    <com.example.app.XsollaChildWebView
19        android:id="@+id/childWebView"
20        android:layout_width="match_parent"
21        android:layout_height="match_parent"
22        android:visibility="gone"
23        app:layout_constraintBottom_toBottomOf="parent"
24        app:layout_constraintEnd_toEndOf="parent"
25        app:layout_constraintStart_toStartOf="parent"
26        app:layout_constraintTop_toTopOf="parent" />
27
28</androidx.constraintlayout.widget.ConstraintLayout>
注:
详细示例代码请参考GitHub存储库

在Custom Tabs中

Custom Tabs是Android浏览器中的功能,让开发者可以添加直接在应用中的定制浏览器体验。WebView和Custom Tabs的区别是WebView中的用户操作与用户的其他网络操作隔离,而使用Custom Tabs可以让用户操作与他们在Android设备Chrome中的其他操作同步。

在Custom Tabs中打开支付UI的代码示例:

Copy
Full screen
Small screen
1String url = "https://secure.xsolla.com/paystation4?token=${token}";
2CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder();
3CustomTabsIntent customTabsIntent = builder.build();
4customTabsIntent.launchUrl(this, Uri.parse(url));
本文对您的有帮助吗?
谢谢!
我们还有其他可改进之处吗? 留言
非常抱歉
请说明为何本文没有帮助到您。 留言
感谢您的反馈!
我们会查看您的留言并运用它改进用户体验。
上次更新时间: 2025年3月26日

发现了错别字或其他内容错误? 请选择文本,然后按Ctrl+Enter。

报告问题
我们非常重视内容质量。您的反馈将帮助我们做得更好。
请留下邮箱以便我们后续跟进
感谢您的反馈!
无法发送您的反馈
请稍后重试或发送邮件至[email protected]与我们联系。
OSZAR »