Pre-populate Payment Pages 2.0 Form Fields

Input fields displayed on Payment Pages 2.0 forms are available for pre-population for all types of payment methods. In your client code, provide field-value pairs in a JavaScript object and pass them to the Z.render function. Pre-population is not supported for hidden fields.

The following is a sample code that specifies the five credit-card related fields to be pre-filled with the given values.

var prepopulateFields = {
   creditCardAddress1:"123 Any Street",
   creditCardAddress2:"Suite #999",
   creditCardCountry:"USA",
   creditCardHolderName:"John Doe"
};

If you do not want to pre-populate any field in your Payment Page form, declare an empty set, and pass it to Z.render function. For example:

var prepopulateFields = {}
...
 Z.render(
      params,
      prepopulateFields,
      callback
 );

Encrypt to Pre-popluate Restricted Fields

• creditCardNumber

• cardSecurityCode: CVV

• creditCardExpirationYear

• creditCardExpirationMonth

• ipAddress for the Credit Card type Use the field only if you want to send the IP address back to Zuora for the fraud prevention purpose. Both IPv4 and IPv6 are supported.

• bankAccountName for the SEPA and Direct Debit (UK) types

• bankAccountNumber for the SEPA and Direct Debit (UK) types

If the above restricted field values are not encrypted, the fields are not going to be pre-populated in Payment Pages 2.0 forms, and the values are not sent to Zuora. You get an alert to inform that these fields need to be encrypted. For the users who do not use Microsoft Internet Explorer, an error is also logged in the JavaScript console.

Use the RsaEncrypter.encrypt java function defined in the Zuora security library to encrypt the above restricted fields. Include the following line in your Java code to use RsaEncrypter.encrypt :

import com.zuora.rsa.security.encrypt.RsaEncrypter

The below code is a sample implementation of an encryption function. You can also find the sample encryption code in the Payment Pages 2.0 sample code suite on Zuora GitHub site.

import com.zuora.rsa.security.encrypt.RsaEncrypter;
for(Iterator<String> iterator = prepopulateFields.keySet().iterator(); iterator.hasNext(); ) {    
   private static final Set<String> fieldToEncrypt = new HashSet<String>();
   static {
      fieldToEncrypt.add("creditCardNumber");
      fieldToEncrypt.add("cardSecurityCode");
      fieldToEncrypt.add("creditCardExpirationYear");
      fieldToEncrypt.add("creditCardExpirationMonth");
}
String key = iterator.next();
String value = prepopulateFields.get(key);
if(fieldToEncrypt.contains(key)) {
   value = RsaEncrypter.encrypt(value, publicKeyString);
   // For zuora.js version 1.2.0 and later, PCI pre-populate fields are in prepopulateFields.
   prepopulateFields.put(key, value);
}

Cookie Handling

For the inline style with the submit button outside, Payment Pages will keep user's values in cookie only if both of the following conditions satisfy:

• The tenant-level permission, Disable HPM Cookies, is NOT enabled.

• The retainValues parameter is set to true .

In all other cases, the values users enter in Payment Page form will not be cached.

The following requirements must satisfy for the retainValues to correctly work:

• This parameter is used only for the inline style Payment Pages 2.0 forms with the external submit button.

• The retainValues should be used only for the Payment Pages forms that are reloaded after an unsuccessful submission. The first loading of the Payment Page form should not include the retainValues parameter.