Disponibilità del portafoglio
Rilevare la disponibilità di Apple Pay e Google Pay prima di rendere i controlli del portafoglio con i SDK DEUNA per Web, iOS, Android e React Native.
In questa pagina
Chiamata getWalletsAvailable Prima di rendere un pulsante del portafoglio di proprietà del commerciante. Il SDK combina la configurazione del commerciante fornita da DEUNA con le capacità del browser o del dispositivo corrente.
Decisione sulla disponibilità#
Verificare per piattaforma#
const wallets = await DeunaSDK.getWalletsAvailable({
orderToken,
userInfo: {email: 'ada@example.com'},
});
applePayButton.hidden = !wallets.includes('APPLE_PAY');
googlePayButton.hidden = !wallets.includes('GOOGLE_PAY');const wallets = await deunaSDK.getWalletsAvailable({orderToken, userInfo});
setApplePayVisible(wallets.includes('apple_pay'));
setGooglePayVisible(wallets.includes('google_pay'));deunaSDK.getWalletsAvailable(
params: GetWalletsAvailableParams(orderToken: orderToken, userInfo: userInfo)
) { wallets, error in
applePayButton.isHidden = !wallets.contains(.applePay)
if let error { showWalletRecovery(error) }
}val params = GetWalletsAvailableParams(orderToken = orderToken, userInfo = userInfo)
deunaSDK.getWalletsAvailable(this, params) { wallets, error ->
googlePayButton.isVisible = wallets.contains(WalletProvider.GOOGLE_PAY)
error?.let(::showWalletRecovery)
}Modalità dei parametri#
| Form di chiamata | Uso |
|---|---|
getWalletsAvailable() | Risolve i portafogli configurati senza informazioni transazionali specifiche per l'ordine. |
{orderToken, userInfo} | Risolve le credenziali del commerciante con il contesto dell'ordine prima che il cliente clicchi. Consigliato per il checkout con portafoglio. |
Esplicito APPLE_PAY / GOOGLE_PAY configurazione del portafoglio | Integrazioni avanzate che forniscono direttamente le credenziali approvate invece di recuperarle dall'endpoint DEUNA. |
È fondamentale avviare il processo di pagamento prima di richiedere la conferma, soprattutto per Apple Pay: il gestore del pulsante può procedere immediatamente all'interno della finestra di interazione del cliente nel browser.
Avviare tramite il pulsante#
applePayButton.addEventListener('click', async () => {
await DeunaSDK.initElements({
orderToken,
userInfo,
types: [{name: 'APPLE_PAY'}],
callbacks: {
onSuccess: verifyCredentialOrOrder,
onError: showWalletRecovery,
onClosed: restorePaymentMethods,
},
});
});Uso GOOGLE_PAY per Google Pay. Mantenere la chiamata direttamente nel gestore del pulsante o del tocco, evitando timer, attese non correlate o callback in background prima di aprire la finestra nativa.
Caching e aggiornamento#
Gli SDK attuali memorizzano i provider e le credenziali risolte per consentire un avvio rapido del portafoglio. Nel Web SDK, creare DeunaSDK.newInstance() quando una pagina ha effettivamente bisogno di uno stato SDK isolato. Nelle applicazioni mobili, mantenere un'istanza SDK inizializzata per l'intero ciclo di vita dell'integrazione.
Verificare quando il cliente passa a un ordine con requisiti diversi, cambia contesto commerciale o avvia una nuova sessione di applicazione. Non mostrare il portafoglio solo perché era disponibile per un altro ordine.
Motivi per cui il portafoglio non è disponibile#
Il merchant o la connessione non sono idonei
Verificare che la connessione al portafoglio, l'ambiente, il paese, la valuta e l'ordine siano abilitati per l'account. Gli ambienti di test e produzione sono distinti.
Il browser o il dispositivo corrente non può utilizzare il portafoglio
Apple Pay richiede un dispositivo Apple idoneo, un browser, una configurazione del portafoglio e una configurazione del dominio del merchant. Google Pay richiede un browser o un dispositivo Android idoneo e i servizi Google supportati.
La chiamata di disponibilità restituisce un errore o un elenco vuoto
Verificare l'inizializzazione, la chiave API pubblica, l'ambiente, l'accesso alla rete e il token dell'ordine. Considerare un elenco vuoto come "non visualizzare il controllo del portafoglio", non come un'istruzione per bypassare il controllo.
La finestra del portafoglio è bloccata o si apre troppo tardi
Verificare la disponibilità prima del tocco, memorizzare il risultato tramite l'SDK e chiamare initElements direttamente dal gestore del pulsante del portafoglio.
UX e accessibilità#
- Utilizzare gli asset, le etichette, le dimensioni e le regole di contrasto approvate dal provider.
- Nascondere i portafogli non disponibili invece di lasciare un pulsante disabilitato e non spiegato.
- Mantenere un metodo di pagamento standard quando il portafoglio non può aprirsi.
- Comunicare gli errori di avvio e riportare il focus sul pulsante del portafoglio dopo la chiusura.
- Testare la rotazione del dispositivo, il testo di grandi dimensioni, i lettori di schermo, la navigazione tramite tastiera e i layout incorporati stretti.