Passa al contenuto principale

Integrazione personalizzata

Mostra i gateway di pagamento del tuo account sulla tua pagina — ognuno con il suo pulsante, invece di un generico Paga con Voucherly — e manda il cliente direttamente a quello che ha scelto.

Altri modi per accettare pagamenti online

Se preferisci non costruire il selettore, il checkout ospitato offre tutti i gateway su una pagina ospitata da Voucherly, e i Voucherly Components mostrano l'intero modulo di pagamento dentro la tua pagina. Consulta Pagamenti online per confrontarli.

Guida rapida​

Flusso di preparazione del checkout ospitato con gateway

Voucherly offre una GET PaymentGateways API per recuperare i gateway di pagamento attivi e disponibili per il tuo account merchant.

Usala per mostrare dinamicamente specifici gateway di pagamento sul tuo sito, invece di etichette generiche come Voucherly o Paga online. Una volta che il cliente seleziona un gateway di pagamento, richiama un endpoint lato server per creare un pagamento in Voucherly.

Inoltre, Voucherly mette a disposizione una GET Customer's PaymentMethods API per recuperare i metodi di pagamento salvati di un cliente. Questo ti permette di mostrare in primo piano i suoi metodi di pagamento preferiti, abilitando addebiti diretti senza intoppi e riducendo ulteriormente l'attrito durante il processo di checkout.

1. Crea un Payment per il gateway selezionato​

Al clic, specifica il gateway di pagamento selezionato tramite il parametro selectedPaymentGateway oppure il metodo di pagamento del cliente tramite il parametro customerPaymentMethodId.

Esempio di richiesta

{
    "mode": "Payment",
    "selectedPaymentGateway": "GATEWAY", // oppure customerPaymentMethodId
    "customerPaymentMethodId": "my-customer-method-1", // oppure selectedPaymentGateway
    "customerId": "my-customer-id-1",
    "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 Payment, reindirizza il cliente al checkoutUrl restituito nella risposta: Voucherly apre direttamente il gateway selezionato, senza mostrare la propria pagina di scelta.

2. Gestisci la callback e il rientro​

Da qui in poi il flusso è quello del checkout ospitato: gestisci la callback S2S e mostra una pagina di successo.

Metodi di pagamento salvati

Per permettere a un cliente che torna di pagare con un metodo salvato in un clic, leggi Gestione clienti.