Simple integration to lit component of the Credit Card Payment Form created by Adam Quinlan on CodePen.
$ npm install lit-payment-form --saveUse this component by adding the tag to the DOM :
<payment-form></payment-form>
Bind a function to the @checkoutform event to trigger the function on click on the checkout button :
<payment-form @checkoutform="function_here"></payment-form>
<html lang="en">
<head>
<title>Payment form</title>
<script type="module" src="https://cdn.jsdelivr.net/npm/lit-payment-form@latest/dist/lit-payment-form.es.js"></script>
</head>
<body>
<lit-payment-form>
Title here
</lit-payment-form>
</body>
<script>
document.querySelector('payment-form').addEventListener('checkoutform', (e) => {
console.log('form details', e.detail); // {name: '', cardnumber: '', expirationdate: '', securitycode: ''}
})
</script>
</html>Simple use case :
import 'lit-payment-form';
class MyElement extends LitElement {
render() {
return html`<lit-payment-form>Title here</lit-payment-form>`;
}
}
customElements.define('my-element', MyElement);Call a function on click on the checkout button :
import 'lit-payment-form';
class MyElement extends LitElement {
on_checkout_click(e) {
console.log('form details', e.detail); // {name: '', cardnumber: '', expirationdate: '', securitycode: ''}
}
render() {
return html`<lit-payment-form @checkoutform="on_checkout_click">Title here</lit-payment-form>`;
}
}
customElements.define('my-element', MyElement);