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.