Hosted Payment Form
The PayCertify Hosted Form allows you to inject a checkout form already build and integrated to accept payments on PayCertify inside your checkout page.
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>
||Mandatory||The Publishable Key you would like to use.||hex, e.g.:
||Mandatory||To use our Hosted Payment Form||Boolean, default:
||Mandatory||The URL to be redirected after the transaction is processed||String, eg:
||Mandatory||The HTML tag where the Hosted Payment Form will be inserted.
You can use a class or id to identify the HTML tag
||Mandatory||The amount to be charged from the client||Number, default:
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 displayed 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.