Setup the Hosted Payment Form

In order to set up the hosted payment form, you’ll need to do one simple change to your checkout page. You will need to link a script tag to the end of the <head> tag of your HTML, and then you should make sure to pass the right parameters to inside the plugin.

Linking our script to your page

Grab the following snippet and paste it to the last line before closing the <head> tag on your page.

<script async src="https://js.paycertify.com/paycertify.min.js?key=YOUR_PUBLISHABLE_KEY
  &hostedform=true
  &amount=YOUR_AMOUNT
  &formreturnurl=YOUR_RETURN_URL
  &formcontainer=YOUR_HTML_TAG_WHERE_SHOULD_PLACE_THE_FORM
"></script>

Avalilable options

Key Attribute Presence Description Type
key Mandatory The Publishable Key you would like to use. hex, e.g.: AAAA1AC7B73034AFF9975B4CE89D2BF471921CRU
hostedform Mandatory To use our Hosted Payment Form Boolean, default: false
formreturnurl Mandatory The URL to be redirected after the transaction is processed String, eg: /processing
formcontainer Mandatory The HTML tag where the Hosted Payment Form will be inserted.
You can use a class or id to identify the HTML tag
String, default: null
amount Mandatory The amount to be charged from the client Number, default: 0

This will insert our branded Hosted Payment Form inside your checkout page.

A sample, very minimalistic checkout page HTML could be represented through the following HTML:

<!doctype html>
<html>
  <head>
    <title>paycertify.js</title>
    <script async src="https://js.paycertify.com/paycertify.min.js?key=YOUR_PUBLISHABLE_KEY
      &hostedform=true
      &amount=10
      &formreturnurl=/processing
      &formcontainer=#container
    "></script>
  </head>
  <body>
    <h1> Checkout </h1>

    <div id="container">
      <!-- The Hosted Checkout Page will be placed here -->
    </div>
  </body>
</html>

The result should be something like that:

All the fields flagged as mandatory must be present with every request, otherwise this can lead to product usage with invalid data, which wouldn’t allow you to get the benefits from using the plugin, or even worse: declining every single transaction you try. Make sure to test your integration throughouly before going live.