kirapay-merchant-sdk
Version:
KiraPay JavaScript SDK for payment integration
68 lines (61 loc) • 1.85 kB
HTML
<html>
<head>
<title>KiraPay Integration</title>
<style>
.container {
max-width: 600px;
margin: 50px auto;
padding: 20px;
font-family: Arial, sans-serif;
}
.price-input {
margin-bottom: 15px;
padding: 8px;
border-radius: 4px;
border: 1px solid #ddd;
width: 200px;
}
</style>
</head>
<body>
<div class="container">
<h1>KiraPay Checkout</h1>
<!-- Add price input before initializing the button -->
<input
type="number"
id="price"
class="price-input"
value="100"
placeholder="Enter amount"
/>
<div id="payment-button"></div>
</div>
<script src="https://unpkg.com/kirapay-merchant-sdk"></script>
<script>
// Get DOM elements after they exist
const priceInput = document.getElementById('price');
const paymentButton = document.getElementById('payment-button');
// Create button instance
const button = new kirapay.ButtonDynamicPrice({
price: +priceInput.value, // Convert string to number with +
apiKey: "your-api",
title: "Checkout now",
style: {
backgroundColor: "#007bff",
color: "white",
padding: "12px 24px",
borderRadius: "8px",
border: "none",
cursor: "pointer"
}
});
// Update price when input changes
priceInput.addEventListener('input', (e) => {
button.updatePrice(+e.target.value);
});
// Render button
paymentButton.appendChild(button.render());
</script>
</body>
</html>