Creating a Form

Creating a form with Payload Secure Inputs requires just a few html attributes and a JavaScript call to initialize. Follow the below steps to setup a form:

1) Tag the Form

Create an html <form> element and tag the form with the pl-form attribute.

Set the pl-form attribute

<form pl-form="payment"></form>

The pl-form attribute accepts a value of either payment or payment_method.

Payment Form

The payment form type should be used if the form is intended to process a payment, or checkout, immediately once the form is completed.

Payment Method Form

The payment_method form type should be used if the form is intended to capture payment and billing details to be stored for future payments.

2) Create the Inputs

There are two types of inputs you can add to your form, secured and data inputs. Secured inputs need to be used for the card number and other sensitive data fields and should be <div> elements. Data inputs are for things like the payment amount or other data fields that don't contain sensitive data and can be a standard html <input>s.

Both input types require the pl-input html attribute.

Secured Inputs

Secured inputs need to be a <div> element type with the pl-input attribute.

Add pl-inputs to your form

<form pl-form="payment">
  <div pl-input="card"></div>
</form>

Secure input types include:


Data Inputs

Data inputs are standard <input> elements with the pl-input attribute for any data field that should be included in the request to Payload.

Example of amount data input

<form pl-form="payment">
  <input type="hidden" pl-input="amount" value="10.00">
  <div pl-input="card"></div>
</form>


Data inputs can be any attribute in the object tree, some common fields include:

3) Initialize with JavaScript

Create a Payload.Form

<script>
Payload('test_client_key_....')
new Payload.Form(document.getElementById('checkout-form'))
</script>

After the form and the inputs have been created, initialize the form by passing the form element to a new Payload.Form object using Payload's JavaScript interface.


Initialize with static data fields

You can initialize the form with static data fields to be included with the other input fields when creating the object.

<script>
Payload('test_client_key_....')
new Payload.Form({
    form: document.getElementById('checkout-form'),
    payment: {
        processing_id: '<processing id here>',
        description: 'Payment description'
    }
})
</script>