This is your customer-facing checkout. Copy the whole file:
<?php
// checkout.php — Payment form with Payline.js Secure Fields
$publicKey = 'pk_test_your_key'; // from Dashboard → Settings → API Keys
$amount = 29900; // 299.00 SEK in minor units
$currency = 'SEK';
?>
<!DOCTYPE html>
<html>
<head>
<title>Checkout</title>
<script src="https://js.payline.se/v1/payline.js"></script>
</head>
<body>
<form id="payment-form">
<div id="card-number"></div>
<div id="card-expiry"></div>
<div id="card-cvc"></div>
<button type="submit">Pay <?= number_format($amount / 100, 2) ?> <?= $currency ?></button>
<div id="error"></div>
</form>
<script>
const payline = Payline('<?= $publicKey ?>');
const fields = payline.secureFields({ locale: 'sv' });
fields.mount('cardNumber', '#card-number');
fields.mount('cardExpiry', '#card-expiry');
fields.mount('cardCvc', '#card-cvc');
document.getElementById('payment-form')
.addEventListener('submit', async (e) => {
e.preventDefault();
const { token, error } = await fields.tokenize();
if (error) {
document.getElementById('error').textContent = error.message;
return;
}
// Send token to process.php
const res = await fetch('process.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ token: token.id }),
});
const data = await res.json();
if (data.success) window.location = '/success.php';
else document.getElementById('error').textContent = data.error;
});
</script>
</body>
</html>