wajihkm/pt_expresscheckout_v3.html

## pt_expresscheckout_v3.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PayTabs - Express checkout v3</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>

<body>

    <div class="container">
        <h1>PayTabs - Express checkout v3.0, Demo</h1>

        <div>
            <div class="form-group">
                <label for="merchantID">Merchant ID</label>
                <input type="text" class="form-control" id="merchantID">
            </div>
            <div class="form-group">
                <label for="secretKey">Secret key</label>
                <input type="password" class="form-control" id="secretKey">
            </div>
            <div class="form-group">
                <label for="amount">Amount</label>
                <input type="number" min="0" class="form-control" id="amount">
            </div>
            <div class="form-group">
                <label for="currency">Currency</label>
                <input type="text" class="form-control" id="currency" aria-describedby="currencyHelp">
                <small id="currencyHelp" class="form-text text-muted">AED, SAR, OMR, EGP ...</small>
            </div>
            <div class="form-group">
                <label for="url_back">Redirect back url</label>
                <input type="text" class="form-control" id="url_back" value="http://localhost/?pt_done">
            </div>

            <div class="form-group">
                <label for="curreny">Language: </label>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="lang" value="en" checked>
                    <label class="form-check-label" for="langEn">English</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="lang" value="ar">
                    <label class="form-check-label" for="langAr">Arabic</label>
                </div>
            </div>

            <div class="form-group">
                <label for="iFrameLoad">iFrame load: </label>
                <select class="custom-select" id="iFrameLoad">
                    <option selected value="onbodyload">on body load</option>
                    <option value="onbuttonclick">on button click</option>
                </select>
            </div>
            <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="iFrameShow">
                <label class="form-check-label" for="iFrameShow">iFrame show</label>
            </div>

            <button type="button" class="btn btn-primary" onclick="pt()">Generate</button>
        </div>

        <hr>

        <link rel="stylesheet" href="https://www.paytabs.com/theme/express_checkout/css/express.css">
        <script src="https://www.paytabs.com/theme/express_checkout/js/jquery-1.11.1.min.js"></script>
        <script src="https://www.paytabs.com/express/express_checkout_v3.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!-- Button Code for PayTabs Express Checkout -->
        <div class="PT_express_checkout"></div>

        <script type="text/javascript">
            function pt() {
                let id = $('#merchantID').val();
                let secretKey = $('#secretKey').val();
                let amount = $('#amount').val();
                let currency = $('#currency').val();
                let lang = $('input[name=lang]:checked').val();
                let iFrameLoad = $('#iFrameLoad').val();
                let iFrameShow = $('#iFrameShow').is(":checked") ? 1 : 0;

                Paytabs("#express_checkout").expresscheckout({
                    settings: {
                        merchant_id: id,
                        secret_key: secretKey,
                        amount: amount,
                        currency: currency,
                        title: "Mr. John Doe",
                        product_names: "Product1,Product2,Product3",
                        order_id: 25,
                        url_redirect: "http://localhost/ ",
                        display_customer_info: 1,
                        display_billing_fields: 1,
                        display_shipping_fields: 0,
                        language: lang,
                        redirect_on_reject: 0,
                        is_iframe: {
                            load: iFrameLoad,
                            show: iFrameShow
                        }
                    }
                });

                window.scrollTo(0, document.body.scrollHeight);
            }
        </script>

    </div>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>PayTabs - Express checkout v3</title>

	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
	</head>

	<body>

	<div class="container">
	<h1>PayTabs - Express checkout v3.0, Demo</h1>

	<div>
	<div class="form-group">
	<label for="merchantID">Merchant ID</label>
	<input type="text" class="form-control" id="merchantID">
	</div>
	<div class="form-group">
	<label for="secretKey">Secret key</label>
	<input type="password" class="form-control" id="secretKey">
	</div>
	<div class="form-group">
	<label for="amount">Amount</label>
	<input type="number" min="0" class="form-control" id="amount">
	</div>
	<div class="form-group">
	<label for="currency">Currency</label>
	<input type="text" class="form-control" id="currency" aria-describedby="currencyHelp">
	<small id="currencyHelp" class="form-text text-muted">AED, SAR, OMR, EGP ...</small>
	</div>
	<div class="form-group">
	<label for="url_back">Redirect back url</label>
	<input type="text" class="form-control" id="url_back" value="http://localhost/?pt_done">
	</div>

	<div class="form-group">
	<label for="curreny">Language: </label>
	<div class="form-check form-check-inline">
	<input class="form-check-input" type="radio" name="lang" value="en" checked>
	<label class="form-check-label" for="langEn">English</label>
	</div>
	<div class="form-check form-check-inline">
	<input class="form-check-input" type="radio" name="lang" value="ar">
	<label class="form-check-label" for="langAr">Arabic</label>
	</div>
	</div>

	<div class="form-group">
	<label for="iFrameLoad">iFrame load: </label>
	<select class="custom-select" id="iFrameLoad">
	<option selected value="onbodyload">on body load</option>
	<option value="onbuttonclick">on button click</option>
	</select>
	</div>
	<div class="form-group form-check">
	<input type="checkbox" class="form-check-input" id="iFrameShow">
	<label class="form-check-label" for="iFrameShow">iFrame show</label>
	</div>

	<button type="button" class="btn btn-primary" onclick="pt()">Generate</button>
	</div>

	<hr>

	<link rel="stylesheet" href="https://www.paytabs.com/theme/express_checkout/css/express.css">
	<script src="https://www.paytabs.com/theme/express_checkout/js/jquery-1.11.1.min.js"></script>
	<script src="https://www.paytabs.com/express/express_checkout_v3.js"></script>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<!-- Button Code for PayTabs Express Checkout -->
	<div class="PT_express_checkout"></div>

	<script type="text/javascript">
	function pt() {
	let id = $('#merchantID').val();
	let secretKey = $('#secretKey').val();
	let amount = $('#amount').val();
	let currency = $('#currency').val();
	let lang = $('input[name=lang]:checked').val();
	let iFrameLoad = $('#iFrameLoad').val();
	let iFrameShow = $('#iFrameShow').is(":checked") ? 1 : 0;

	Paytabs("#express_checkout").expresscheckout({
	settings: {
	merchant_id: id,
	secret_key: secretKey,
	amount: amount,
	currency: currency,
	title: "Mr. John Doe",
	product_names: "Product1,Product2,Product3",
	order_id: 25,
	url_redirect: "http://localhost/ ",
	display_customer_info: 1,
	display_billing_fields: 1,
	display_shipping_fields: 0,
	language: lang,
	redirect_on_reject: 0,
	is_iframe: {
	load: iFrameLoad,
	show: iFrameShow
	}
	}
	});

	window.scrollTo(0, document.body.scrollHeight);
	}
	</script>

	</div>
	</body>

	</html>