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:

card
card_number
expiry
cvc
account_number
routing_number

Input types for Canadian payment methods include:

institution_number
transit_number

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:

amount
processing_id
customer_id
account_holder
billing_address[postal_code]
default_payment_method

Step 3) Create an Intent

curl -X POST "https://api.payload.co/access_tokens" \
  -u secret_key_3bW9JMZtPVDOfFNzwRdfE: \
  -H 'Content-Type: application/json'
  -d '{
    "intent": {
      "payment_form": {
        "payemnt": {
          "amount": 100,
          "description": "Test Payment"
        }
      }
    }
  }'

import payload
pl = payload.Session('secret_key_3bW9JMZtPVDOfFNzwRdfE')

@app.route('/form-token', method='post')
def checkout_redirect():

  client_token = pl.ClientToken.create(
    intent=dict(
      payment_form=dict(
        payment=dict(
          amount=100,
          description='Test Payment'
        )
      )
    )
  )

  return jsonify({'client_token': client_token['id']})

require 'payload'
pl = Payload::Session.new('secret_key_3bW9JMZtPVDOfFNzwRdfE')

get '/form-token/' do

  client_token = Payload::ClientToken.create(
    intent: {
      payment_form: {
        payment: {
          amount: 100,
          description: 'Test Payment'
        }
      }
    }
  )

  json({ client_token: client_token['id'] })
end

<?php

$pl_transaction_id = $_GET['pl_transaction_id'];


$clientToken = Payload\ClientToken::create([
  "intent"=>[
    "payment_form"=>[
      "payment": [
        "amount"=>100,
        "description"=>"Test Payment"
      ]
    ]
  ]
]);

header('Content-Type: application/json; charset=utf-8');
echo json_encode(["client_token": $clientToken->id]);
?>

import payload from 'payload-api'
const pl = payload.Session('secret_key_3bW9JMZtPVDOfFNzwRdfE');

app.get('/form-token', (req, res) => {
  const clientToken = pl.ClientToken.create({
    intent: {
      payment_form: {
        payment: {
          amount: 100,
          description: 'Test Payment'
        }
      }
    }
  });

  res.json({ client_token: clientToken.id });
})

using Payload;

[Route("form-token")]
public IHttpActionResult CheckoutRedirect() {
  var pl = new Payload.Session("secret_key_3bW9JMZtPVDOfFNzwRdfE");

  var client_token = await new pl.ClientToken.create(new {
    intent=new {
      payment_form=new {
        payment=new {
          new {
            amount=100,
            description="Test Payment"
          }
        }
      }
    }
  });

  return Json(new { client_token = client_token.id });
}

To use secure inputs in a form, you need to generate payment_form or payment_method_form intent object. To create an intent, create a ClientToken with a nested payment_form or payment_method_form intent. For more information, see the Authentication section below for a full list of available parameters.

Once the client token is generated, return that to the client and pass that the token value to the Payload function. Now you can initialize the form as shown in Step 4.

4) Initialize with JavaScript

Create a Payload.Form

<script>
// See "Create an Intent" for how to obtain a client token
Payload('generated_client_token')
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.