iframe_cashpay
Version:
iframe_cashpay. A plugin to add payments Cash E-wallet to your application.
82 lines (77 loc) • 2.82 kB
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" 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'
};
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/17550185/2s93XzwN9o
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/17550185/2s93XzwN9o
}
};
</script>
<script src="./index.js"></script>
</script>
</body>
</html>