Práce s JavaScript Payment Request API

Payment Request API je nové JavaScript API, které poskytuje standard pro různé prohlížeče pro shromažďování platebních, adresních a kontaktních údajů od zákazníka, které lze použít ke zpracování objednávky. Usnadňuje také výměnu těchto informací mezi prohlížečem a webovou stránkou. Celá myšlenka za tím je zlepšit zážitek uživatele z online nakupování tím, že uživateli usnadní ukládání platebních a kontaktních informací v prohlížeči.

Podpora prohlížeče

Rozhraní Payment Request API je stále v aktivním vývoji a je podporováno pouze několika posledními verzemi moderních prohlížečů. Než začneme žádat o platbu, měli bychom funkci detekovat, abychom zajistili, že prohlížeč podporuje rozhraní API:

if(window.PaymentRequest) {
    // Yes, we can use the API
} else {
    // No, fallback to checkout page
    window.location.href = '/checkout';
}

PaymentRequest Objekt

Požadavek na platbu je vždy spuštěn vytvořením nového objektu PaymentRequest - pomocí PaymentRequest() konstruktér. Konstruktor přebírá dva povinné parametry a jeden volitelný parametr:

• paymentMethods definuje, které způsoby platby jsou přijímány. Můžete například přijímat pouze kreditní karty Visa a MasterCard.
• paymentDetails obsahuje celkovou splatnou částku platby, daně, náklady na dopravu, zobrazené položky atd.
• options je volitelný argument, který lze použít k vyžádání dalších podrobností od uživatele, jako je jméno, e-mail, telefon atd.

Vytvořme nový požadavek na platbu pouze s požadovanými parametry:

const paymentMethods = [
    {
        supportedMethods: ['basic-card']
    }
];

const paymentDetails = {
    total: {
        label: 'Total Amount',
        amount: {
            currency: 'USD',
            value: 8.49
        }
    }
};

const paymentRequest = new PaymentRequest(
    paymentMethods,
    paymentDetails
);

Všimněte si supportedMethods parametr v paymentMethods objekt. Když je nastaveno na basic-card , budou přijímány debetní i kreditní karty všech sítí. Můžeme však omezit podporované sítě a typy karet. Například u následujících jsou přijímány pouze kreditní karty Visa, MasterCard a Discover:

const paymentMethods = [
    {
        supportedMethods: ['basic-card'],
        data: {
            supportedNetworks: ['visa', 'mastercard', 'discover'],
            supportedTypes: ['credit']
        }
    }
];
// ...

Platební údaje

Druhý povinný parametr, který je předán do PaymentRequest konstruktor je objekt platebních podrobností. Obsahuje součet objednávky a volitelné pole zobrazovaných položek. total parametr musí obsahovat label parametr a amount parametr s currency a value .

Můžete také přidat další položky zobrazení a poskytnout tak podrobné rozdělení celkového počtu:

const paymentDetails = {
    total: {
        label: 'Total Amount',
        amount: {
            currency: 'USD',
            value: 8.49
        }
    },
    displayItems: [
        {
            label: '15% Discount',
            amount: {
                currency: 'USD',
                value: -1.49
            }
        },
        {
            label: 'Tax',
            amount: {
                currency: 'USD',
                value: 0.79
            }
        }
    ]
};

displayItems Parametr není určen k zobrazení dlouhého seznamu položek. Protože je prostor pro platební uživatelské rozhraní prohlížeče na mobilních zařízeních omezený, měli byste toto použít k zobrazení pouze polí nejvyšší úrovně, jako je mezisoučet, sleva, daň a náklady na dopravu atd.

Vyžádání dalších podrobností

Třetí volitelný parametr lze použít k vyžádání dalších informací od uživatele, jako je jméno, e-mailová adresa a telefonní číslo:

// ...
const options = {
    requestPayerName: true,
    requestPayerPhone: true,
    requestPayerEmail: true,
};

const paymentRequest = new PaymentRequest(
    paymentMethods,
    paymentDetails,
    options
);

Ve výchozím nastavení jsou všechny tyto hodnoty false , ale přidat kteroukoli z nich do options objekt s hodnotou true bude mít za následek další krok v uživatelském rozhraní platby. Pokud uživatel již tyto údaje v prohlížeči uložil, budou předvyplněny.

Zobrazit uživatelské rozhraní plateb

Po vytvoření PaymentRequest objekt, musíte zavolat show() způsob zobrazení uživatelského rozhraní žádosti o platbu uživateli. show() metoda vrací příslib, který se vyřeší pomocí PaymentResponse objekt, pokud uživatel úspěšně vyplnil údaje. Pokud dojde k chybě nebo uživatel zavře uživatelské rozhraní, příslib se zamítne.

// ...
const paymentRequest = new PaymentRequest(
    paymentMethods,
    paymentDetails,
    options
);

paymentRequest
    .show()
    .then(paymentResponse => {
        // close the payment UI
        paymentResponse.complete()
            .then(() => {
                // TODO: call REST API to process the payment at backend server
                // with the data from `paymentResponse`.
            });
    })
    .catch(err => {
        // user closed the UI or the API threw an error
        console.log('Error:', err);
    });

S výše uvedeným kódem prohlížeč uživateli zobrazí platební rozhraní. Jakmile uživatel vyplní údaje a klikne na tlačítko 'Zaplatit', obdržíte PaymentResponse objekt v show() slib. Uživatelské rozhraní žádosti o platbu se okamžitě zavře, když zavoláte na číslo PaymentResponse.complete() metoda. Tato metoda vrací nový příslib, takže můžete zavolat backend serveru se shromážděnými informacemi a zpracovat platbu.

Pokud jste chtěli zavolat na backendový server, aby zpracoval platbu, zatímco se v uživatelském rozhraní plateb zobrazuje číselník, můžete odložit volání na complete() . Pojďme vytvořit simulovanou funkci pro zpracování plateb s backend serverem. Trvá to paymentResponse jako parametr a po 1,5 sekundě vrátí příslib, který se převede na objekt JSON:

const processPaymentWithServer = (paymentResponse) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve({ status: true });
        }, 1500);
    });
};
//...
paymentRequest
    .show()
    .then(paymentResponse => {
        processPaymentWithServer(paymentResponse)
            .then(data => {
                if (data.status) {
                    paymentResponse.complete('success');
                } else {
                    paymentResponse.complete('fail');
                }
            });
    })
    .catch(err => {
        console.log('Error:', err);
    });

Ve výše uvedeném příkladu bude uživatelské rozhraní pro platby prohlížeče zobrazovat obrazovku zpracování, dokud processPaymentWithServer() nevrátí příslib metoda je vyřešena. Také jsme použili řetězce „úspěch“ a „neúspěch“, abychom prohlížeči sdělili výsledek transakce. Pokud zavoláte complete('fail'), prohlížeč uživateli zobrazí chybovou zprávu .

Zrušení žádosti o platbu

Pokud chcete zrušit žádost o platbu z důvodu nečinnosti nebo z jakéhokoli jiného důvodu, můžete použít PaymentRequest.abort() metoda. Okamžitě zavře uživatelské rozhraní žádosti o platbu a odmítne show() slib.

// ...
setTimeout(() => {
    paymentRequest.abort()
        .then(() => {
            // aborted payment request
            console.log('Payment request aborted due to no activity.');
        })
        .catch(err => {
            // error while aborting
            console.log('abort() Error: ', err);
        });
}, 5000);

Závěr

To je konec rychlého úvodu do JavaScript Payment Request API. Poskytuje metodu založenou na prohlížeči pro shromažďování zákaznických plateb a kontaktních informací, které lze odeslat na backendový server za účelem zpracování platby. Cílem je snížit počet kroků nutných k dokončení online platby. Díky tomu je celý proces placení plynulejší, protože si pamatuje preferovaný způsob platby za zboží a služby uživatelem.

Pokud se chcete dozvědět více o rozhraní Payment Request API, zde je dobrý zdroj, který pojednává o hlavních konceptech a použití API.