Cómo abrir la interfaz de pago en una app para dispositivos móviles
Nota
Para integrar rápidamente los servicios de Xsolla, puede usar kits SDK prediseñados:
- Xsolla Mobile SDK (SDK móvil de Xsolla) - la opción recomendada para ampliar las opciones de pago y satisfacer los requisitos de la plataforma.
- Enterprise-level SDKs for Android (Kits SDK de nivel empresarial para Android) - una solución para poner en marcha rápidamente la aceptación de pagos a través de todos los métodos que propone Xsolla: tarjetas bancarias y de crédito, monederos electrónicos, códigos QR y métodos nativos, como p. ej., 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.
