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

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.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.

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
  }
});