payaza-web-sdk

v1.0.4

Published

3 months ago

## 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> ```

Downloads

298

0High
0Medium
0Low

daltileo

payaza

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-sdk

yarn add payaza-web-sdk

Usage

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: "[email protected]",
  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: "[email protected]",
        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: "[email protected]",
  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: "[email protected]",
  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": "&#8358;"
        },
        "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"
    }
}