Cómo abrir la interfaz de pago en una app para dispositivos móviles
Nota
Para integrar de forma rápida los servicios de Xsolla, puede utilizar SDK ya preparados:
- Xsolla Mobile SDK: la opción recomendada para ampliar las opciones de pago y cumplir los requisitos de la plataforma.
- Kits SDK para Android: una solución para implementar rápidamente la aceptación de pagos mediante todos los métodos que ofrece Xsolla: tarjetas bancarias y de crédito, monederos electrónicos, códigos QR y métodos nativos, por ejemplo, Google Pay.
- 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 cualquier método que ofrezca Xsolla, 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 funcione correctamente en Android WebView, tiene que configurar WebView y establecer los métodos setWebViewClient y setWebChromeClient.
Copy
- java
mWebView.setWebViewClient(new XsollaWebViewClient(this));
mWebView.setWebChromeClient(new XsollaWebChromeClient(this));
Para configurar la apertura de la interfaz de pago en Android WebView,
- configure WebView conforme a este ejemplo:
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);
- Implemente la clase
XsollaWebViewClientque se hereda de la claseWebViewClient, y anula los métodosshouldOverrideUrlLoadingyonPageFinisheden esta clase conforme a este ejemplo:
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);
}
}
- Implemente la clase
XsollaWebChromeClient, que se hereda de la claseWebChromeClient, y anula los métodosonCreateWindowyonCloseWindowque contenga esta clase.
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;
}
}
- Implemente la clase
XsollaChildWebViewheredada de la claseWebView.
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));
}
}
- Declare la variable
mChildWebViewen como un campo de la claseMainActivity:
Copy
- java
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
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>
Nota
Consulte el repositorio de GitHub para ver muestras de código detalladas.
En Custom Tabs (Pestañas personalizadas)
Custom Tabs (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 es que las acciones del usuario en WebView están aisladas del resto de sus acciones en Internet, mientras que el uso de Custom Tabs permite sincronizar las acciones del usuario con sus otras actividades en Chrome de su dispositivo Android.
Muestra de código para abrir la interfaz de pago en Pestañas personalizadas:
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));
¿Te ha resultado útil este artículo?
¡Gracias por tu mensaje!
Nos ayudará a mejorar tu experiencia.¿Has encontrado una errata u otro error de texto? Selecciona el texto y pulsa Ctrl+Intro.
