Le seguenti linee guida mostrano come includere il brand Google Pay nei tuoi siti web.
Pulsanti di pagamento Google Pay
Il pulsante di pagamento Google Pay deve sempre chiamare l'API Google Pay. L'API Google Pay chiama quindi il foglio di pagamento in cui gli utenti possono selezionare il metodo di pagamento.
Asset
Il metodo JavaScript createButton() inserisce dinamicamente regole CSS e un file SVG dalla CDN di Google per un elemento HTML <button>.
Quando utilizzi il metodo createButton()
, ottieni:
- Conformità al brand: integra facilmente un pulsante di pagamento Google Pay che rispetta automaticamente le ultime linee guida per il branding di Google Pay e offre opzioni personalizzabili per adattare il design della tua UI con il minimo sforzo.
- Forma personalizzabile: perfeziona l'arrotondamento degli angoli del pulsante per adattarlo perfettamente all'estetica del design esistente.
- Esperienza localizzata: la didascalia del pulsante viene tradotta automaticamente nella lingua del browser dell'utente, migliorando l'accessibilità.
- Personalizzato per gli utenti: aiuta gli utenti a scoprire i metodi di pagamento disponibili nel proprio wallet Google Pay per un processo di pagamento più rapido.
Se questo metodo pratico o le lingue supportate non soddisfano le tue esigenze, contattaci.
Stile
Tutti i pulsanti di pagamento Google Pay sono disponibili in due stili: scuro e chiaro. Puoi vedere esempi di entrambi gli stili nella sezione Asset. Il nome del brand Google Pay non deve essere tradotto. Non creare pulsanti con testo localizzato personalizzato.
| Tipo di pulsante | Scuro | Chiaro |
| book |  |
 |
| buy |  |
 |
| checkout |  |
 |
| donare |  |
 |
| ordine |  |
 |
| pay |  |
 |
| plain |  |
 |
| iscriviti |  |
 |
Utilizza il testo del tipo di pulsante più adatto alla tua pagina di pagamento. |
Utilizza pulsanti scuri su sfondi chiari per creare contrasto. |
Utilizza pulsanti chiari su sfondi scuri o colorati. |
Personalizzazione
Quando gli utenti hanno una carta idonea nel proprio account Google Pay, i pulsanti di pagamento "Acquista", "Paga" e "Semplice" mostrano il circuito della carta e le ultime quattro cifre del numero di carta. Il circuito della carta verrà visualizzato nella stessa posizione del testo "Acquista con" o "Paga con".
| Tipo di pulsante | Scuro | Chiaro |
| buy, pay and plain |  |
 |
Utilizza il tipo di pulsante Acquista, Paga o Semplice per attivare la personalizzazione. |
Utilizza pulsanti scuri su sfondi chiari per creare contrasto. |
Utilizza pulsanti chiari su sfondi scuri o colorati. |
Pulsante personalizzato
Utilizza il seguente strumento per visualizzare l'anteprima dell'aspetto di ogni pulsante:
Spazio vuoto
Mantieni sempre uno spazio vuoto minimo di 8 dp su tutti i lati del pulsante di pagamento. Assicurati che lo spazio libero non venga mai interrotto da grafiche o testo.
Esempi
| Se posizioni un pulsante Google Pay accanto a un altro pulsante, assicurati che il pulsante Google Pay abbia le stesse dimensioni dell'altro pulsante. | Utilizza sempre un pulsante Google Pay in contrasto con lo sfondo su cui viene visualizzato. |
| Quando modifichi le dimensioni del pulsante Google Pay, mantieni sempre le proporzioni costanti. |
Cosa fare e cosa non fare
| Cosa fare | Cosa non fare |
|---|---|
|
|
Marchio Google Pay
Utilizza solo il simbolo di Google Pay fornito in queste linee guida quando mostri Google Pay come opzione nei tuoi flussi di pagamento.
Asset
Fai clic sul pulsante seguente per scaricare il logo Google Pay in formato SVG:
Scaricare gli assetContrassegna
Utilizza il seguente simbolo di Google Pay quando mostri Google Pay come opzione di pagamento:
Se lo fai per altri brand, mostra "Google Pay" nel testo accanto al simbolo. Non modificare il colore o lo spessore del contorno del marchio né alterarlo in alcun modo. Utilizza solo il marchio fornito da Google.
Spazio vuoto
Mantieni sempre almeno la metà (0,5x) dell'altezza della G maiuscola su tutti i lati del simbolo di accettazione di Google Pay. Assicurati che lo spazio vuoto sia uniforme rispetto a quello attorno ai simboli degli altri brand esposti.
Dimensioni
Regola l'altezza in modo che corrisponda a quella delle altre identità del brand visualizzate nel flusso di pagamento. Non rendere il simbolo di Google Pay più piccolo rispetto a quelli degli altri brand.
Cosa fare e cosa non fare
| Cosa fare | Cosa non fare |
|---|---|
|
|
Google Pay nel testo
Puoi utilizzare il testo per indicare Google Pay come opzione di pagamento e per promuovere Google Pay nella tua comunicazione di marketing.
- Scrivi in maiuscolo le lettere "G" e "P".
- Utilizza sempre una "G" maiuscola e una "P" maiuscola seguite da lettere minuscole. Non scrivere in maiuscolo il nome completo "GOOGLE PAY" a meno che non sia per rispettare lo stile tipografico del tuo sito web. Non utilizzare mai "GOOGLE PAY" in maiuscolo nella tua comunicazione di marketing.
- Non abbreviare Google Pay
- Scrivi sempre le parole "Google" e "Pay".
- Abbinare lo stile del tuo sito web
- Imposta "Google Pay" con lo stesso carattere e stile tipografico del resto del testo sul tuo sito web. Non imitare lo stile tipografico di Google.
- Non tradurre Google Pay
- Scrivi sempre "Google Pay" in inglese. Non tradurlo in un'altra lingua.
- Utilizza il simbolo del marchio la prima volta che "Google Pay" viene visualizzato nella comunicazione di marketing
- Quando utilizzi "Google Pay" nella tua comunicazione di marketing, mostra il simbolo del marchio ™ la prima volta o la volta più importante in cui viene visualizzato. Non utilizzare il simbolo di marchio quando elenchi Google Pay come opzione di pagamento sul tuo sito web.
| Se non mostri le identità di brand per altre opzioni di pagamento, rappresenta "Google Pay" con il testo. | Imposta "Google Pay" con lo stesso carattere e lo stesso stile tipografico del resto del testo del sito. |
Best practice per Google Pay
Massimizza le conversioni con i flussi di pagamento e i fogli di pagamento che consentono ai clienti di rivedere rapidamente e facilmente i dati di pagamento e confermare l'acquisto.
Di seguito sono riportate le best practice:
- Imposta Google Pay come opzione di pagamento principale.
- Ove possibile, mostra il pulsante Google Pay in modo ben visibile. Puoi anche impostarlo come opzione predefinita o come unica opzione di pagamento.
- Consentire ai clienti di effettuare acquisti senza un account
- La creazione di un account rallenta la procedura di pagamento e può portare all'abbandono dei carrelli. Utilizza Google Pay per attivare il pagamento rapido senza registrazione. Se vuoi che i tuoi clienti creino un account, consenti loro di farlo dopo aver completato l'acquisto.
- Utilizzare Google Pay per avviare il pagamento durante il pagamento del carrello
- Il pulsante Google Pay apre la scheda di pagamento. Nel foglio di pagamento, i clienti possono selezionare e confermare un solo metodo di pagamento e indirizzo di spedizione. Assicurati di ottenere tutte le altre informazioni necessarie prima di dare ai clienti la possibilità di selezionare il pulsante Google Pay. Altre informazioni possono includere quanto segue:
- Le dimensioni, il colore o la quantità di un articolo.
- L'opzione per aggiungere un messaggio regalo o applicare un codice promozionale.
- La possibilità di scegliere velocità di spedizione e destinazioni diverse per i singoli articoli.
- Se un cliente non fornisce le informazioni necessarie, offri un feedback in tempo reale per comunicargli cosa ti serve prima che possa visualizzare il foglio di pagamento.
- Aggiungi il pulsante Google Pay alle pagine dei dettagli del prodotto oltre che al pagamento del carrello
- Puoi velocizzare il pagamento di un singolo articolo se consenti ai clienti di effettuare acquisti individuali direttamente dalle pagine dei dettagli del prodotto. Se un cliente sceglie questa opzione, assicurati di escludere tutti gli altri articoli presenti nel carrello, perché il foglio di pagamento consente solo di confermare i dati di pagamento e spedizione.
- Includere Google Pay nelle pagine di conferma e nelle ricevute
- Quando visualizzi i dati di pagamento nelle pagine di conferma e nelle ricevute via email, assicurati di indicare che il cliente ha pagato con Google Pay e di visualizzare Google Pay nello stesso modo degli altri metodi di pagamento.
- Non mostrare mai all'utente i numeri di conto completi, le date di scadenza o altri dettagli del metodo di pagamento. Per identificare il metodo di pagamento, utilizza sempre il testo descrittivo restituito dall'API Google Pay.
- Di seguito sono riportati esempi di testo descrittivo accettabile:
- "Network •••• 1234 con Google Pay"
- "Network •••• 1234 (Google Pay)"
- "Google Pay (Network •••• 1234)"
- "Paypal abc...d@gmail.com con Google Pay"
- "Metodo di pagamento: Google Pay"
- "Pagato con Google Pay"
Riassumendo
L'immagine seguente mostra un'integrazione completata. L'integrazione include anche il passaggio Selezione articolo/Pre-acquisto, il passaggio Transazione, il passaggio Selettore Google Pay e il passaggio Post-acquisto.
Ottenere l'approvazione
Una volta integrata l'API Google Pay, per ottenere l'accesso alla produzione, devi ottenere l'approvazione per tutti i luoghi in cui visualizzi o fai riferimento a Google Pay.
Completa la nostra lista di controllo dell'integrazione per inviare l'integrazione web per la revisione. Dovresti ricevere l'approvazione o un feedback entro un giorno lavorativo.