Configurare un metodo di pagamento

Una transazione di pagamento tramite pagamenti web inizia con il rilevamento della tua app di pagamento. Scopri come configurare un metodo di pagamento e preparare la tua app di pagamento per consentire a commercianti e clienti di effettuare pagamenti.

Eiji Kitamura

Per essere utilizzata con l'API Payment Request, un'app di pagamento deve essere associata a un identificativo del metodo di pagamento. I commercianti che vogliono eseguire l'integrazione con un'app di pagamento useranno 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 per essere rilevati e richiamati correttamente da un browser.

Se non hai dimestichezza con il concetto di pagamenti web o con il funzionamento di una transazione di pagamento tramite app di pagamento, leggi prima i seguenti articoli:

• Potenziare le app di pagamento con Web Payments
• Ciclo di vita di una transazione di pagamento

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

La procedura di rilevamento inizia quando un commerciante avvia una transazione:

1. Il browser invia una richiesta al metodo di pagamento identificativo e recuperi il metodo di pagamento file manifest.
2. Il browser determina l'URL del file manifest dell'app web dal manifest del metodo di pagamento e recupera il file manifest dell'app web.
3. 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 identificatore del metodo di pagamento è 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 identificatore del metodo di pagamento.

In che modo i commercianti utilizzano l'identificatore del metodo di pagamento

Un oggetto PaymentRequest viene creato con un elenco di identificatori di metodi di pagamento che identificano le app di pagamento 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 manifest del metodo di pagamento

Un manifesto 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 corpo del manifest del metodo di pagamento.

Il file manifest di un metodo di pagamento ha due campi, default_applications e supported_origins.

Un file manifest del 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 manifest delle app web delle app di pagamento supportate.

Se vuoi, indirizza il browser a trovare il 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 manifest si trova all'indirizzo https://bobbucks.dev/payment-manifest.json, l'intestazione di risposta includerà:

Link: <https://bobbucks.dev/payment-manifest.json>; rel="payment-method-manifest"

L'URL può essere un nome di dominio completo o un percorso relativo. Per un esempio, controlla il traffico di rete in https://bobbucks.dev/pay/. Puoi anche utilizzare un comando curl:

curl --include https://bobbucks.dev/pay

Passaggio 3: pubblica un file manifest dell'app web

Un manifest dell'app web viene utilizzato per definire un'app web, come suggerisce il nome. È un file manifest ampiamente utilizzato per definire un'app web progressiva (PWA).

Un file manifest dell'app web tipico avrà 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 in un manifest dell'app web vengono utilizzate anche per definire la modalità di visualizzazione di un'app di pagamento nell'interfaccia utente della richiesta di pagamento.

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 avviare

Avvio dell'app di pagamento specifica della piattaforma

Per lanciare l'app di pagamento specifica della piattaforma, devono essere soddisfatte le seguenti condizioni:

• Il campo related_applications è specificato nel 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.
• Il campo prefer_related_applications è true.
• L'app di pagamento specifica per la piattaforma è installata e dispone di:
  • 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.

Per ulteriori dettagli su come configurarle, consulta la guida per gli sviluppatori relativa alle app di pagamento per Android.

[payment handler] /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, passa al passaggio successivo: avvio dell'app di pagamento basata sul web.

Avvio dell'app per pagamenti basata sul web

L'app di pagamento basata sul web deve essere specificata nel campo serviceworker del 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 evento 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, l'API PaymentRequest mostra un'interfaccia utente fornita dal browser chiamata "Interfaccia utente della richiesta di pagamento". 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 la procedura, il browser può delegare l'evasione di queste informazioni alle app di pagamento e avviare direttamente un'app di pagamento senza mostrare l'interfaccia utente della richiesta di pagamento quando viene 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 saltata, l'app di pagamento viene registrata just in time e lanciata direttamente. Per saltare l'interfaccia utente della richiesta di pagamento e avviare un'app registrata just-in-time è necessario un gesto dell'utente, che impedisce la registrazione imprevista di worker di servizio cross-origin.

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.

• App di pagamento per Android: guida per gli sviluppatori
• Guida per gli sviluppatori di app di pagamento basate sul web