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 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.
- 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
- java
mWebView.setWebViewClient(new XsollaWebViewClient(this));
mWebView.setWebChromeClient(new XsollaWebChromeClient(this));
So konfigurieren Sie das Öffnen des Zahlungsportals in Android WebView:
- Konfigurieren Sie WebView entsprechend dem folgenden Beispiel:
Copy
- 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);
- Implementieren Sie die Klasse
XsollaWebViewClient, die von der KlasseWebViewClientabgeleitet ist und die MethodenshouldOverrideUrlLoadingundonPageFinishedgemäß dem folgenden Beispiel überschreibt:
Copy
- 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);
}
}
- Implementieren Sie die Klasse
XsollaWebChromeClient, die von der KlasseWebChromeClientabgeleitet ist und die darin enthaltenen MethodenonCreateWindowundonCloseWindowüberschreibt:
Copy
- 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;
}
}
- Implementieren Sie die Klasse
XsollaChildWebView, die von der KlasseWebViewabgeleitet ist.
Copy
- 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));
}
}
- Deklarieren Sie die Variable
mChildWebViewals Feld in der KlasseMainActivity:
Copy
- java
mChildWebView = findViewById(R.id.childWebView);
Die zweite WebView-Komponente (childWebView) dient dazu, neue Fenster im Zahlungsportal zu öffnen.
Beispiel für die Implementierung von
Copy
- 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>
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
- 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));
War dieser Artikel hilfreich?
Vielen Dank für Ihr Feedback!
Wir werden Ihr Feedback aufgreifen und dazu nutzen, Ihr Erlebnis verbessern.Haben Sie einen Tippfehler oder einen anderen Textfehler gefunden? Wählen Sie den Text aus und drücken Sie Strg+Eingabe.
