Antes de comenzar a usar el SDK de Android, asegúrate de cumplir con los requisitos previos.
El SDK de Android te permite agregar pases a la Billetera de Google. Cuando agregues el botón Billetera de Google a la app, los usuarios disfrutarán de una experiencia simple y placentera de agregar sus pases a la Billetera de Google.
Sigue los pasos para agregar el botón de la Billetera de Google a tu aplicación para Android:
1. Crea un objeto Passes
Nota: Se requiere una clase Passes para crear un objeto Passes. Si aún no lo has hecho, sigue las instrucciones para crear una clase Passes.
Define un LoyaltyObject
correspondiente, incluidos los siguientes atributos obligatorios:
classId
: Es el ID de la clase Passes creada en los requisitos previos.id
: Es un ID único para el objeto.
state
: Este campo se usa para determinar cómo se muestra un objeto. Por ejemplo, un objeto inactivo se mueve a la sección "Pases vencidos".
Consulta la plantilla de diseño para obtener más información sobre cómo se representan estos atributos en la tarjeta de lealtad.
Esta es la definición de una tarjeta de lealtad de muestra:
JSON
{
"id": "ISSUER_ID.OBJECT_ID",
"classId": "ISSUER_ID.CLASS_ID",
"state": "ACTIVE"
}
2. Crea un JWT sin firmar con el objeto
Cuando se cree elLoyaltyObject
, únelo a un JWT sin firma con el atributo payload.LoyaltyObjects
, como se muestra en el siguiente fragmento:
JSON
{
"iss": "OWNER_EMAIL_ADDRESS",
"aud": "google",
"typ": "savetowallet",
"iat": "UNIX_TIME",
"origins": [],
"payload": {
"loyaltyObjects": [ NEW_OBJECT ]
}
}
3. Incluye el botón de la Billetera de Google en la IU
La Billetera de Google ofrece un botón conocido que puedes usar para activar el flujo de Agregar a la Billetera de Google en tu aplicación. Los recursos vectoriales para el botón están disponibles en los Lineamientos sobre los botones.
Puedes importar recursos vectoriales en Android Studio, en File > New > Vector
Asset
. Selecciona "Local file" en el asistente y agrega un nombre (p. ej.:
add_to_google_wallet_button.xml
) y busca el archivo en tu unidad local para importarlo.
Ahora, puedes usar el elemento de diseño importado para agregar el botón a tu interfaz de usuario:
<ImageButton
android:id="@+id/addToGoogleWalletButton"
android:layout_width="match_parent"
android:layout_height="48dp"
android:minWidth="200dp"
android:clickable="true"
android:src="@drawable/add_to_google_wallet_button" />
El botón tiene un layout_height
de 48 dp y debe tener al menos 200 dp de ancho.
4. Verifica si la API de la Billetera de Google está disponible en el dispositivo de destino
Antes de guardar el objeto nuevo, asegúrate de que la API de la Billetera de Google esté disponible en el dispositivo de destino llamando al método getPayApiAvailabilityStatus
en la clase PayClient
. Comienza por agregar una variable de miembro a la actividad en la que mostrarás el botón y crea una instancia de él cuando se cree la actividad:
Kotlin
import com.google.android.gms.pay.PayClient
private lateinit var walletClient: PayClient
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
walletClient = Pay.getClient(this)
// Additional logic in your onCreate method
}
Java
import com.google.android.gms.pay.PayClient;
private final PayClient walletClient;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
walletClient = Pay.getClient(application);
// Additional logic in your onCreate method
}
Ahora, usa el cliente para verificar si la API está disponible:
Kotlin
import com.google.android.gms.pay.PayApiAvailabilityStatus
private fun fetchCanUseGoogleWalletApi() {
walletClient
.getPayApiAvailabilityStatus(PayClient.RequestType.SAVE_PASSES)
.addOnSuccessListener { status ->
if (status == PayApiAvailabilityStatus.AVAILABLE) {
// The API is available, show the button in your UI
} else {
// The user or device is not eligible for using the Pay API
}
}
.addOnFailureListener {
// Hide the button and optionally show an error message
}
}
Java
import com.google.android.gms.pay.PayApiAvailabilityStatus;
private void fetchCanAddPassesToGoogleWallet() {
walletClient
.getPayApiAvailabilityStatus(PayClient.RequestType.SAVE_PASSES)
.addOnSuccessListener(status -> {
if (status == PayApiAvailabilityStatus.AVAILABLE) {
// The API is available, show the button in your UI
} else {
// The user or device is not eligible for using the Pay API
};
})
.addOnFailureListener(exception -> {
// Google Play Services is too old, or API availability not verified
// Hide the button and optionally show an error message
});
}
Por último, llama al método definido anteriormente en tu aplicación cuando necesites determinar la disponibilidad de la API.
5. Agrega el objeto a la Billetera de Google
Para agregarLoyaltyObject
, pasa el JWT sin firmar del paso 2 al método savePasses
.
Puedes iniciar la operación de agregar si haces clic en el botón de la Billetera
de Google:
Kotlin
import android.os.Bundle
import android.view.View
import com.google.android.gms.samples.wallet.databinding.ActivityCheckoutBinding
private val addToGoogleWalletRequestCode = 1000
private lateinit var layout: ActivityCheckoutBinding
private lateinit var addToGoogleWalletButton: View
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
// Use view binding to access the UI elements
layout = ActivityCheckoutBinding.inflate(layoutInflater)
setContentView(layout.root)
addToGoogleWalletButton = layout.addToGoogleWalletButton
addToGoogleWalletButton.setOnClickListener {
walletClient.savePasses(newObjectJson, this, addToGoogleWalletRequestCode)
}
// Additional logic in your onCreate method
}
Java
import android.os.Bundle;
import android.view.View;
import com.google.android.gms.samples.wallet.databinding.ActivityCheckoutBinding;
private static final int ADD_TO_GOOGLE_WALLET_REQUEST_CODE = 999;
private ActivityCheckoutBinding layout:
private View addToGoogleWalletButton;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Use view binding to access the UI elements
layout = ActivityCheckoutBinding.inflate(getLayoutInflater());
setContentView(layout.getRoot());
addToGoogleWalletButton = layout.addToGoogleWalletButton;
addToGoogleWalletButton.setOnClickListener(v -> {
walletClient.savePasses(newObjectJson, this, ADD_TO_GOOGLE_WALLET_REQUEST_CODE);
});
// Additional logic in your onCreate method
}
El método savePasses
activa el flujo de guardado y, luego, invoca el método onActivityResult
una vez que este se completa. La implementación de onActivityResult
debe ser similar a la siguiente:
Kotlin
import android.content.Intent
override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
super.onActivityResult(requestCode, resultCode, data)
if (requestCode == addToGoogleWalletRequestCode) {
when (resultCode) {
RESULT_OK -> {
// Pass saved successfully
}
RESULT_CANCELED -> {
// Save operation canceled
}
PayClient.SavePassesResult.SAVE_ERROR -> data?.let { intentData ->
val errorMessage = intentData.getStringExtra(PayClient.EXTRA_API_ERROR_MESSAGE)
// Handle error
}
else -> {
// Handle unexpected (non-API) exception
}
}
}
}
Java
import android.content.Intent;
@Override
protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
super.onActivityResult(requestCode, resultCode, data);
if (requestCode == ADD_TO_GOOGLE_WALLET_REQUEST_CODE) {
switch (resultCode) {
case RESULT_OK: {
// Pass saved successfully
break;
}
case RESULT_CANCELED: {
// Save operation canceled
break;
}
case PayClient.SavePassesResult.SAVE_ERROR: {
if (data != null) {
String apiErrorMessage = data.getStringExtra(PayClient.EXTRA_API_ERROR_MESSAGE);
// Handle error
}
break;
}
default: {
// Handle unexpected (non-API) exception
}
}
}
}
Cuando se agrega correctamente el pase, el resultCode
contiene el valor de Activity.RESULT_OK
.
[SOLO PRUEBAS] pases
Cuando sigas en el modo de demostración, todos los pases que crees tendrán el texto adicional “[SOLO PARA PRUEBA]” en el título de tu pase. Esto sirve para diferenciar pases de demostración de pases en vivo. Una vez que obtengas la aprobación de producción de nuestro equipo, estos pases en el modo de demostración ya no tendrán el texto adicional cuando el usuario vuelva a abrir la app de la Billetera en un dispositivo conectado.
Próximos pasos
- Evaluar los casos de uso de las tarjetas de lealtad e implementarlas que se adapten a la necesidad de la empresa
- Sigue los Lineamientos de marca para personalizar el aspecto de tus tarjetas de lealtad.
- Envía el flujo de UX para su revisión final en la sección “API de la Billetera de Google” en Google Pay y la Consola de la Billetera.
- Prueba tu integración y publica tu app.
- ¿Tienes más preguntas? Revisa nuestras Preguntas frecuentes.