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:

containerIdstringThe id of the HTML div element where the Hosted Payment Page iframe will be renderedrequired
customerCustomerSee Customerrequired
paymentIntentPaymentIntentSee PaymentIntentrequired
options.buttonTextstringSpecifies the text to be displayed for the submit button (e.g. Pay Now or Submit)

Only applicable when hideButton is false
options.cardsstring, comma separatedSpecifies 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


!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
options.cssstringHTTPS URL for external CSS. This must be a valid HTTPS URL that serves valid CSS. If specified, cssSignature is also required.optionalempty
options.cssSignaturestringHMAC-MD5 of the css URL with the shared secret to sign the requestoptionalempty
options.hideButtonbooleanHides the button from the checkout form for when the checkout should be triggered by a purchaseoptionalfalse
options.hideCardHolderbooleanHides the card holder entry field. If provided, needs to be in the verification hash calculation.optionalfalse
options.logoUrlstringHTTPS URL for the merchant logo. This must be a valid HTTPS URL that serves an image file.optionalempty
options.showEmailbooleanIndicates whether to show and require the email field or notoptionalfalse
options.showExtrasbooleanIndicates whether to display the invoice number and the amount to the customeroptionalfalse
options.tokenizeOnlybooleanWhen 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.optionalfalse
options.enableScabooleanWhen 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
options.challengeWindowSizestringThe 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)
const fz = new FatZebra({
  username: "MerchantXYZ"

  containerId: "fz-paynow",
  customer: {
    firstName: 'Captain',
    lastName: 'America',
    email: '[email protected]',
    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