iframe_cashpay_live

0.0.2 • Public • Published

JS iFrame CashPay

alt text

iframe_cashpay. A plugin to add payments Cash E-wallet to your application.

Getting Started

Before you start, create an APIs with the payment providers and follow the setup instructions: https://documenter.getpostman.com/view/29850098/2s9YXcd5Fd

Installation

 <script src="https://cdn.jsdelivr.net/npm/iframe_cashpay_live@0.0.2/index.js"></script>

Usage

Typical setup

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>CashPayButton</title>
    <style>
        /*style for CashPayButton*/
        .CashPayButtonStyle {
            color: white;
            font-size: medium;
            background-color: #006666;
            padding: 15px;
            border-radius: 30px;
        }
    </style>
</head>
<body>
 <!-- Use TagName CashPayButton and attribute className,lang in your application -->
    <CashPayButton  className="CashPayButtonStyle" type="test" lang="en"></CashPayButton>
    <script>
        //You must use function onClickCashPayButton and return iframeURL
        var orderId;
        async function onClickCashPayButton() {
            //Send itemList for your server and post CreateOrder.
            //For example.
            var itemList = [
                {
                    "itemName": "كتاب",
                    "amount": 2000
                },
                {
                    "itemName": "ساعة",
                    "amount": 5000
                }
            ];
            var requestOptions = {
                method: 'POST',
                body: JSON.stringify(itemList),
                redirect: 'follow'
            };
            //Send itemList for yor server and post CreateOrder.
            //iframeURL returned from Response CreateOrder
            var iframeURL = "";
            await fetch('https://api.example.com/itemList', requestOptions)
                .then(response => response.json())
                .then(res => {
                    if (res) {
                        if (res.iframeURL) {
                           //iframeURL returned from Response CreateOrder
                            //Documentation https://documenter.getpostman.com/view/29850098/2s9YXcd5Fd
                            iframeURL = res.iframeURL;
                            //orderID returned from Response CreateOrder
                            //Store the orderID in the orderId variable to use on function onConfirmPayment
                            orderId = res.orderID;
                        }
                    }
                })
                .catch(error => {
                    console.error(error);
                });
            if (iframeURL) {
                //You must return iframeURL to display iframe_cashpay
                return iframeURL;
            }
        };

        //Function callback onConfirmPayment
        function onConfirmPayment(data) {
            //After Confirmatin from CashPayButton.
            if(orderId)
            {
            //Here use CheckOrderStatus on your server to check order status.
            //Documentation https://documenter.getpostman.com/view/29850098/2s9YXcd5Fd
            }
        };
    </script>
    <script src="https://cdn.jsdelivr.net/npm/iframe_cashpay_live@0.0.2/index.js">
    </script>
</body>
</html>

Explanation of the code

How to use the CashPayButton iframe payment library.

Includes the iframe_cashpay payment library. The iframe_cashpay payment library is a JavaScript library that allows you to add the iframe_cashpay payment iframe to your website or application.

First defines a style for the CashPayButton element. The style sets the button's color to white, its font size to medium, its background color to #006666, its padding to 15px, and its border radius to 30px.

Creates a CashPayButton element and sets its className and lang attributes. The className attribute is used to set the style for the CashPayButton element. The lang attribute is used to set the language for the CashPayButton element.

Then defines a function called onClickCashPayButton. This function is called when the CashPayButton element is clicked. The function sends a list of items to the server and posts a CreateOrder request. The CreateOrder request creates an order for the items that were sent to the server. The function then gets the iframe URL from the response to the CreateOrder request. If the iframe URL is not null, the function returns it. The iframe URL is used to display the iframe_cashpay payment iframe.

Then defines a function called onConfirmPayment. This function is called when the user confirms the payment in the iframe_cashpay payment iframe. The function uses the CheckOrderStatus function on your server to check the order status.

Package Sidebar

Install

npm i iframe_cashpay_live

Weekly Downloads

0

Version

0.0.2

License

ISC

Unpacked Size

385 kB

Total Files

6

Last publish

Collaborators

  • mazen.alj
  • saleh.alsanabani
  • tamkeen_developer