Comment ouvrir l’interface de paiement dans l’application mobile
- SDK Xsolla Mobile — l’option recommandée pour étendre les options de paiement et rester conforme aux exigences de plateforme.
- SDK pour Android — une solution pour l’implémentation rapide de l’acceptation des paiements via tous les modes offerts par Xsolla : cartes de débit et de crédit, portefeuilles électroniques, codes QR et modes natifs, par exemple, Google Pay.
- Dans un navigateur — dans ce cas, l’utilisateur est redirigé vers un navigateur externe depuis le jeu pour effectuer un paiement. L’interface de paiement ressemblera à ceci :
- Dans Android WebView — dans ce cas, l'interface de paiement s'ouvre de manière fluide au sein de l'application de jeu, comme ceci :
- Dans des onglets personnalisés — dans ce cas, l'interface de paiement s'ouvre à l'intérieur de l'application de jeu, mais l'utilisateur voit la barre d'adresse d'un navigateur. L'interface de paiement ressemblera à ceci :
Dans le navigateur
Pour ouvrir l’interface de paiement dans un navigateur et recevoir des paiements via tous les modes offerts par Xsolla, suivez les instructions d’ouverture de l’interface de paiement.
Dans Android WebView
Android WebView est un composant système préinstallé de Google qui permet aux applications Android d’afficher du contenu Web. Afin d’assurer le bon fonctionnement de l’interface de paiement dans Android WebView, vous devez configurer WebView et implémenter les méthodes setWebViewClient
et setWebChromeClient
.
- java
mWebView.setWebViewClient(new XsollaWebViewClient(this));
mWebView.setWebChromeClient(new XsollaWebChromeClient(this));
Pour configurer l’ouverture de l’interface de paiement dans Android WebView :
- Configurez WebView comme indiqué dans cet exemple :
- 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);
- Implémentez la classe
XsollaWebViewClient
héritée de la classeWebViewClient
, et remplacez les méthodesshouldOverrideUrlLoading
etonPageFinished
comme indiqué dans cet exemple :
- 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);
}
}
- Implémentez la classe
XsollaWebChromeClient
héritée de la classeWebChromeClient
, et remplacez les méthodesonCreateWindow
etonCloseWindow
dans celle-ci.
- 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;
}
}
- Implémentez la classe
XsollaChildWebView
héritée de la classeWebView
.
- 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));
}
}
- Déclarez la variable
mChildWebView
en tant que champ dans la classeMainActivity
:
- java
mChildWebView = findViewById(R.id.childWebView);
La deuxième WebView (childWebView
) sert à ouvrir de nouvelles fenêtres dans l’interface de paiement :
Exemple d’implémentation de
- 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>
Dans des onglets personnalisés
Les onglets personnalisés sont une fonctionnalité des navigateurs Android qui permet aux développeurs d’intégrer une expérience de navigation personnalisée directement dans l’application. Contrairement à WebView, où les actions de l’utilisateur sont isolées des autres interactions sur Internet, l’utilisation des onglets personnalisés synchronise les actions de l’utilisateur avec ses autres activités dans Chrome sur son appareil Android.
Exemple de code pour ouvrir l’interface de paiement dans des onglets personnalisés :
- 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));
Faute de frappe ou autre erreur dans le texte ? Sélectionnez le texte concerné et appuyez sur Ctrl+Entée.