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

注:
要快速集成艾克索拉服务,可使用现成的SDK:
  • Xsolla Mobile SDK — 推荐使用它来扩大支付选择,同时保证符合平台要求。
  • Android专用企业级SDK — 此解决方案用于快速实现通过艾克索拉提供的所有方式接收付款:银行卡、信用卡、电子钱包、二维码以及Google Pay等原生方式。
要在移动应用中接收付款,可使用以下支付UI打开方式:
  • 在浏览器中 — 此方式下,用户从游戏跳转到外部浏览器进行支付。支付UI类似如下:
  • 在Custom Tabs中 — 此方式下,支付UI在游戏应用内打开,但用户可以看见浏览器栏。支付UI类似如下:

在浏览器中

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

在Android WebView中

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

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

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

  1. 按照此示例配置WebView:

Copy
Full screen
Small screen
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. 按照此示例实现从WebViewClient类继承的XsollaWebViewClient类并覆写shouldOverrideUrlLoadingonPageFinished方法:
Copy
Full screen
Small screen
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. 实现从WebChromeClient类继承的XsollaWebChromeClient类并覆写其中的onCreateWindowonCloseWindow方法。
Copy
Full screen
Small screen
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. 实现从WebView类继承的XsollaChildWebView类。
Copy
Full screen
Small screen
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. mChildWebView变量声明为MainActivity类中的字段:
Copy
Full screen
Small screen
mChildWebView = findViewById(R.id.childWebView);

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

实现activity的示例:

Copy
Full screen
Small screen
<?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>
注:
详细示例代码请参考GitHub存储库

在Custom Tabs中

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

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

Copy
Full screen
Small screen
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));
本文对您的有帮助吗?
谢谢!
我们还有其他可改进之处吗? 留言
非常抱歉
请说明为何本文没有帮助到您。 留言
感谢您的反馈!
我们会查看您的留言并运用它改进用户体验。
上次更新时间: 2024年7月26日

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

报告问题
我们非常重视内容质量。您的反馈将帮助我们做得更好。
请留下邮箱以便我们后续跟进
感谢您的反馈!