Handling Results

Once a form submit is triggered, a request is sent to Payload with only the data from the secure inputs within the form. If the request to payload is successful, the form submit proceeds as normal. If the request is unsuccessful, the invalid inputs are shown as invalid.

Successful Result

If the request to Payload is successful, a hidden element containing the new object's id will be embedded into the form. If the pl-form attribute is set to payment then an input with the name pl_transaction_id will be added to the form. If the pl-form attribute is set to payment_method then an input with the name pl_payment_method_id will be added to the form.

<input type="hidden" name="pl_transaction_id" value="<id of new payment>">


Once this input has been added to the form, a form submit is triggered.

Override Form Submit

<script>
var checkout = new Payload.Form({
    form: document.getElementById('checkout-form'),
    autosubmit: false
}).on('processed',function(evt) {
    /*handle response*/
})
</script>

If you want to handle the form in a different way and don't want it to be submitted, you can use the autosubmit: false option when initializing the form. You can watch for the JavaScript events and handle the results in another manner.


Invalid Input

<script>
var checkout = new Payload.Form(document.getElementById('checkout-form'))
    .on('invalid',function(evt) {
        /*handle invalid data*/
        $(evt.target).css({background:'red'})
        alert(evt.message)
    })
    .on('valid',function(evt) {
        /*revert to a valid input*/
        $(evt.target).css({background:'white'})
    })
    .on('error',function(evt) {
        /*handle bad request*/
    })
</script>

If the request to Payload is invalid, the pl-invalid css class will be applied to any invalid inputs. Note: the default invalid css class name can be changed

There is also an invalid and an error event that can be used for custom error handling. The invalid event will only fire if any of the input fields contain invalid values. The error event will trigger any error response from the API request. Please see the errors section for more information on possible error responses.


Declined Payment

<script>
var checkout = new Payload.Form(document.getElementById('checkout-form'))
    .on('declined',function(evt) {
        /*handle declined payment*/
        console.log(evt.status_code)
        alert(evt.message)
    })
</script>

If the payment request to Payload results in a decline, the declined event will fire with a message attribute describing the reason and the decline status code.