Crea una experiencia de confirmación de la compra rápida en Android con Google Pay

1. Introducción

La API de Google Pay les brinda a los usuarios la oportunidad de pagar desde cualquier lugar usando la información de pago almacenada en sus Cuentas de Google. En este lab, usarás la biblioteca cliente de Google Pay para Android para mejorar la experiencia de finalización de compra de una aplicación para dispositivos móviles de ejemplo simplificada a través de la creación de una experiencia más rápida, conveniente y segura que, a su vez, genera más conversiones y clientes felices.

Auto T-Shirt Shop es una tienda innovadora que aprovecha los avances más recientes en inteligencia artificial y usa información como preferencias de estilo, clima, época del año y tendencias de moda para sugerirte el artículo más adecuado para comprar.

Las métricas sobre el compromiso son fundamentales. Lamentablemente, los números también reflejan una gran cantidad de abandonos durante el proceso de confirmación de compra. Decidido a abordar eso, uno de los propietarios del proyecto recuerda haber visto un video en el que se muestran los resultados prometedores que Google Pay dio para otros sitios similares, por lo que decide intentarlo y confía en que se encargará de la integración.

Descripción general

En este codelab, descubrirás cómo integrar Google Pay a una aplicación existente, lo que incluye determinar si un usuario puede pagar con una forma de pago compatible con Google Pay, la posición y el diseño del botón de pago, y la ejecución de la transacción.

En este codelab, aprenderás a hacer lo siguiente:

1. Integra Google Pay en una aplicación para Android existente
2. Determina si un usuario está listo para pagar con Google Pay
3. Agrega el botón de Google Pay a tu interfaz de usuario
4. Completa una operación de pago con Google Pay

Requisitos previos

• Git
• Android Studio o un entorno de desarrollo alternativo para aplicaciones para Android
• Un emulador o dispositivo Android que tenga instalada la versión más reciente de los Servicios de Google Play

Asistencia

Si no puedes avanzar, el repositorio google-pay/android-quickstart de GitHub contiene una solución completa como referencia.

2. Comenzar

Clona el repositorio desde GitHub

Usa el siguiente comando para clonar el repositorio a una carpeta de tu computadora:

git clone https://github.com/google-pay/android-quickstart

O, si lo prefieres, descarga un archivo ZIP:

Descargar código fuente

Observa brevemente la aplicación de ejemplo

Como puedes ver, el repositorio tiene una estructura de archivo simple. El objetivo principal de este codelab es brindarte la posibilidad de adaptar esta integración para tus aplicaciones existentes y futuras, independientemente del lenguaje de programación, las bibliotecas o las herramientas con los que elijas trabajar.

3. Abre el proyecto en Android Studio

El repositorio de GitHub que clonaste contiene un proyecto de Android con una actividad básica. En este paso, editarás la actividad para verificar la preparación para usar Google Pay y mostrar un botón del servicio.

1. Abre Android Studio.
2. Selecciona Archivo y, luego, Abrir.
3. Selecciona el directorio kotlin en el repositorio.
4. Selecciona Abrir.

Agrega la biblioteca de Google Pay como una dependencia en tu archivo build.gradle

1. Abre el archivo de compilación de Gradle a nivel del módulo (kotlin/app/build.gradle.kts).
2. Agrega la biblioteca de Google Pay a la sección dependencies

implementation "com.google.android.gms:play-services-wallet:19.3.0"

1. Guarde el archivo.
2. Selecciona File y, luego, Sync Project with Gradle Files.

Habilita la API de Google Pay en tu archivo de manifiesto de Android

Por último, agrega un elemento meta-data dentro del nodo application de tu archivo de manifiesto:

<meta-data
    android:name="com.google.android.gms.wallet.api.enabled"
    android:value="true" />

4. Decide dónde colocar el botón de Google Pay en tu interfaz

El diseño y la ubicación general de las vistas son aspectos importantes que afectan la probabilidad de que los usuarios completen una transacción de pago. La posibilidad de elegir una forma de pago en pocos pasos con Google Pay habilita nuevas opciones sobre dónde y cuándo ofrecerles a los usuarios una forma de pagar en tu aplicación. Por ejemplo, puedes agregar opciones de confirmación de la compra rápida antes en el proceso, en áreas como la vista de detalles de un artículo, para permitir que los usuarios paguen rápidamente por un artículo que les guste.

Una vez que hayas decidido cómo organizar tu interfaz de usuario, el siguiente paso es colocar el botón de Google Pay. Puedes configurar algunas características visuales del botón, como el tipo, el tema y la redondez de las esquinas. Estos son algunos ejemplos:

La biblioteca de Google Pay incluye una vista que simplifica agregar el botón a tu interfaz de usuario. A continuación, te mostramos cómo hacerlo si compilas tus diseños con XML:

<com.google.android.gms.wallet.button.PayButton
    android:id="@+id/googlePayButton"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

Más adelante, inicializarás el botón de manera programática (consulta el ejemplo).
Si usas Jetpack Compose, incluye la versión más reciente de la siguiente dependencia en tu archivo build.gradle o build.gradle.kts:

implementation "com.google.pay.button:compose-pay-button:1.0.0"

Agrega el botón de Google Pay a tu diseño de Compose de la siguiente manera:

PayButton(
    modifier = Modifier
        .testTag("payButton")
        .fillMaxWidth(),
    onClick = onGooglePayButtonClick,
    allowedPaymentMethods = PaymentsUtil.allowedPaymentMethods.toString()
)

Consulta la muestra en GitHub para obtener más información sobre cómo crear la lista de formas de pago aceptadas.

A partir de ahora, este codelab usa Kotlin, corrutinas y Jetpack Compose. Si usas diseños Java o XML, consulta el instructivo de integración de Java en la documentación.

5. Inicializa y configura la API de Google Pay

Crea una instancia del cliente de API

Para comenzar a usar la API, debes crear una instancia de un objeto de cliente que usarás para hacer llamadas a la API de Google Pay. Puedes hacerlo en cuanto se cree tu actividad o control:

private val paymentsClient: PaymentsClient = createPaymentsClient(context)

fun createPaymentsClient(context: Context): PaymentsClient {
    val walletOptions = Wallet.WalletOptions.Builder()
            .setEnvironment(WalletConstants.ENVIRONMENT_TEST).build()
    return Wallet.getPaymentsClient(context, walletOptions)
}

Se inicializa el cliente de pagos con un objeto WalletOptions. Si configuras el entorno como ENVIRONMENT_TEST, podrás experimentar con la información de pago de prueba. Una vez que tengas todo listo para emitir transacciones de pago reales, puedes actualizar la propiedad de entorno a ENVIRONMENT_PRODUCTION.

Importante: Cuando tengas todo listo para operar en el entorno de PRODUCTION, visita el Centro de Consola de la Billetera y sigue los pasos para crear un Perfil de Negocio y que se apruebe tu integración para emitir transacciones de pago.

Anatomía de una solicitud de Google Pay

Cuando envías solicitudes a la API de Google Pay, debes incluir varios parámetros de configuración en ellas, como la versión de la API a la que segmentas tus anuncios. Para este codelab, este objeto también contiene información sobre las formas de pago aceptadas en tu aplicación. La estructura final se ve de la siguiente manera:

{
    apiVersion: number,
    apiVersionMinor: number,
    allowedPaymentMethods: Array
}

La propiedad allowedPaymentMethods contiene una lista de formas de pago. Debes incluir las siguientes propiedades por cada forma de pago:

{
    type: 'CARD',
    parameters: {
        allowedCardNetworks: Array.<string>,
        allowedAuthMethods: Array.<string>
    }
}

Configuración de la forma de pago

A los fines de este ejemplo, solo aceptarás pagos con tarjeta de Mastercard y Visa, en formularios de número de cuenta principal con asignación de token y de número de cuenta principal (PAN). Así es como se ve tu forma de pago:

private val baseCardPaymentMethod =
    JSONObject()
        .put("type", "CARD")
        .put("parameters", JSONObject()
            .put("allowedCardNetworks", JSONArray(listOf("VISA", "MASTERCARD")))
            .put("allowedAuthMethods", JSONArray(listOf("PAN_ONLY", "CRYPTOGRAM_3DS")))
        )

Puedes encontrar la lista completa de los parámetros que puedes usar para configurar la forma de pago CARD en la sección CardParameters de la documentación.

Revisión general

Repasemos: Definiste una forma de pago para que tu aplicación la acepte y vas a trabajar con la versión 2.0 de la API. Así es como se ve la configuración resultante:

private val baseCardPaymentMethod = JSONObject()
    .put("type", "CARD")
    .put("parameters", JSONObject()
        .put("allowedCardNetworks", JSONArray(listOf("VISA", "MASTERCARD")))
        .put("allowedAuthMethods", JSONArray(listOf("PAN_ONLY", "CRYPTOGRAM_3DS")))
    )

private val googlePayBaseConfiguration = JSONObject()
    .put("apiVersion", 2)
    .put("apiVersionMinor", 0)
    .put("allowedPaymentMethods",  JSONArray(listOf(baseCardPaymentMethod)))
}

6. Determina la disponibilidad para pagar con Google Pay

Usar la solicitud isReadyToPay te permite determinar si un usuario de tu aplicación puede pagar con Google Pay. Usa esta información para ajustar la experiencia del usuario en tu aplicación según corresponda.

Para esta solicitud, debe especificar la versión de la API de Google Pay y la lista de formas de pago permitidas en su aplicación. Esto es exactamente lo que contiene el objeto de configuración básica definido en el paso anterior:

private suspend fun fetchCanUseGooglePay(): Boolean {
    val request = IsReadyToPayRequest.fromJson(googlePayBaseConfiguration.toString())
    return paymentsClient.isReadyToPay(request).await()
}

Además, la API de Google Pay usa objetos Task para resolver llamadas remotas. La API de Tasks te permite resolver operaciones de Task con corrutinas. Más información

Como puedes ver, cuando se verifica la preparación para pagar con Google Pay, se muestra un objeto booleano. Si el resultado es positivo, el siguiente paso es mostrar el botón de Google Pay en tu interfaz de usuario. De lo contrario, considere mostrar una IU adicional que admita otros medios de pago.

Mostrar el botón de Google Pay

Ahora, regresa a tu interfaz de usuario y actualiza la posición del botón de Google Pay según el resultado de la llamada anterior. En este ejemplo, se usa una clase para conservar el estado de la vista, que se actualiza en función de una entrada, como la llamada a isReadyToPay.

if (payUiState !is PaymentUiState.NotStarted) {
    PayButton(
        modifier = Modifier
            .testTag("payButton")
            .fillMaxWidth(),
        onClick = onGooglePayButtonClick,
        allowedPaymentMethods = PaymentsUtil.allowedPaymentMethods.toString()
    )
}

7. ¡Es hora de recibir el pago!

### Prepara la solicitud de pago

En este punto, cargaste la API de Google Pay y determinaste que el usuario de tu aplicación puede usar Google Pay para hacer un pago. Como resultado, mostraste el botón de pago de Google Pay en la IU y ahora tu usuario está listo para iniciar la transacción. Ahora es momento de cargar la hoja de pagos con las formas de pago disponibles para tu usuario.

Al igual que la llamada a isReadyToPay, esta solicitud requiere las propiedades en el objeto de configuración base definido anteriormente (apiVersion, apiVersionMinor y allowedPaymentMethods). Esta vez, también necesitas una propiedad nueva llamada tokenizationSpecification y parámetros adicionales para describir la transacción y solicitar información, como direcciones de facturación y envío, o dirección de correo electrónico o número de teléfono.

#### La propiedad tokenizationSpecification

La especificación de asignación de token determina cómo se procesa y utiliza la forma de pago seleccionada por tus usuarios para completar una transacción.

Se admiten dos tipos diferentes de mecanismos de manejo. Si estás procesando la transacción de pago desde servidores que cumplen con PCI DSS, usa el tipo de especificación DIRECT. En este ejemplo, usarás una puerta de enlace de pagos para procesar el pago. Por lo tanto, establecerás el tipo de especificación PAYMENT_GATEWAY:

private val tokenizationSpecification = JSONObject()
    .put("type", "PAYMENT_GATEWAY")
    .put("parameters", JSONObject(mapOf(
            "gateway" to "example",
            "gatewayMerchantId" to "exampleGatewayMerchantId")))
}

En la sección parameters, puedes especificar una puerta de enlace de la lista de proveedores compatibles con la API de Google Pay, junto con la configuración adicional que requiere cada puerta de enlace. A los fines de este lab, usarás la puerta de enlace example, que muestra los resultados de la prueba de las transacciones ejecutadas.

Puedes obtener más información sobre los requisitos para cada puerta de enlace específica o, como alternativa, consultar los ejemplos en la documentación de la especificación del token.

Parámetros adicionales

Del mismo modo, puedes solicitar más detalles a tu usuario para realizar el pedido correctamente. Observa cómo, en este ejemplo, agregas las propiedades billingAddressRequired y billingAddressParameters para indicar que, para esta transacción, se requiere la dirección de facturación del usuario en formato completo y con un número de teléfono incluido:

private val cardPaymentMethod = JSONObject()
    .put("type", "CARD")
    .put("tokenizationSpecification", tokenizationSpecification)
    .put("parameters", JSONObject()
        .put("allowedCardNetworks", JSONArray(listOf("VISA", "MASTERCARD")))
        .put("allowedAuthMethods", JSONArray(listOf("PAN_ONLY", "CRYPTOGRAM_3DS")))
        .put("billingAddressRequired", true)
        .put("billingAddressParameters", JSONObject(mapOf("format" to "FULL")))
    )

Asegúrate de solicitar solo la información que sea estrictamente necesaria para realizar la transacción. Recuerda que solicitar más información puede afectar negativamente los porcentajes de conversiones.

#### Incluye información adicional sobre la transacción

La propiedad transactionInfo contiene un objeto con detalles financieros de la transacción, es decir, el precio y el código de moneda (en formato alfa ISO 4217), junto con el estado del precio, que puede ser final o estimado según la naturaleza de la transacción (p. ej., el precio puede variar según la dirección de envío especificada):

private val transactionInfo = JSONObject()
    .put("totalPrice", "123.45")
    .put("totalPriceStatus", "FINAL")
    .put("currencyCode", "USD")
}

#### Agrega la información de tu empresa

La solicitud de pago toma la información sobre el comercio que realiza la solicitud de la propiedad merchantInfo. En este codelab, te enfocarás en dos propiedades:

• merchantId contiene el identificador asociado a tu cuenta. Puedes obtener tu identificador de comerciante en la pestaña Pay & Consola de la Billetera. Ten en cuenta que este campo no se evalúa cuando se usa el entorno TEST.
• merchantName es el nombre visible para el usuario de tu organización o aplicación. Esto puede aparecer en la hoja de pagos de Google Pay para brindarles a los usuarios más contexto sobre quién solicita la operación.

Cuando todo esté listo, agrega la información sobre el comercio al objeto paymentDataRequest:

private val merchantInfo = JSONObject()
    .put("merchantName", "Example Merchant")
    .put("merchantId", "01234567890123456789")

Emite la solicitud y procesa el resultado

Ahora, reúne el objeto de configuración y pásalo a la solicitud loadPaymentData:

private val paymentDataRequestJson = JSONObject(googlePayBaseConfiguration.toString())
    .put("allowedPaymentMethods", JSONArray().put(cardPaymentMethod))
    .put("transactionInfo", transactionInfo)
    .put("merchantInfo", merchantInfo)

En este punto, tienes todo lo que necesitas preguntarle a la API de Google Pay para una forma de pago válida. Para ello, usa el método loadPaymentData en el objeto PaymentsClient y pasa la configuración que acabas de definir:

fun getLoadPaymentDataTask(): Task<PaymentData> {
    val request = PaymentDataRequest.fromJson(paymentDataRequestJson.toString())
    return paymentsClient.loadPaymentData(request)
}

private fun requestPayment() {
    val task = getLoadPaymentDataTask()
    task.addOnCompleteListener(paymentDataLauncher::launch)
}

La API de Google Pay usa la API de Activity Result para mostrar un resultado. La API contiene contratos para simplificar el procesamiento y la reacción al resultado. En este ejemplo, se usa el contrato GetPaymentDataResult, que incluye información sobre la operación además del resultado del pago:

private val paymentDataLauncher = registerForActivityResult(GetPaymentDataResult()) { taskResult ->
    when (taskResult.status.statusCode) {
        CommonStatusCodes.SUCCESS -> {
            taskResult.result!!.let {
                Log.i("Google Pay result:", it.toJson())
                // TODO something with the result
            }
        }
        CommonStatusCodes.CANCELED -> // The user canceled
        AutoResolveHelper.RESULT_ERROR -> // The API returned an error (it.status: Status)
        CommonStatusCodes.INTERNAL_ERROR -> // Handle other unexpected errors
    }
}

Cuando se llama a este método, se activa la presentación de la hoja de pago de Google Pay. Si no hay errores de configuración, puedes ver una lista de formas de pago válidas asociadas con la cuenta conectada actualmente.

Después de la selección, la hoja se cierra y el resultado se envía de vuelta a tu actividad y lo captura el lanzador de resultados de la actividad definido anteriormente.

Si la selección se realiza correctamente, se mostrará el resultado con un objeto PaymentData que incluye información relevante sobre la forma de pago seleccionada:

{
  "apiVersionMinor": 0,
  "apiVersion": 2,
  "paymentMethodData": {
    "description": "Visa •••• 1234",
    "tokenizationData": {
      "type": "PAYMENT_GATEWAY",
      "token": "examplePaymentMethodToken"
    },
    "type": "CARD",
    "info": {
      "cardNetwork": "VISA",
      "cardDetails": "1234",
      "billingAddress": {
        "phoneNumber": ...,
        ...
      }
    }
  }
}

Ahora puedes usar esta forma de pago para completar la transacción con tu puerta de enlace de pago:

private fun handlePaymentSuccess(paymentData: PaymentData) {
    val paymentMethodToken = paymentData
            .getJSONObject("tokenizationData")
            .getString("token")

    // Sample TODO: Use this token to perform a payment through your payment gateway
}

Consulta la lista de procesadores compatibles para obtener más información sobre los detalles específicos de la implementación.

8. ¡Felicitaciones!

Agregaste correctamente Google Pay a una aplicación para Android.

### Próximos pasos

• Prueba Google Pay en tu aplicación
• Obtenga un identificador de comerciante en la página Consola de la Billetera
• Revisa la lista de tareas de integración.

### Más información

• Consulta la referencia de la API.
• Soluciona problemas de tu integración si observas errores
• Consulta el instructivo de integración en los documentos para obtener orientación sobre cómo realizar la integración con otros lenguajes de programación y bibliotecas.
• Consulta la aplicación de ejemplo en GitHub para obtener una demostración funcional completa.

¿Esto te resultó útil?

Muy útil Es lo que esperaba En realidad, no .