Embedded payment form
Mount a payment form directly on your own page with Ledgerline.js UI components. You keep your layout; we keep the card data out of your servers.
Load Ledgerline.js
<script src="https://js.ledgerline.dev/v2/"></script>Create a PaymentIntent on your server
app.post('/create-payment-intent', async (req, res) => {
const intent = await ledgerline.paymentIntents.create({
amount: 4800,
currency: 'usd',
automatic_payment_methods: { enabled: true },
});
res.json({ clientSecret: intent.client_secret });
});Mount the payment component
const ll = Ledgerline('pk_test_51Kx…');const { clientSecret } = await fetch('/create-payment-intent', { method: 'POST' }).then((r) => r.json());const components = ll.components({ clientSecret, appearance: { theme: 'flat' } });const payment = components.create('payment', { layout: 'tabs' });payment.mount('#payment-form');document.querySelector('#submit').addEventListener('click', async () => { const { error } = await ll.confirmPayment({ components, confirmParams: { return_url: 'https://example.com/complete' }, }); if (error) showMessage(error.message);});Always confirm on the client. Confirming a PaymentIntent from your server skips 3-D Secure and will be declined for most European cards.
Was this page helpful?