Welcome to Zuora Product Documentation

Explore our rich library of product information

Construct Your HTML Form for Direct POST

Learn how to construct an HTML form for a Payment Page using the Direct POST method.

To build an HTML form for a Payment Page:

  1. Add <form> element for the Payment Page.
  2. Include the following attributes and a list of <input> elements to the Payment Page <form> .
  3. Use <input> elements to include Payment Page fields that you need to collect the payment information. The fields to be included should match the fields that were enabled in the Payment Page configuration in the Zuora application. See Direct POST Form Fields for Payment Pages 2.0 for the supported fields.

The following is an example HTML Form for Payment Pages 2.0 of the credit card payment type:

<form name="Payment2Form" action="https://apisandbox.zuora.com/apps/PublicHostedPageLite.do" method="post">
   <input type="hidden" name="method" value="submitPage"/>
   <input type="hidden" name="id" value="<[page id]>"/> 
   <input type="hidden" name="tenantId" value="<[tenant id]>"/> 
   <input type="hidden" name="token" value="<[token]>"/> 
   <input type="hidden" name="signature" value="<[signature]>"/> 
   <input type="hidden" name="host" value="<[host domain]>"/> 
   <input type="hidden" name="field_key" value="<[public key]>"/> 
   <input type="hidden" name="encrypted_fields" value="#field_creditCardNumber#field_cardSecurityCode#field_creditCardExpirationMonth#field_creditCardExpirationYear"/>
   <input type="hidden" name="encrypted_values" value="<[encrypted values]>"/>
   <input type="hidden" name="field_style" value="iframe"/> 
   <input type="hidden" name="field_passthrough1" value="<[pass through value]>"/> 
   <input type="text" name="field_creditCardType" value="<[card type]>"/>
   <input type="text" name="field_creditCardHolderName" value="<[cardholder name]>"/>
   <input type="text" name="field_creditCardCountry" value="<[country]>"/>
   <input type="text" name="field_creditCardState" value="<[state]>"/>
   <input type="text" name="field_creditCardAddress1" value="<[address1]>"/>
   <input type="text" name="field_creditCardAddress2" value="<[address2]>"/>
   <input type="text" name="field_creditCardCity" value="<[city]>"/>
   <input type="text" name="field_creditCardPostalCode" value="<[postal code]>"/>
   <input type="text" name="field_phone" value="<[phone]>"/>
   <input type="text" name="field_email" value="<[email]>"/>
</form>