Checkout ospitato
Usa una pagina di checkout predefinita, ospitata da Voucherly, per iniziare ad accettare pagamenti online: il tuo sito crea un Payment e reindirizza lì il cliente.
Un modulo di pagamento incorporato nella tua pagina, un checkout costruito sul tuo selettore di gateway, o un plugin per la tua piattaforma e-commerce: consulta Pagamenti online per scegliere.
Guida rapida
Vediamo un semplice esempio di integrazione del flusso di pagamento da zero.
1. Reindirizza il cliente a Voucherly Checkout
Il modo più semplice e consigliato per integrare Voucherly è utilizzare Voucherly Checkout come un'unica pagina di checkout per tutti i tuoi gateway di pagamento.
Aggiungi un pulsante di checkout al tuo sito che richiami un endpoint lato server per creare un pagamento in Voucherly.
Consulta la Create Payment API per il funzionamento e l'utilizzo dettagliati.
Puoi anche creare un pagamento per un cliente esistente, così da precompilare il modulo di checkout con i suoi dati di contatto e unificarne lo storico degli acquisti. Un pagamento rappresenta l'esperienza che il cliente vede quando viene reindirizzato al modulo di pagamento. Puoi configurarlo con opzioni come:
- Lines. Specifica gli articoli da addebitare. Per ogni articolo, il campo
product.isFooddetermina se può essere pagato con i buoni. - Discounts. Definisci gli sconti applicati al carrello.
Assicurati di impostare redirectOkUrl sull'URL a cui il cliente viene reindirizzato dopo un pagamento riuscito. Puoi anche fornire un redirectKoUrl a cui il cliente viene reindirizzato se annulla il processo di pagamento.
Per impostazione predefinita, i pagamenti scadono 24 ore dopo la creazione.
Esempio di richiesta
{
"mode": "Payment",
"customerEmail": "mario.rossi@voucherly.it",
"customerFirstName": "Mario",
"customerLastName": "Rossi",
"redirectOkUrl": "https://{{redirect_host}}/payment/success",
"redirectKoUrl": "https://{{redirect_host}}/payment/error",
"callbackUrl": "https://{{s2s_host}}/webhook/payment",
"country": "IT",
"lines": [
{
"quantity": 2,
"unitAmount": 250,
"unitDiscountAmount": 10,
"discountAmount": 0,
"product": {
"externalId": "SKU-MUFFIN-001",
"name": "Muffin al Cioccolato",
"image": "https://cdn.trovaricetta.com/photo/2016/10/07/1771032/b/muffin-al-cioccolato-facilissimi.jpg",
"isFood": true
}
}
],
"discounts": [
{
"discountName": "Coupon",
"discountDescription": "",
"amount": 200
}
]
}
Dopo aver creato un pagamento, reindirizza il cliente al checkoutUrl restituito nella risposta.
Quando il consumatore effettua un acquisto fisicamente in un negozio Brick & Mortar con uno schermo rivolto verso di lui, puoi mostrare il checkoutUrl sotto forma di QR code.
Esempio di risposta
{
"id": "my-payment-id-1",
"tenant": "live",
"mode": "Payment",
"customerId": "my-customer-id-1",
[...]
"checkoutUrl": "https://example.voucherly.it/checkout",
"status": "Requested",
[...]
}
2. Gestisci la callback S2S prima del reindirizzamento
Voucherly invia una callback quando un cliente completa con successo un pagamento. Questa callback può essere utilizzata per:
- Inviare al cliente un'email di conferma dell'ordine.
- Registrare la vendita in un database.
- Avviare un flusso di spedizione.
Si consiglia vivamente di rimanere in ascolto di questa callback invece di affidarsi esclusivamente al reindirizzamento del cliente al tuo sito. Attivare le azioni solo dalla pagina di destinazione del Checkout può risultare inaffidabile.
Voucherly invia la callback all'endpoint specificato come callbackUrl nella richiesta Create Payment API.
Scopri di più nella nostra guida Callback S2S.
Assicurati che il tuo endpoint elabori correttamente le callback. In caso contrario, i pagamenti potrebbero essere annullati e rimborsati.
3. Mostra una pagina di successo
È importante che i tuoi clienti vedano una pagina di successo o di errore dopo aver inviato il modulo di pagamento.
Quando un cliente completa il pagamento sulla pagina di Voucherly Checkout, viene reindirizzato agli URL specificati nella richiesta Create Payment API:
- Se il pagamento va a buon fine, il cliente viene reindirizzato al
redirectOkUrl. - Se il pagamento fallisce, il cliente viene reindirizzato al
redirectKoUrl.
Le informazioni sul pagamento vengono passate tramite la query string:
- success. Indica l'esito del pagamento (
OKper successo,KOper fallimento). - status. Lo stato del pagamento.
- paymentId. L'identificativo Voucherly univoco del pagamento.
- referenceId. L'ID di riferimento personalizzato del merchant.
- amount. L'importo totale pagato in centesimi.
- customerId. L'identificativo Voucherly univoco del cliente.
- tenant. live o sand.