Comment ouvrir l’interface de paiement dans l’application mobile

Note
Pour une intégration rapide des services Xsolla, utilisez des SDK prêts à l’emploi :
  • 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.
Pour recevoir des paiements dans l’application mobile, utilisez les options suivantes pour ouvrir l’interface de paiement :
  • 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.

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

Pour configurer l’ouverture de l’interface de paiement dans Android WebView :

  1. Configurez WebView comme indiqué dans cet exemple :

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. Implémentez la classe XsollaWebViewClient héritée de la classe WebViewClient, et remplacez les méthodes shouldOverrideUrlLoading et onPageFinished comme indiqué dans cet exemple :
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. Implémentez la classe XsollaWebChromeClient héritée de la classe WebChromeClient, et remplacez les méthodes onCreateWindow et onCloseWindow dans celle-ci.
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. Implémentez la classe XsollaChildWebView héritée de la classe WebView.
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. Déclarez la variable mChildWebView en tant que champ dans la classe MainActivity :
Copy
Full screen
Small screen
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 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>
Note
Référez-vous au dépôt GitHub pour des exemples de code détaillés.

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 :

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));
Cet article vous a été utile ?
Merci !
Que pouvons-nous améliorer ? Message
Nous sommes désolés de l'apprendre
Dites-nous pourquoi vous n'avez pas trouvé cet article utile. Message
Merci pour votre commentaire !
Nous examinerons votre message et l'utiliserons pour améliorer votre expérience.
Dernière mise à jour: 26 Juillet 2024

Faute de frappe ou autre erreur dans le texte ? Sélectionnez le texte concerné et appuyez sur Ctrl+Entée.

Signaler un problème
Nous améliorons continuellement notre contenu grâce à vos commentaires.
Indiquez votre adresse e-mail pour un suivi
Merci pour votre commentaire !