@payaza/web-sdk
Advanced tools
## Installation ### Using cdn Add the cdn in the head of your html document ```html <script defer src="https://checkout.payaza.africa/js/v1/bundle.js"></script> ```
Add the cdn in the head of your html document
<script defer src="https://checkout.payaza.africa/js/v1/bundle.js"></script>
npm install @payaza/web-sdk
or
yarn add @payaza/web-sdk
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>
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();
The callback function is an event hook through which payaza sends data.
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
}
}
{
"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>"
}
}
}
{
"type": "error",
"status": 401,
"data": {
"message": "Sorry merchant key is not valid"
}
}
{
"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"
]
}
]
}
}
{
"type": "error",
"status": 401,
"data": {
"message": "Business Profile Credentials does not match connection mode selected"
}
}
FAQs
## Installation ### Using cdn Add the cdn in the head of your html document ```html <script defer src="https://checkout.payaza.africa/js/v1/bundle.js"></script> ```
The npm package @payaza/web-sdk receives a total of 27 weekly downloads. As such, @payaza/web-sdk popularity was classified as not popular.
We found that @payaza/web-sdk demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.