Cómo abrir la interfaz de pago para recibir pagos realizados con Google Pay

Para recibir pagos hechos con Google Pay, puede usar las siguientes opciones de apertura de la interfaz de pago:

  • En un navegador - en este caso, al usuario se le redirige a un navegador externo desde el juego para realizar un pago. La interfaz de pago tendrá este aspecto:

  • En Android WebView - En este caso, la interfaz de pago se abre sin problemas dentro de la aplicación de juego, de esta manera:
  • En Pestañas personalizadas - En este caso, la interfaz de pago se abre dentro de la aplicación del juego, pero el usuario ve la barra de un navegador. La interfaz de pago tendrá este aspecto:

En navegador

Para abrir la interfaz de pago en un navegador y recibir pagos mediante Google Pay, no tiene que implementar código adicional. Para configurarla, siga las instrucciones para abrir la interfaz de pago.

En Android WebView

Android WebView es un componente del sistema preinstalado de Google gracias al cual las aplicaciones Android pueden mostrar contenido web. Para que la interfaz de pago y Google Pay funcionen correctamente en Android WebView, hay que configurar WebView y establecer las clases setWebViewClient y setWebChromeClient.

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

Para configurar la apertura de la interfaz de pago en Android WebView,

  1. configure WebView conforme a este ejemplo:

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. Implemente la clase XsollaWebViewClient extends WebViewClient y los métodos shouldOverrideUrlLoading y onPageFinished en esta clase conforme a este ejemplo:
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. Implemente la clase XsollaWebChromeClient extends WebChromeClient y los métodos onCreateWindow y onCloseWindow que contenga esta clase.
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;
        mainActivity.mChildWebView.setVisibility(View.VISIBLE);


        WebView.WebViewTransport transport = (WebView.WebViewTransport) resultMsg.obj;
        transport.setWebView(mainActivity.mChildWebView);
        resultMsg.sendToTarget();
        return true;
    }


    @Override
    public void onCloseWindow(WebView window) {
        if (window != null && window instanceof XsollaChildWebView) {
            window.setVisibility(View.GONE);
        }
    }
}
  1. Implemente la clase XsollaChildWebView extends 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. Implemente el campo XsollaChildWebView mChildWebView en la clase MainActivity:
Copy
Full screen
Small screen
mChildWebView = findViewById(R.id.childWebView);

El segundo WebView (childWebView) se usa para abrir nuevas ventanas en la interfaz de pago:

Ejemplo de implementación de la 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/activity_main_webview"
        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>
Nota
Consulte el repositorio de GitHub para ver muestras de código detalladas.

En Custom Tabs (Pestañas personalizadas)

Pestañas personalizadas son una función de los navegadores Android que permite a los desarrolladores agregar una experiencia de navegación personalizada directamente a la interfaz de la aplicación. La diferencia entre WebView y Custom Tabs (Pestañas personalizadas) es que las acciones del usuario en WebView están aisladas del resto de sus acciones en Internet, mientras que el uso de Pestañas personalizadas permite sincronizar las acciones del usuario con sus otras actividades en Chrome en su dispositivo Android.

Muestra de código para abrir la interfaz de pago en Pestañas personalizadas:

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));
¿Te ha resultado útil este artículo?
¡Gracias!
¿Hay algo en lo que podamos mejorar? Mensaje
Lo sentimos
Por favor, cuéntanos por qué no te ha resultado útil este artículo. Mensaje
¡Gracias por tu mensaje!
Nos ayudará a mejorar tu experiencia.
Valore esta página
Valore esta página
¿Hay algo en lo que podamos mejorar?

Prefiero no responder

¡Gracias por tu mensaje!
Última actualización: 26 de Marzo de 2024

¿Has encontrado una errata u otro error de texto? Selecciona el texto y pulsa Ctrl+Intro.

Informar de un problema
Nos esforzamos por ofrecer contenido de calidad. Tus comentarios nos ayudan a mejorar.
Déjanos tu correo electrónico para que te podamos responder
¡Gracias por tu mensaje!