Use Secure Input for capturing card or bank account details securely from within any html form.
How Does it Work?
<!-- Secure Input requires Payload.js -->
<script src="https://payload.co/Payload.js"></script>
Payload's Secure Input library will capture the sensitive card or bank account details from the customer, pass the details directly to Payload's secure PCI environment, and return either a transaction id or a payment method id.
Secure Inputs offer a lot of flexibility for customizing the user experience of capturing payment details without introducing security concerns to your app by handling sensitive card and bank account details.
Bootstrap 4 Single Card Input
<form id="checkout-form" class="container" pl-form="payment">
<input type="hidden" pl-input="amount" value="10.00">
<div class="row pt-2">
<div class="form-group col-7 px-1">
<label>Card Details</label>
<div class="form-control" pl-input="card"></div>
</div>
</div>
<div class="row pt-2">
<button class="btn btn-primary" type="submit">Pay Now</button>
</div>
</form>
Bootstrap 4 Multiple Inputs
<form id="checkout-form" class="container" pl-form="payment">
<input type="hidden" pl-input="amount" value="10.00">
<div class="row pt-2">
<div class="form-group col-7 px-1">
<label>Card Number</label>
<div class="form-control" pl-input="card_number"></div>
</div>
<div class="form-group col-3 px-1">
<label>Expiration</label>
<div class="form-control" pl-input="expiry"></div>
</div>
<div class="form-group col-2 px-1">
<label>CVC</label>
<div class="form-control" pl-input="cvc"></div>
</div>
</div>
<div class="row pt-2">
<button class="btn btn-primary" type="submit">Pay Now</button>
</div>
</form>
<script>
// See UI Authentication on how to obtain a client token
Payload('generated_client_token')
const checkoutForm = new Payload.Form({
form: $('#checkout-form').get(0)
})
</script>
Below is an example of the pl-input="card"
attribute for integrating the single card input into a form.
This is a simple way to start accepting payment using secure inputs.
There are many different ways to integrate with secure inputs. Follow the steps below to learn how to get started.
<!-- Simple example of enabling Google Pay -->
<script src="https://payload.co/Payload.js"></script>
<script>
// See UI Authentication on how to obtain a client token
Payload('generated_client_token')
const checkout = new Payload.Form({
form: document.getElementById('checkout-form')
})
.googlepay(document.getElementById('google-pay-btn'))
.applepay(document.getElementById('apple-pay-btn'))
.on('processed', function(evt) {
console.log(evt.transaction_id)
})
</script>