JS iFrame CashPay
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.