1.0.4 • Published 10 months ago
payaza-web-sdk v1.0.4
Payaza web sdk
Installation
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-sdkor
yarn add payaza-web-sdkUsage
When using cdn
Use the PayazaCheckout.setup(options: object) to initializa your class and the method showPopup() to show the popup
const payazaCheckout = PayazaCheckout.setup({
merchant_key: "<public key>",
connection_mode: PayazaCheckout.TEST_CONNECTION_MODE, // PayazaCheckout.LIVE_CONNECTION_MODE || PayazaCheckout.TEST_CONNECTION_MODE
checkout_amount: Number(2000),
// currency_code: "NGN", // default is NGN. This field is optional
email_address: "example@email.com",
phone_number: "+1200000000",
first_name: '<first name>',
last_name: '<last name>',
transaction_reference: 'your_reference',
onClose: function() {
console.log("Closed")
},
callback: function(callbackResponse) {
console.log(callbackResponse)
}
});
// Alternatively, you can set the onClose and callback function as described below
function callback(callbackResponse){
console.log(callbackResponse)
}
function onClose(){
console.log("closed")
}
payazaCheckout.setCallback(callback)
payazaCheckout.setOnClose(onClose)
// Display popup
payazaCheckout.showPopup();An example document is given below
<!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: "<public key>",
connection_mode: PayazaCheckout.TEST_CONNECTION_MODE, // PayazaCheckout.LIVE_CONNECTION_MODE || PayazaCheckout.TEST_CONNECTION_MODE
checkout_amount: Number(2000),
// currency_code: "NGN", // default is NGN. This field is optional
email_address: "example@email.com",
first_name: '<first name>',
last_name: '<last name>',
phone_number: "+1200000000",
transaction_reference: 'your_reference',
onClose: function() {
console.log("Closed")
},
callback: function(callbackResponse) {
console.log(callbackResponse)
}
});
// Alternatively, you can set the onClose and callback function as described below
function callback(callbackResponse){
console.log(callbackResponse)
}
function onClose(){
console.log("closed")
}
payazaCheckout.setCallback(callback)
payazaCheckout.setOnClose(onClose)
// Display popup
payazaCheckout.showPopup();
}//end function handleButtonClick
</script>
</head>
<body>
<button onclick="handleButtonClick()">Click me!!!</button>
</body>
</html>When using npm or yarn
You can use the sdk any of the following ways
import PayazaCheckout from "@payaza/web-sdk";
...
const payazaCheckout = new PayazaCheckout({
merchant_key: "<public key>",
connection_mode: PayazaCheckout.TEST_CONNECTION_MODE, // PayazaCheckout.LIVE_CONNECTION_MODE || PayazaCheckout.TEST_CONNECTION_MODE
checkout_amount: Number(2000),
// currency_code: "NGN", // default is NGN. This field is optional
email_address: "example@email.com",
first_name: '<first name>',
last_name: '<last name>',
phone_number: "+1200000000",
transaction_reference: 'your_reference',
onClose: function() {
console.log("Closed")
},
callback: function(callbackResponse) {
console.log(callbackResponse)
}
});
// Alternatively, you can set the onClose and callback function as described below
function callback(callbackResponse){
console.log(callbackResponse)
}
function onClose(){
console.log("closed")
}
payazaCheckout.setCallback(callback)
payazaCheckout.setOnClose(onClose)
// Display popup
payazaCheckout.showPopup();import {setup} from "@payaza/web-sdk";
...
const payazaCheckout = setup({});
payazaCheckout.showPopup();and if you are using typescript
import PayazaCheckout from "@payaza/web-sdk";
import { PayazaCheckoutOptionsInterface } from '@payaza/web-sdk/lib/PayazaCheckoutDataInterface'
...
const data:PayazaCheckoutOptionsInterface = {
merchant_key: "<public key>",
connection_mode: PayazaCheckout.TEST_CONNECTION_MODE, // PayazaCheckout.LIVE_CONNECTION_MODE || PayazaCheckout.TEST_CONNECTION_MODE
checkout_amount: Number(2000),
// currency_code: "NGN", // default is NGN. This field is optional
email_address: "example@email.com",
first_name: '<first name>',
last_name: '<last name>',
phone_number: "+1200000000",
transaction_reference: 'your_reference',
onClose: function() {
console.log("Closed")
},
callback: function(callbackResponse) {
console.log(callbackResponse)
}
}
const checkout = new PayazaCheckout(data)
checkout.showPopup()and if the setup function would conflict with one of your functions, you can rename it
import {setup as PayazaSetup} from "@payaza/web-sdk";
...
const payazaCheckout = PayazaSetup({});
payazaCheckout.showPopup();callback(callbackResponse)
The callback function is an event hook through which payaza sends data.
callbackResponse object
callbackResponse = {
type: "<type>", // error | info
status: "<status code>"
data: {
message: "<message>",
status: <callbackStatus>, // In development
'[key: string]': any, // could have other attributes, depending on the response type and status
}
}example callbackResponse
Successful payment
{
"type": "success",
"status": 201,
"data": {
"message": "Transaction Successful",
"payaza_reference": "<reference>",
"transaction_reference": "<your reference>",
"transaction_fee": "<transaction fee>",
"transaction_total_amount": "<total amount>",
"currency": {
"name": "Naira",
"code": "NGN",
"unicode": "₦",
"html_value": "₦"
},
"customer": {
"email_address": "<customer's email>",
"first_name": "<customer's first name>",
"last_name": "<customer's last name>"
}
}
}Invalid Merchant Key
{
"type": "error",
"status": 401,
"data": {
"message": "Sorry merchant key is not valid"
}
}Validation error
{
"type": "error",
"status": 400,
"data": {
"message": "Error during validation",
"errors": [
{
"field": "merchant_key",
"errors": [
"'merchant_key' is required"
]
},
{
"field": "checkout_amount",
"errors": [
"'checkout_amount' must be numeric"
]
},
{
"field": "first_name",
"errors": [
"'first_name' cannot be blank"
]
},
{
"field": "email_address",
"errors": [
"'email_address' cannot be blank",
"'email_address' must be a valid email address"
]
}
]
}
}Connection mode mismatch
{
"type": "error",
"status": 401,
"data": {
"message": "Business Profile Credentials does not match connection mode selected"
}
}