Payaza web sdk

Installation

$3

Add the cdn in the head of your html document
``html

`

$3

`bash
npm install @payaza/web-sdk
`

or
`bash
yarn add @payaza/web-sdk
`

Usage

$3

Use the PayazaCheckout.setup(options: object) to initializa your class and the method showPopup() to show the popup

`js
const payazaCheckout = PayazaCheckout.setup({
merchant_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: '',
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
`html











Click me!!!



`




$3


You can use the sdk any of the following ways
`js
import PayazaCheckout from "@payaza/web-sdk";
...
const payazaCheckout = new PayazaCheckout({
merchant_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: '',
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();
`

`js
import {setup} from "@payaza/web-sdk";
...
const payazaCheckout = setup({});
payazaCheckout.showPopup();
`

and if you are using typescript
`js
import PayazaCheckout from "@payaza/web-sdk";
import { PayazaCheckoutOptionsInterface } from '@payaza/web-sdk/lib/PayazaCheckoutDataInterface'
...
const data:PayazaCheckoutOptionsInterface = {
merchant_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: '',
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
`js
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

`js
callbackResponse = {
type: "", // error | info
status: ""
data: {
message: "",
status: , // In development
'[key: string]': any, // could have other attributes, depending on the response type and status
}
}
`

example callbackResponse

$3

`json
{
"type": "success",
"status": 201,
"data": {
"message": "Transaction Successful",
"payaza_reference": "",
"transaction_reference": "",
"transaction_fee": "",
"transaction_total_amount": "",
"currency": {
"name": "Naira",
"code": "NGN",
"unicode": "₦",
"html_value": "₦"
},
"customer": {
"email_address": "",
"first_name": "",
"last_name": ""
}
}
}
`

$3

`json
{
"type": "error",
"status": 401,
"data": {
"message": "Sorry merchant key is not valid"
}
}
`

$3

`json
{
"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"
]
}
]
}
}
`

$3

`json
{
"type": "error",
"status": 401,
"data": {
"message": "Business Profile Credentials does not match connection mode selected"
}
}
``