Click to Pay - JavaScript SDK

To use Click to Pay with FatZebra's JavaScript SDK, you call the renderClickToPay function:

fz.renderClickToPay({
  containerId: 'fz-paynow',
  paymentIntent: {
    payment: {
      amount: 100,
      currency: "AUD",
      reference: "ABCD1234",
    },
    verification: hash,
  }
});

The containerId parameter here will render the Click to Pay UI within the element with that ID. An example element would be:

<div id='fz-paynow'></div>

You may wish to pass an email and/or mobile as options to identify a user for the Click to Pay flow

fz.renderClickToPay({
  containerId: 'fz-paynow',
  paymentIntent: {
    payment: {
      amount: 100,
      currency: "AUD",
      reference: "ABCD1234",
    },
    verification: hash,	
  },
  options: {
    email: "[email protected]",
    mobile: "0491 571 266",
  }
});

Calling this function will render an iframe within the specified element on the page. The User Flow here is identical to how it works on the "Hosted Payment Page" version of this form.

For other options, please see the options section below.

Verification hash calculation

The verification hash is calculated by combining the reference, amount and currency into a string. Using the examples above:

ABCD1234:100:AUD

This string is then HMAC-MD5 encrypted using your account's shared secret value. If this secret value was 52ccce5a5c5, then the way to calculate this hash would be:

HmacMD5("ABCD1234:100:AUD", "52ccce5a5c5").toString();

This would result in the hash of:

d02851631e2f836ac10bb33e58687dd4

returnPath option is included in hash calculation

Note: if you also include the returnPath option, it will be appended to the end of your hash calculation:

HmacMD5("ABCD1234:100:AUD:https://example.com/purchase/successful", "52ccce5a5c5").toString();

The calculated hash for this is:

8db3bc06cf4c87f9ea6ed27bfb1ed4f6

Check your verification hashes

You can check your hash calculation method by using our Verification Hash Generator.

PaymentIntent.Payment

The payment intent options indicate the information about the payment once it gets completed.

Option	Description
`amount`	The amount (in cents) for the purchase.
`currency`	The currency for this amount.
`reference`	A unique reference for this purchase.

Options

The renderClickToPay function takes several options.

Name	Type	Description	Default
`hideConfirmButton`	boolean	Determines whether or not to display the "Confirm Payment" button after a card has been selected during the Click to Pay flow.	`false`
`tokenizeOnly`	boolean	Determines whether a card will only be tokenized (when this is set to `true`), or if a payment will be captured (when this is set to `false`) You will want to set this option if you wish to modify the payment amount before capturing the full payment, for example if you're applying a surcharge or a discount.	`false`
`mobile`	string	A mobile number to identify the user for Click to Pay. Used to perform an ID lookup as soon as the component loads. Can be passed at the same time as `email`.	blank
`email`	string	An email address to identify the user for Click to Pay. Used to perform an ID lookup as soon as the component loads. Can be passed at the same time as `mobile`.	blank
`returnPath`	string	(Used only for complete payment flow). A URL for where to return the user back to once their purchase is complete. If you do not provide this option, the default "Receipt Screen" will appear instead.	blank
`returnTarget`	string, either "_self" or "_parent"	(Used only for the complete payment flow). Determines which part of the screen will be redirected once the payment completes. Use `_self` if you wish for the iframe to be redirected, or `_parent` if you want the containing page to be redirected instead.	defaults to _parent behaviour

Subscribing to tokenization events

When using tokenizeOnly, the payments page will issue an event you can subscribe to:

  fz.on('fz.click_to_pay.tokenization.success', function(event) {
    
  });

This event's body and how to use it is explained further in the "Using Tokenized Cards" page.