Developer Docs

HppSetupParams

The HppSetupParams object defines how the Hosted Payment Page (HPP) should be displayed via fatzebra.js, as well as setting the PaymentIntent.

HppSetupParams is used in the following methods:

Attribute Type Description Required/Optional Default
containerId string The id of the HTML div element where the Hosted Payment Page iframe will be rendered required
customer Customer See Customer required
paymentIntent PaymentIntent See PaymentIntent required
options.buttonText string Specifies the text to be displayed for the submit button (e.g. Pay Now or Submit)
Only applicable when hideButton is false		 optional empty
options.cards string, comma separated Specifies a whitelist or blacklist of accepted cards.
If the string is prefixed with an exclamation mark ! the cards listed will not be permitted
Possible values are:
AMEX, JCB, VISA, MasterCard, Diners, Discover, China UnionPay
Examples
!AMEX,JCB - both AMEX and JCB are disabled
VISA,AMEX - only enable VISA and AMEX
Note if this field is present it is included in the end of the verification value string		 optional empty
options.css string HTTPS URL for external CSS. This must be a valid HTTPS URL that serves valid CSS. If specified, cssSignature is also required. optional empty
options.cssSignature string HMAC-MD5 of the css URL with the shared secret to sign the request optional empty
options.hideButton boolean Hides the button from the checkout form for when the checkout should be triggered by a purchase optional false
options.hideCardHolder boolean Hides the card holder entry field. If provided, needs to be in the verification hash calculation. optional false
options.hideLogos boolean optional true
options.logoUrl string HTTPS URL for the merchant logo. This must be a valid HTTPS URL that serves an image file (supported file types: PNG, JPEG or GIF). optional empty
options.showEmail boolean Indicates whether to show and require the email field or not optional false
options.showExtras boolean Indicates whether to display the invoice number and the amount to the customer optional false
options.tokenizeOnly boolean When set to true, HPP will only tokenise the card and return the token via fz.tokenization.success event. 3DS/SCA and purchase will not run. optional false
options.enableSca boolean When set to true, 3DS/SCA will run after card tokenisation and before payment is made
When false, a payment will be made after card tokenisation
Please note that 3DS/SCA will not run when both tokenizeOnly and enableSca are set to true		 optional false
options.challengeWindowSize string The sizes are width x height in pixels of the window displayed in the cardholder browser.
2-character long string
Available values are
'01': 250x400
'02': 390x400
'03': 500x600
'04': 600x400
'05': Full page (recommended)		 optional '05'
json Example
const fz = new FatZebra({
  username: "MerchantXYZ"
});

fz.renderPaymentsPage({
  containerId: "fz-paynow",
  customer: {
  firstName: 'Captain',
  lastName: 'America',
  email: 'hello.world@fatzebra.com.au',
  address: '123 Australia Blvd.',
  city: 'Sydney',
  postcode: '2000',
  state: 'NSW',
  country: 'AU'
  },
  paymentIntent: {
  payment: {
    amount: 500,
    currency: "AUD",
    reference: "ref_123490"
  },
  verification: "ver_123480"
  },
  options: { // Hpp display options
  hideButton: false,
  hideLogos: true,
  enableSca: true
  }
});