harmlessprince/frontend_paystack_payment_integration.html

## frontend_paystack_payment_integration.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form id="paymentForm">
    <div class="form-group">
        <input type="text" id="reference" value="REF-TYWYZP-22"/>
        <label for="email-address">Email Address</label>
        <input type="email" id="email-address" required value="example@yahoo.com"/>
    </div>
    <div class="form-group">
        <label for="amount">Amount</label>
        <input type="tel" id="amount" required value="2000.00"/>
    </div>
    <div class="form-group">
        <label for="first-name">First Name</label>
        <input type="text" id="first-name" value="John"/>
    </div>
    <div class="form-group">
        <label for="last-name">Last Name</label>
        <input type="text" id="last-name" value="Doe"/>
    </div>
    <div class="form-submit">
        <button type="submit" id="initializePaymentButton"> Pay</button>
    </div>
</form>

<script src="https://js.paystack.co/v1/inline.js"></script>
<script>
    // const paymentForm = document.getElementById('paymentForm');
    const initializePaymentButton = document.getElementById("initializePaymentButton");
    // paymentForm.addEventListener("submit", payWithPaystack, false);
    initializePaymentButton.addEventListener("click", function (e) {
        payWithPaystack(e)
    });
    function payWithPaystack(e) {
        e.preventDefault();

        let handler = PaystackPop.setup({
            key: 'pk_test_xxxxx', // Replace with your public key
            email: document.getElementById("email-address").value,
            amount: document.getElementById("amount").value * 100,
            ref:  document.getElementById("reference").value,
            currency: "NGN",
            onClose: function(){
                alert('Window closed.');
            },
            callback:  function(response){
                console.log("paystackResponse", response)
                const url = "http://workfynder.test/api/confirm/payment"
                const apiResponse =  fetch(url, {
                    method: "POST",
                    cache: "no-cache",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify({reference: response.reference, payment_gateway: 'paystack', transaction_id: response.transaction }), // body data type must match "Content-Type" header
                });
                let message = 'Payment complete! Reference: ' + response.reference;
                console.log("apiResponse", apiResponse)
            }
        });

        handler.openIframe();
    }
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	</head>
	<body>
	<form id="paymentForm">
	<div class="form-group">
	<input type="text" id="reference" value="REF-TYWYZP-22"/>
	<label for="email-address">Email Address</label>
	<input type="email" id="email-address" required value="example@yahoo.com"/>
	</div>
	<div class="form-group">
	<label for="amount">Amount</label>
	<input type="tel" id="amount" required value="2000.00"/>
	</div>
	<div class="form-group">
	<label for="first-name">First Name</label>
	<input type="text" id="first-name" value="John"/>
	</div>
	<div class="form-group">
	<label for="last-name">Last Name</label>
	<input type="text" id="last-name" value="Doe"/>
	</div>
	<div class="form-submit">
	<button type="submit" id="initializePaymentButton"> Pay</button>
	</div>
	</form>

	<script src="https://js.paystack.co/v1/inline.js"></script>
	<script>
	// const paymentForm = document.getElementById('paymentForm');
	const initializePaymentButton = document.getElementById("initializePaymentButton");
	// paymentForm.addEventListener("submit", payWithPaystack, false);
	initializePaymentButton.addEventListener("click", function (e) {
	payWithPaystack(e)
	});
	function payWithPaystack(e) {
	e.preventDefault();

	let handler = PaystackPop.setup({
	key: 'pk_test_xxxxx', // Replace with your public key
	email: document.getElementById("email-address").value,
	amount: document.getElementById("amount").value * 100,
	ref: document.getElementById("reference").value,
	currency: "NGN",
	onClose: function(){
	alert('Window closed.');
	},
	callback: function(response){
	console.log("paystackResponse", response)
	const url = "http://workfynder.test/api/confirm/payment"
	const apiResponse = fetch(url, {
	method: "POST",
	cache: "no-cache",
	headers: {
	"Content-Type": "application/json",
	},
	body: JSON.stringify({reference: response.reference, payment_gateway: 'paystack', transaction_id: response.transaction }), // body data type must match "Content-Type" header
	});
	let message = 'Payment complete! Reference: ' + response.reference;
	console.log("apiResponse", apiResponse)
	}
	});

	handler.openIframe();
	}
	</script>
	</body>
	</html>