Passa al contenuto principale

Pagamento online

Usa una pagina di checkout predefinita per iniziare ad accettare pagamenti online.

Plugin e-commerce

Voucherly può essere facilmente aggiunto come metodo di pagamento utilizzando uno dei plugin e-commerce.

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.

Flusso del checkout ospitato

informazioni

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.isFood determina 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.

informazioni

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.

QR code

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.

avvertenza

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 (OK per successo, KO per 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.

Passi successivi​

Facoltativo

Precompila i dati del cliente​

Facoltativo

Separare autorizzazione e conferma​