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:

renderPaymentsPage

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'

const fz = new FatZebra({
  username: "MerchantXYZ"
});

fz.renderPaymentsPage({
  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
  }
});