Source Code
The Markdown we wrote for this page is displayed below. We then generated the HTML using a static site generator and our in-house code. Your browser then uses our Style Sheets and some Javascript to beautifully render the HTML. Please click the button to restore the page.
Restore Page
---
title: ""
description: "Checkout"
date: ""
draft: false
params:
list: false
summaries: false
sections:
- section: "spotlight style3 content-align-center squeeze"
---
<script src="https://js.stripe.com/v3/"></script>
<style>
body { font-family: sans-serif; margin: 20px; }
#card-element {
border: 1px solid #ccc;
padding: 12px;
border-radius: 4px;
margin-bottom: 12px;
}
#submit {
padding: 10px 20px;
background: #32325d;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
#error-message { color: red; margin-top: 12px; }
</style>
<h1>Pay on Our Domain</h1>
<form id="payment-form">
<div id="card-element"><!-- Stripe injects the card input here --></div>
<button type="submit" id="submit">Pay</button>
<div id="error-message"></div>
</form>
<script>
// Initialize Stripe with your publishable key (this key is safe to expose)
const stripe = Stripe('pk_test_YOUR_PUBLISHABLE_KEY');
const elements = stripe.elements();
const cardElement = elements.create('card');
cardElement.mount('#card-element');
// Handle form submission
const paymentForm = document.getElementById('payment-form');
paymentForm.addEventListener('submit', async (e) => {
e.preventDefault();
document.getElementById('submit').disabled = true;
// Example cart data; in a real app, gather this from your UI/state.
const cartData = {
items: [
{ name: "Custom Item", quantity: 1 }
],
discountCode: "DISCOUNT20"
};
// Call your secure server to create a PaymentIntent
const res = await fetch("https://secure.quantalumin.com/create-payment-intent.php", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(cartData)
});
const data = await res.json();
if(data.error) {
document.getElementById('error-message').textContent = data.error;
document.getElementById('submit').disabled = false;
return;
}
// Confirm the card payment using the client secret from your server
const { error, paymentIntent } = await stripe.confirmCardPayment(data.clientSecret, {
payment_method: { card: cardElement }
});
if(error) {
document.getElementById('error-message').textContent = error.message;
document.getElementById('submit').disabled = false;
} else if (paymentIntent && paymentIntent.status === 'succeeded') {
alert("Payment succeeded! PaymentIntent ID: " + paymentIntent.id);
// Optionally, redirect or update your UI to show success
}
});
</script>