Crea un'esperienza di pagamento rapido su Android con Google Pay

1. Introduzione

L'API Google Pay offre agli utenti l'opportunità di pagare ovunque utilizzando i dati di pagamento memorizzati nei loro Account Google. In questo lab userai la libreria client di Google Pay per Android per migliorare l'esperienza di pagamento di un'applicazione mobile di esempio semplificata, creando un'esperienza più veloce, comoda e sicura, che a sua volta genera più conversioni e clienti più soddisfatti.

Auto T-shirt Shop è un negozio innovativo che sfrutta gli ultimi progressi dell'intelligenza artificiale e, utilizzando informazioni come preferenze di stile, meteo, periodo dell'anno e tendenze della moda, ti suggerisce l'articolo più appropriato da acquistare.

Le metriche sul coinvolgimento sono alle stelle. Purtroppo, le cifre riflettono anche un gran numero di abbandoni durante la procedura di pagamento. Determinato ad affrontare questo problema, uno dei proprietari del progetto ricorda di aver visto un video che mostra i risultati promettenti ottenuti da Google Pay per altri siti simili, quindi decide di provarci e ha fiducia che tu possa occuparti dell'integrazione.

Panoramica

Questo codelab ti guida attraverso l'integrazione di Google Pay in un'applicazione esistente, tra cui determinare se un utente è in grado di pagare utilizzando un metodo di pagamento supportato da Google Pay, nonché la posizione e il design del pulsante di pagamento e l'esecuzione della transazione.

Applicazione di esempio

In questo codelab, imparerai a:

  1. Integra Google Pay in un'applicazione Android esistente
  2. Determina se un utente è pronto a pagare con Google Pay
  3. Aggiungi il pulsante Google Pay alla tua interfaccia utente
  4. Completare un'operazione di pagamento con Google Pay

Prerequisiti

  • Git
  • Android Studio o un ambiente di sviluppo alternativo per le app per Android.
  • Un emulatore o un dispositivo Android con la versione più recente di Google Play Services installata

Assistenza

Se non riesci a procedere, il repository GitHub google-pay/android-quickstart contiene una soluzione completa come riferimento.

2. Inizia

Clona il repository da GitHub

Utilizza questo comando per clonare il repository in una cartella sul tuo computer:

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

Oppure, se preferisci un archivio zip:

Scorri l'applicazione di esempio

Come puoi vedere, il repository ha una struttura di file non complicata. L'obiettivo principale di questo codelab è darti la possibilità di adattare questa integrazione alle tue applicazioni esistenti e future, indipendentemente dal linguaggio di programmazione, dalle librerie o dagli strumenti con cui scegli di lavorare.

3. Apri il progetto in Android Studio

Il repository GitHub che hai clonato contiene un progetto Android con un'attività di base. In questo passaggio modificherai questa attività per verificare l'idoneità di Google Pay e mostrare un pulsante Google Pay.

  1. Apri Android Studio
  2. Seleziona File e poi Apri.
  3. Seleziona la directory kotlin nel repository
  4. Seleziona Apri.

Aggiungi la libreria di Google Pay come dipendenza nel file build.gradle

  1. Apri il file di build Gradle a livello di modulo (kotlin/app/build.gradle.kts)
  2. Aggiungi la libreria di Google Pay alla sezione dependencies
implementation "com.google.android.gms:play-services-wallet:19.3.0"
  1. Salva il file
  2. Seleziona File, poi Sincronizza il progetto con i file Gradle

Attiva l'API Google Pay nel file manifest di Android

Infine, aggiungi un elemento meta-data all'interno del nodo application del file manifest:

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

4. Decidi dove posizionare il pulsante Google Pay nell'interfaccia

Il layout e il posizionamento complessivo nelle visualizzazioni sono aspetti importanti che influiscono sulla probabilità che gli utenti completino una transazione di pagamento. La possibilità di scegliere una forma di pagamento con pochi tocchi grazie a Google Pay offre nuove opzioni su dove e quando offrire agli utenti un modo per pagare nell'applicazione. Ad esempio, puoi aggiungere opzioni di pagamento rapido nelle prime fasi della procedura, in aree come la visualizzazione dei dettagli di un articolo, per consentire agli utenti di pagare rapidamente un singolo articolo di loro gradimento.

Una volta deciso come organizzare l'interfaccia utente, il passaggio successivo consiste nel posizionare il pulsante Google Pay. Puoi configurare alcune funzionalità visive del pulsante, come il tipo, il tema e la rotondità degli angoli. Ecco alcuni esempi:

Esempio di pulsanti dinamici di Google Pay

La libreria di Google Pay include una visualizzazione per semplificare l'aggiunta del pulsante all'interfaccia utente. Se stai creando i tuoi layout utilizzando XML, procedi nel seguente modo:

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

Successivamente, inizializza il pulsante in modo programmatico (vedi esempio).
Se utilizzi Jetpack Compose, includi la versione più recente della seguente dipendenza nel file build.gradle o build.gradle.kts:

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

Aggiungi il pulsante Google Pay al layout di Scrivi in questo modo:

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

a parte Dai un'occhiata all'esempio in GitHub per scoprire di più su come redigere l'elenco dei metodi di pagamento accettati.

5. Inizializzare e configurare l'API Google Pay

Creare un'istanza per il client API

Per iniziare a utilizzare l'API, devi creare un'istanza per un oggetto client che utilizzerai per effettuare chiamate all'API Google Pay. Puoi farlo non appena viene creata l'attività o il controller:

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)
}

Il client di pagamento è inizializzato con un oggetto WalletOptions. Se imposti l'ambiente su ENVIRONMENT_TEST, puoi eseguire esperimenti con i dati di pagamento di prova. Quando è tutto pronto per emettere transazioni di pagamento vere e proprie, puoi aggiornare la proprietà dell'ambiente in ENVIRONMENT_PRODUCTION.

L'anatomia di una richiesta di Google Pay

Quando invii richieste all'API Google Pay, devi includere una serie di parametri di configurazione nelle richieste, ad esempio la versione dell'API che hai scelto come target. Ai fini di questo codelab, questo oggetto contiene anche informazioni sui metodi di pagamento accettati nella tua applicazione. La struttura finale è la seguente:

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

La proprietà allowedPaymentMethods accetta un elenco di metodi di pagamento. Per ogni metodo di pagamento devi includere le seguenti proprietà:

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

La configurazione del metodo di pagamento

In questo esempio, accetterai solo pagamenti con carta per Mastercard e Visa, sia in un modulo tokenizzato che con un numero di conto principale (PAN). Ecco come si presenta il tuo metodo di pagamento:

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

Riassumendo

Ricapitoliamo. Hai definito un metodo di pagamento da accettare nella tua richiesta e utilizzerai la versione 2.0 dell'API. Ecco l'aspetto della configurazione risultante:

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. Determinare la prontezza a pagare con Google Pay

L'utilizzo della richiesta isReadyToPay ti consente di determinare se un utente della tua applicazione è in grado di pagare con Google Pay. Utilizza queste informazioni per modificare di conseguenza l'esperienza utente nella tua applicazione.

Per questa richiesta devi specificare la versione dell'API Google Pay e l'elenco dei metodi di pagamento consentiti nella tua applicazione. Questo è esattamente ciò che contiene l'oggetto di configurazione di base definito nel passaggio precedente:

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

a parte, l'API Google Pay utilizza i Task per risolvere le chiamate remote. L'API Tasks consente di risolvere le operazioni Task utilizzando le coroutine. Scopri di più

Come puoi vedere, il controllo dell'idoneità a pagare con Google Pay restituisce un oggetto booleano. Se il risultato è positivo, il passaggio successivo consiste nel mostrare il pulsante Google Pay nell'interfaccia utente. In caso contrario, valuta la possibilità di mostrare un'interfaccia utente aggiuntiva che supporta altri metodi di pagamento.

Mostra il pulsante Google Pay

Ora torna all'interfaccia utente e aggiorna la posizione del pulsante Google Pay in base al risultato della chiamata precedente. In questo esempio utilizza una classe per mantenere lo stato della vista, che viene aggiornato in base a input quali la chiamata a isReadyToPay.

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

7. È ora di pagare!

### Prepara la richiesta di pagamento

A questo punto, hai caricato l'API Google Pay e determinato che l'utente della tua applicazione è in grado di utilizzare Google Pay per effettuare un pagamento. Di conseguenza, hai visualizzato il pulsante di pagamento Google Pay nell'interfaccia utente e ora il tuo utente è pronto ad avviare la transazione. A questo punto, devi caricare il foglio di pagamento con le forme di pagamento disponibili per l'utente.

Analogamente alla chiamata a isReadyToPay, questa richiesta richiede le proprietà nell'oggetto di configurazione di base definito in precedenza (apiVersion, apiVersionMinor e allowedPaymentMethods). Questa volta, devi anche creare una nuova proprietà denominata tokenizationSpecification, e parametri aggiuntivi per descrivere la transazione e richiedere informazioni come gli indirizzi di fatturazione e spedizione o gli indirizzi degli utenti l'indirizzo email o il numero di telefono.

#### La proprietà tokenizationSpecification

La specifica di tokenizzazione determina il modo in cui il metodo di pagamento selezionato dagli utenti viene gestito e utilizzato per completare una transazione.

Sono supportati due diversi tipi di meccanismi di gestione. Se elabori la transazione di pagamento dai server conformi allo standard PCI DSS, utilizza il tipo di specifica DIRECT. In questo esempio, utilizzi un gateway di pagamento per elaborare il pagamento e, di conseguenza, imposti il tipo di specifica PAYMENT_GATEWAY:

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

Nella sezione parameters, puoi specificare un gateway dall'elenco di provider supportati dall'API Google Pay, insieme a una configurazione aggiuntiva richiesta da ciascun gateway. Ai fini di questo lab, utilizzerai il gateway example, che restituisce i risultati dei test per le transazioni eseguite.

Parametri aggiuntivi

Analogamente, puoi richiedere ulteriori dettagli all'utente per effettuare correttamente l'ordine. Guarda come, in questo esempio, aggiungi le proprietà billingAddressRequired e billingAddressParameters per indicare che, per questa transazione, è necessario specificare l'indirizzo di fatturazione dell'utente in formato completo e includere un numero di telefono:

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")))
    )

#### Includi informazioni aggiuntive sulla transazione

La proprietà transactionInfo contiene un oggetto con i dettagli finanziari relativi alla transazione, ovvero il prezzo e il codice valuta (formato alpha ISO 4217) insieme allo stato del prezzo, che può essere finale o stimato a seconda della natura della transazione (ad es. il prezzo può variare a seconda dell'indirizzo di spedizione specificato):

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

#### Aggiunta delle informazioni sulla tua attività commerciale

La richiesta di pagamento accetta le informazioni sul commerciante che la esegue nella proprietà merchantInfo. In questo codelab ti concentrerai su due proprietà:

  • merchantId contiene l'identificatore associato al tuo account. Puoi ottenere il tuo identificativo commerciante nella sezione Paga e Console Wallet. Tieni presente che questo campo non viene valutato quando utilizzi l'ambiente TEST.
  • merchantName è il nome visibile all'utente della tua applicazione o organizzazione. Queste informazioni potrebbero essere mostrate all'interno del foglio di pagamento di Google Pay per fornire agli utenti maggiori informazioni su chi richiede l'operazione.

Quando è tutto pronto, aggiungi le informazioni sul commerciante all'oggetto paymentDataRequest:

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

Invia la richiesta ed elabora il risultato

Ora raggruppa l'oggetto di configurazione e passalo alla richiesta loadPaymentData:

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

A questo punto, hai tutto ciò che ti serve per richiedere una forma di pagamento valida all'API Google Pay. Per farlo, utilizza il metodo loadPaymentData nell'oggetto PaymentsClient, passando la configurazione appena definita:

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

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

L'API Google Pay utilizza l'API Activity Result per restituire un risultato. L'API contiene contratti per semplificare l'elaborazione e reagire al risultato. In questo esempio viene utilizzato il contratto di GetPaymentDataResult, che include informazioni sull'operazione oltre al risultato del pagamento:

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
    }
}

La chiamata di questo metodo attiva la presentazione del foglio di pagamento di Google Pay. Se non sono presenti errori di configurazione, puoi visualizzare un elenco di metodi di pagamento validi associati all'account al momento in cui hai eseguito l'accesso.

Dopo la selezione, il foglio si chiude e il risultato viene inviato alla tua attività e acquisito dall'utilità di avvio dei risultati delle attività definita sopra.

Se la selezione ha esito positivo, il risultato viene restituito con un oggetto PaymentData che include informazioni pertinenti sul metodo di pagamento selezionato:

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

Ora puoi utilizzare questo metodo di pagamento per completare la transazione con il tuo gateway di pagamento:

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
}

8. Complimenti

Hai aggiunto Google Pay a un'applicazione Android.

### Passaggi successivi

### Scopri di più

Hai trovato utile questa recensione?

Molto utile Proprio quello che mi aspettavo Non esattamente