Secure Input

<!-- Secure Input required Payload.js -->
<script src=""></script>

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 class="row pt-2">
        <button class="btn btn-primary" type="submit">Pay Now</button>

Use Secure Input for capturing card or bank account details securely from within any html form.

How Does it Work?

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.


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.