Wie öffnen Sie das Zahlungsportal in einer mobilen Anwendung?

Hinweis
Um Xsolla-Dienste schnell zu integrieren, können Sie fertige SDKs verwenden:
  • Xsolla Mobile SDK — die empfohlene Option, um die Zahlungsmöglichkeiten zu erweitern und die Anforderungen der Plattform zu erfüllen.
  • SDKs auf Unternehmensebene für Android — eine Lösung zur schnellen Implementierung der Zahlungsakzeptanz mit allen von Xsolla angebotenen Methoden: Bank- und Kreditkarten, E-Wallets, QR-Codes und native Methoden, z.B. Google Pay.
Wenn Sie Zahlungen per mobiler Anwendung entgegennehmen möchten, müssen Sie das Zahlungsportal auf eine der folgenden Arten öffnen:
  • in einem Browser – in diesem Fall wird der Nutzer vom Spiel aus zu einem externen Browser weitergeleitet, um zu bezahlen. Das Zahlungsportal sieht dabei in etwa wie folgt aus:
  • in Android WebView – in diesem Fall wird das Zahlungsportal nahtlos innerhalb der Spielanwendung geöffnet. Das sieht in etwa so aus:
  • in Custom Tabs – in diesem Fall wird das Zahlungsportal innerhalb der Spielanwendung geöffnet, dem Nutzer wird jedoch eine Browserleiste angezeigt. Das Zahlungsportal sieht dabei in etwa wie folgt aus:

Im Browser

Um das Zahlungsportal in einem Browser zu öffnen und Zahlungen über alle von Xsolla angebotenen Methoden zu empfangen, folgen Sie der Anleitung zum Öffnen des Zahlungsportals.

In Android WebView

Android WebView ist eine vorinstallierte Systemkomponente von Google, die es Android-Anwendungen ermöglicht, Webinhalte darzustellen. Damit das Zahlungsportal in Android WebView korrekt funktioniert, müssen Sie WebView konfigurieren und die Methoden setWebViewClient und setWebChromeClient einrichten.

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

So konfigurieren Sie das Öffnen des Zahlungsportals in Android WebView:

  1. Konfigurieren Sie WebView entsprechend dem folgenden Beispiel:

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. Implementieren Sie die Klasse XsollaWebViewClient, die von der Klasse WebViewClient abgeleitet ist und die Methoden shouldOverrideUrlLoading und onPageFinished gemäß dem folgenden Beispiel überschreibt:
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. Implementieren Sie die Klasse XsollaWebChromeClient, die von der Klasse WebChromeClient abgeleitet ist und die darin enthaltenen Methoden onCreateWindow und onCloseWindow überschreibt:
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. Implementieren Sie die Klasse XsollaChildWebView, die von der Klasse WebView abgeleitet ist.
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. Deklarieren Sie die Variable mChildWebView als Feld in der Klasse MainActivity:
Copy
Full screen
Small screen
mChildWebView = findViewById(R.id.childWebView);

Die zweite WebView-Komponente (childWebView) dient dazu, neue Fenster im Zahlungsportal zu öffnen.

Beispiel für die Implementierung von 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>
Hinweis
Detaillierte Codebeispiele finden Sie im GitHub-Repository.

In Benutzerdefinierte Reiter

Benutzerdefinierte Reiter ist eine Funktion in Android-Browsern, die es Entwicklern ermöglicht, die Anwendung um ein individuelles Browser-Erlebnis zu ergänzen. Der Unterschied zwischen WebView und Benutzerdefinierte Reiter besteht darin, dass Nutzeraktionen in WebView von anderen im Internet vorgenommen Aktionen des Nutzers isoliert sind, während die Verwendung von benutzerdefinierten Reitern die Synchronisierung von Nutzeraktionen mit ihren anderen Aktivitäten in Chrome auf ihrem Android-Gerät ermöglicht.

Codebeispiel für den Aufruf des Zahlungsportals in Custom Tabs:

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));
War dieser Artikel hilfreich?
Vielen Dank!
Gibt es etwas, das wir verbessern können? Nachricht
Das tut uns leid
Bitte erläutern Sie, weshalb dieser Artikel nicht hilfreich ist. Nachricht
Vielen Dank für Ihr Feedback!
Wir werden Ihr Feedback aufgreifen und dazu nutzen, Ihr Erlebnis verbessern.
Diese Seite bewerten
Diese Seite bewerten
Gibt es etwas, das wir verbessern können?

Jetzt nicht

Vielen Dank für Ihr Feedback!
Letztmalig aktualisiert: 26. Juli 2024

Haben Sie einen Tippfehler oder einen anderen Textfehler gefunden? Wählen Sie den Text aus und drücken Sie Strg+Eingabe.

Problem melden
Wir überprüfen unsere Inhalte ständig. Ihr Feedback hilft uns, sie zu verbessern.
Geben Sie eine E-Mail-Adresse an, damit wir Sie erreichen können
Vielen Dank für Ihr Feedback!