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.

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

Payment Form

Set the pl-form attribute

<!-- For making a payment -->
<form id="payload" pl-form="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

<!-- For adding a payment method -->
<form id="payload" pl-form="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

Add pl-inputs to your form

<!-- For making a payment -->
<form id="payload" pl-form="payment">
  <div pl-input="card"></div>
</form>
<!-- For storing a payment method -->
<form id="payload" pl-form="payment_method">
  <div pl-input="card"></div>
</form>

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

Secure input types include:



Data Inputs

Example of data input

<!-- For making a payment -->
<form id="payload" pl-form="payment">
  <input type="hidden" pl-input="amount" value="10.00">
  <div pl-input="card"></div>
</form>
<!-- For storing a payment method -->
<form id="payload" pl-form="payment_method">
  <input type="hidden" pl-input="customer_id" value="{your_customer_id}">
  <div pl-input="card"></div>
</form>

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


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('payload'))
</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

<script>
Payload('test_client_key_....')
new Payload.Form({
    form: document.getElementById('payload'),
    payment: {
        processing_id: '<processing id here>',
        description: 'Payment description'
    }
})
</script>
<script>
Payload('test_client_key_....')
new Payload.Form({
    form: document.getElementById('payload'),
    payment_method: {
        billing_address: {
            postal_code: '11111'
        }
    }
})
</script>

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

To add static fields through javascript, add either a payment object or payment_method object depending on the form type. This object structure should follow the schema of either the Transaction or PaymentMethod object.