Build a Payment Form

Creating and submitting the form are critical steps in the merchant integration for a Hosted Payment Session model. The fields in the payer-facing form, including card details and other additional information, are submitted directly to the Hosted Payment Session Service using HTTPS POST.

How to Create a Payment Form

The payment form can contain any of the fields described in the Form Fields Reference section plus any additional fields you wish to use to request information from the payer.

A sample HTML payment form that collects all card details is shown below:

<form action="https://paymentgateway.commbank.com.au/form/<session_id>" method="post">
    <input type="hidden" name="gatewayReturnURL" value="http://www.example.com/example"/>
    Card Number: <input type="text" name="gatewayCardNumber" value="" size="16" maxlength="30"/>
    Card Expiry Month: <input type="text" name="gatewayCardExpiryDateMonth" value="" size="2" maxlength="2"/>
    Card Expiry Year: <input type="text" name="gatewayCardExpiryDateYear" value="" size="4" maxlength="4"/>
    Card Security Code: <input type="text" name="gatewayCardSecurityCode" value="" size="4" maxlength="4"/>
    <input type="hidden" name="gatewayRedirectDisplayBackgroundColor" value="#808000"/>
    <input type="hidden" name="gatewayRedirectDisplayTitle" value="Check Your Submitted Payment Details"/>
    <input type="hidden" name="gatewayRedirectDisplayContinueButtonText" value="Click to Continue"/>
    <input type="submit" value="Continue"/>
</form>

Where:

<session_id> = e.g. SESSION000112345678901234567890 - The session identifier received when the payment session was created in the Create Session step.
http://www.example.com/example - The page on your website where the payer should be redirected. The payer's data will be POSTed to this address after the Hosted Payment Session Service has updated the session and applied validation / masking to the original values.

The labels, for example, "Card Number:" are at your discretion.

Open your payment form in a browser. With formatting, it should look something like this:

Card Number:

Card Expiry Month:

Card Expiry Year:

Card Security Code:

The payment form must be submitted using HTTPS POST as shown in the form above. The POST is submitted directly to the Hosted Payment Session Service.

How to Collect Partial Details Using a Payment Form

You may not want to collect all card details using Hosted Payment Session. For example, you may only want to collect Card Security Code so it may be used in combination with a previously stored card (see Tokenization).

A sample HTML payment form that collects only Card Security Code is shown below:

<form action="https://paymentgateway.commbank.com.au/form/<session_id>" method="post">
    <input type="hidden" name="gatewayReturnURL" value="http://www.example.com/example"/>
    Card Security Code: <input type="text" name="gatewayCardSecurityCode" value="" size="4" maxlength="4"/>
    <input type="hidden" name="gatewayRedirectDisplayBackgroundColor" value="#808000"/>
    <input type="hidden" name="gatewayRedirectDisplayTitle" value="Check Your Submitted Payment Details"/>
    <input type="hidden" name="gatewayRedirectDisplayContinueButtonText" value="Click to Continue"/>
    <input type="submit" value="Continue"/>
</form>

Notes

Ensure fields not requiring payer input are hidden.

Be careful not to include hidden fields that contain sensitive data. For example, do not send the session identifier or the API Password in any field in this form.

Do not include a field on your form named "submit". This will prevent the form from being redirected back to your site via the automated JavaScript post. If a submit button is required via a html input field then either do not set the name attribute, or set the name to something other than "submit".

Do Not Use

<input type="submit" name="submit" value="Continue"/>

Use

<input type="submit" value="Continue"/>

The next step is handling the form response. This step also describes important error handling procedures.

Card Number:
Card Expiry Month:
Card Expiry Year:
Card Security Code: