Una transazione di pagamento tramite Web Payments inizia con la scoperta del tuo app di pagamento. Scopri come configurare un metodo di pagamento e scaricare la tua app di pagamento pronti per consentire a commercianti e clienti di effettuare i pagamenti.
Per essere utilizzata con l'API Payment Request, un'app di pagamento deve essere associata a un identificatore del metodo di pagamento. Commercianti che vogliono eseguire l'integrazione con un'app di pagamento utilizzerà l'identificatore del metodo di pagamento per indicarlo al browser. Questo che illustra come funziona il rilevamento delle app di pagamento e come configurare di pagamento app di pagamento affinché venga rilevata e richiamata correttamente da un browser.
Se non hai familiarità con il concetto di pagamenti web o il funzionamento di una transazione di pagamento tramite le app di pagamento, leggi prima i seguenti articoli:
Supporto browser
I pagamenti web sono costituiti da diverse tecnologie e dal supporto dipende dal browser.
In che modo un browser rileva un'app di pagamento
Ogni app di pagamento deve fornire quanto segue:
- Identificatore del metodo di pagamento basato su URL
- File manifest del metodo di pagamento (tranne nei casi in cui l'identificatore del metodo di pagamento sia forniti da una terza parte)
- File manifest dell'app web
Il processo di scoperta ha inizio nel momento in cui un commerciante avvia una transazione:
- Il browser invia una richiesta al metodo di pagamento identificativo e recuperi il metodo di pagamento file manifest.
- Il browser determina l'app web del file manifest il file manifest del metodo di pagamento e recupera il manifest dell'app web.
- Il browser stabilisce se avviare l'app per i pagamenti del sistema operativo o la l'app per pagamenti basata sul web dal file manifest dell'app web.
Le prossime sezioni spiegano in dettaglio come impostare un metodo di pagamento personale per che i browser possano rilevare.
Passaggio 1: fornisci l'identificatore del metodo di pagamento
Un metodo di pagamento
identificatore
è una stringa basata su URL. Ad esempio, l'identificatore di Google Pay è
https://google.com/pay
. Gli sviluppatori di app di pagamento possono scegliere qualsiasi URL per il pagamento
di un metodo, purché ne abbiano il controllo e possano pubblicare
contenuti. In questo articolo utilizzeremo
https://bobbucks.dev/pay
come metodo di pagamento
identificativo dell'utente.
In che modo i commercianti utilizzano l'identificatore del metodo di pagamento
Viene creato un oggetto PaymentRequest
con un elenco di metodi di pagamento
identificatori che identificano i pagamenti
le app che un commerciante decide di accettare. Gli identificatori dei metodi di pagamento vengono impostati come valore
per la proprietà supportedMethods
. Ad esempio:
[merchant] richiede il pagamento:
const request = new PaymentRequest([{
supportedMethods: 'https://bobbucks.dev/pay'
}], {
total: {
label: 'total',
amount: { value: '10', currency: 'USD' }
}
});
Passaggio 2: pubblica il file manifest del metodo di pagamento
Un file manifest del metodo di pagamento è un File JSON che definisce quale app di pagamento può utilizzare questo metodo di pagamento.
Fornisci il file manifest del metodo di pagamento
Quando un commerciante avvia una transazione di pagamento, il browser invia una richiesta
Richiesta di GET
all'URL dell'identificatore del metodo di pagamento.
Il server risponde con il metodo di pagamento
corpo manifest.
Il file manifest di un metodo di pagamento ha due campi, default_applications
e
supported_origins
.
Nome proprietà | Descrizione |
---|---|
default_applications (campo obbligatorio) |
Un array di URL che rimanda a manifest delle app web in cui le app in hosting. L'URL può essere relativo. Questo array è previsto per fare riferimento al manifest di sviluppo, al manifest di produzione e così via. |
supported_origins |
Un array di URL che punta a origini che possono ospitare terze parti app di pagamento che implementano lo stesso metodo di pagamento. Tieni presente che un pagamento può essere implementato da più app di pagamento. |
Un file manifest di un metodo di pagamento dovrebbe avere il seguente aspetto:
[gestore dei pagamenti] /payment-manifest.json:
{
"default_applications": ["https://bobbucks.dev/manifest.json"],
"supported_origins": [
"https://alicepay.friendsofalice.example"
]
}
Quando il browser legge il campo default_applications
, trova un elenco di
Link ai file manifest delle app web supportati
app di pagamento.
Se vuoi, puoi indirizzare il browser per trovare il file manifest del metodo di pagamento in un'altra posizione
L'URL dell'identificatore del metodo di pagamento può facoltativamente rispondere con un'intestazione Link
che rimanda a un altro URL in cui il browser può recuperare il metodo di pagamento.
del file manifest. Ciò è utile quando il file manifest di un metodo di pagamento è ospitato su un
o quando l'app di pagamento è pubblicata da una terza parte.
Configura il server del metodo di pagamento in modo che risponda con un'intestazione HTTP Link
con
l'attributo rel="payment-method-manifest"
e il metodo di pagamento
dell'URL del file manifest.
Ad esempio, se il file manifest si trova all'indirizzo https://bobbucks.dev/payment-manifest.json
,
l'intestazione della risposta includerebbe:
Link: <https://bobbucks.dev/payment-manifest.json>; rel="payment-method-manifest"
L'URL può essere un nome di dominio completo o un percorso relativo. Ispeziona
https://bobbucks.dev/pay/
per il traffico di rete per vedere un esempio. Puoi utilizzare un
curl
:
curl --include https://bobbucks.dev/pay
Passaggio 3: pubblica un file manifest dell'app web
Un file manifest dell'app web è utilizzato per definire un'app web come suggerisce il nome. È un file manifest molto diffuso per definire un'app web progressiva (PWA).
Il tipico file manifest dell'app web ha il seguente aspetto:
[gestore dei pagamenti] /manifest.json:
{
"name": "Pay with Bobpay",
"short_name": "Bobpay",
"description": "This is an example of the Payment Handler API.",
"icons": [
{
"src": "images/manifest/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "images/manifest/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"serviceworker": {
"src": "service-worker.js",
"scope": "/",
"use_cache": false
},
"start_url": "/",
"display": "standalone",
"theme_color": "#3f51b5",
"background_color": "#3f51b5",
"related_applications": [
{
"platform": "play",
"id": "com.example.android.samplepay",
"min_version": "1",
"fingerprints": [
{
"type": "sha256_cert",
"value": "4C:FC:14:C6:97:DE:66:4E:66:97:50:C0:24:CE:5F:27:00:92:EE:F3:7F:18:B3:DA:77:66:84:CD:9D:E9:D2:CB"
}
]
}
]
}
Le informazioni descritte nel file manifest di un'app web vengono utilizzate anche per definire in che modo viene visualizzata nell'interfaccia utente Richiesta di pagamento.
Nome proprietà | Descrizione |
---|---|
name (campo obbligatorio)
|
Utilizzato come nome dell'app per pagamenti. |
icons (campo obbligatorio)
|
Utilizzata come icona dell'app per pagamenti. Queste icone vengono utilizzate soltanto da Chrome; altro browser potrebbero usarle come icone di riserva se non li specifichi come parte dello strumento di pagamento. |
serviceworker
|
Utilizzato per rilevare il service worker eseguito come pagamento basato sul web dell'app. |
serviceworker.src |
L'URL da cui scaricare lo script del service worker. |
serviceworker.scope |
Una stringa che rappresenta un URL che definisce nell'ambito della registrazione. |
serviceworker.use_cache |
L'URL da cui scaricare lo script del service worker. |
related_applications
|
Utilizzato per rilevare l'app che funge da app di pagamento fornita dal sistema operativo. Puoi trovare altri dettagli su Android guida per gli sviluppatori di app di pagamento. |
prefer_related_applications
|
Utilizzato per determinare quale app di pagamento lanciare quando sono disponibili sia un'app di pagamento fornita dal sistema operativo sia un'app di pagamento basata sul web. |
La proprietà name
del file manifest dell'app web viene utilizzata come nome dell'app di pagamento, icons
viene utilizzata come icona dell'app per pagamenti.
In che modo Chrome determina quale app di pagamento lanciare
Lancio dell'app di pagamento specifica per la piattaforma
Per lanciare l'app di pagamento specifica per la piattaforma, devono essere soddisfatte le seguenti condizioni:
- Il campo
related_applications
è specificato nel file manifest dell'app web e:- L'ID pacchetto e la firma dell'app installata corrispondono, mentre il numero minimo
(
min_version
) nel file manifest dell'app web è inferiore o uguale a la versione dell'applicazione installata.
- L'ID pacchetto e la firma dell'app installata corrispondono, mentre il numero minimo
(
- Il campo
prefer_related_applications
ètrue
. - L'app per pagamenti specifica per la piattaforma è installata e ha:
- Un filtro per intent di
org.chromium.action.PAY
. - Un identificatore del metodo di pagamento specificato come valore per la proprietà
org.chromium.default_payment_method_name
.
- Un filtro per intent di
Consulta la pagina App di pagamento Android: guida per gli sviluppatori per ulteriori dettagli su come configurarli.
[gestore dei pagamenti] /manifest.json
"prefer_related_applications": true,
"related_applications": [{
"platform": "play",
"id": "xyz.bobpay.app",
"min_version": "1",
"fingerprints": [{
"type": "sha256_cert",
"value": "92:5A:39:05:C5:B9:EA:BC:71:48:5F:F2:05:0A:1E:57:5F:23:40:E9:E3:87:14:EC:6D:A2:04:21:E0:FD:3B:D1"
}]
}]
Se il browser ha stabilito che è disponibile l'app per pagamenti specifica della piattaforma, la il flusso di rilevamento viene terminato qui. In caso contrario, prosegui con il passaggio successivo: lanciare l'app per pagamenti basata sul web.
Avvio dell'app per pagamenti basata sul web
L'app per pagamenti basata sul web deve essere specificata nel campo serviceworker
del file manifest dell'app web.
[gestore dei pagamenti] /manifest.json:
"serviceworker": {
"src": "payment-handler.js"
}
Il browser avvia l'app di pagamento basata sul web inviando un paymentrequest
al service worker. Non è necessario che il service worker sia registrato in
avanzare in anticipo. Può essere registrato just-in-time.
Comprensione delle ottimizzazioni speciali
In che modo i browser possono saltare l'interfaccia utente della richiesta di pagamento e avviare direttamente un'app di pagamento
In Chrome, quando viene chiamato il metodo show()
di PaymentRequest
, il metodo di pagamento
L'API Request mostra un'interfaccia utente fornita dal browser denominata "Payment Request UI". Questo
La UI consente agli utenti di scegliere un'app di pagamento. Dopo aver premuto il pulsante Continua
Nell'interfaccia utente Richiesta di pagamento, viene avviata l'app di pagamento selezionata.
Mostrare l'interfaccia utente Richiesta di pagamento prima di avviare un'app di pagamento aumenta
numero di passaggi necessari a un utente per completare un pagamento. Per ottimizzare il processo,
il browser può delegare l'evasione di queste informazioni alle app di pagamento e
avviare direttamente un'app di pagamento senza mostrare l'UI della richiesta di pagamento quando
Chiamata show()
.
Per avviare direttamente un'app di pagamento, devono essere soddisfatte le seguenti condizioni:
show()
viene attivato con un gesto dell'utente, ad esempio un clic del mouse.- Esiste una sola app per i pagamenti che:
- Supporta l'identificatore del metodo di pagamento richiesto.
Quando viene registrata la registrazione just-in-time (JIT) di un'app per pagamenti basata sul web?
Le app di pagamento basate sul web possono essere lanciate senza la previa esplicita visita dell'utente al sito web dell'app di pagamento e registrando il service worker. Il servizio il worker può essere registrato just-in-time quando l'utente sceglie di pagare con app per pagamenti basata sul web. Le tempistiche di registrazione sono due:
- Se viene mostrata all'utente l'interfaccia utente Richiesta di pagamento, l'app è registrata. just-in-time e avviata quando l'utente fa clic su Continua.
- Se l'interfaccia utente della richiesta di pagamento viene ignorata, l'app di pagamento viene registrata in tempo reale e lanciati direttamente. Ignorare l'interfaccia utente della richiesta di pagamento per avviare l'operazione. un'app registrata just-in-time richiede un gesto dell'utente, che impedisce registrazione imprevista di service worker multiorigine.
Passaggi successivi
Ora che la tua app di pagamento è rilevabile, scopri come sviluppare una piattaforma di pagamento app per pagamenti basata sul web e un'app per pagamenti basata sul web.