Shell Python Node PHP C# Ruby

Secure Input

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.

Example

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>
Payload('UPDATE WITH YOUR test_client_key_....')

var checkout_form = 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.


Google/Apple Pay

<!-- Simple example of enabling Google Pay -->
<script src="https://payload.co/Payload.js"></script>

<script>
Payload('test_client_key_3bcr16ohAy8aEcwK3Vffs')

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>