Web SDK
Payaza's Web SDK is used for integrating our Checkout SDK into merchants' websites to receive payments for various goods and services. Merchants can integrate our Web Checkout SDK through the following steps.
Usage
Using CDN
Add the cdn in the head of your html document
<script defer src="https://checkout.payaza.africa/js/v1/bundle.js"></script>
Using npm or yarn
npm install @payaza/web-sdk@0.1.0-beta.12
or
yarn add @payaza/web-sdk@0.1.0-beta.12
When using CDN
Use the PayazaCheckout.setup(options: object) to initialize your class and the method showPopup() to show the popup
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script defer src="https://checkout.payaza.africa/js/v1/bundle.js">
</script>
<script defer>
function handleButtonClick() {
const payazaCheckout = PayazaCheckout.setup({
merchant_key: "PZ78-PKLIVE-5F2395E0-1ED3-422B-A3WD-0FE05467879BC",
connection_mode: "Live",
checkout_amount: Number(10),
currency_code: "NGN",
email_address: "johndoe@gmail.com",
first_name: 'Big',
last_name: 'Maitre',
phone_number: "01232425262",
transaction_reference: "PL" + Math.floor(
(Math.random() * 10000000) + 1
),
});
// You can set the onClose and callback function as described below
function callback(callbackResponse) {
console.log('callbackResponse: ', callbackResponse)
}
function onClose() {
console.log("closed")
window.location.href = 'https://webhook.site/ed6dd7-dfcf-44a3-8fa7-4cc1a9'
}
payazaCheckout.setCallback(callback)
payazaCheckout.setOnClose(onClose)
// Display popup
payazaCheckout.showPopup();
}//end function handleButtonClick
</script>
</head>
<body>
<button onclick="handleButtonClick()">Proceed!!!</button>
</body>
</html>
When using npm or yarn
You can use the sdk any of the following ways
and if you are using typescript
if the setup function conflict with one of your functions, you can rename it
Callback
The callback function is an event hook through which Payaza sends data.
Callback Response object
Errors
To avoid any error, ensure that all requested parameters are provided in the right format before initiating the transaction.
Arguments
merchant_keystring
Your Public API key
connection_modestring
Connection mode. (Live or Test)
checkout_amountdouble
Amount to charge the customer
currency_codestring
It refers to the code of the currency(NGN, USD etc.).
email_addressstring
The email address of the customer
first_namestring
The first name of the customer
last_namestring
The last name of the customer
phone_numberint
The phone number of the customer
transaction_referencestring
The unique identifier given to a particular transaction by the merchant.
payaza_referencestring
This is Payaza's transaction reference that is returned in the callback response for the transaction. This is unique and no 2 transactions can have the same reference.