Using Hosted Payments Page

🚧

3DS2 via the Hosted Payments is only supported via NoahPay.js. If you are currently using a direct integration with the Hosted Payments Page by creating your own iframe and Hosted Payments Page URL you will need to switch over to NoahPay.js in order to implement 3DS2

Overview

NoahPay's Hosted Payments Page (HPP) provides a seamless way to perform 3DS2 checks on either new or existing cards before a purchase is made.

When your customers submit a payment, the NoahPay Hosted Payments Page form will perform the following operations behind the scenes and emit javascript events so that you can react appropriately:

• Tokenise the card details entered into the Hosted Payments Page
• Perform a 3DS2 check against the card (Note: the enableSca URL parameter must be set to true in order for this to happen, more details in Step 5 below)
• Upon a successful 3DS2 check, HPP will then make a purchase call with the 3DS2 results to process the payment. If the 3DS2 check is unsuccessful, NoahPay.js will emit an event that you can react to.

📘

Before completing the steps below, speak to the NoahPay support team to have 3DS2 enabled on your account

Step 1 - Obtain an OAuth access token

Follow the steps in Obtain an OAuth token to obtain an access token for your checkout session.

Step 2 - Include NoahPay.js on your page

HTML

<script type="text/javascript" src="https://cdn.pmnts-sandbox.io/sdk/v1/NoahPay.js"></script>

Step 3 - Initialise the NoahPay JS SDK

Initialize the NoahPay object in the footer of your page:

JavaScript

// Initialize the NoahPay object in the footer of your page
<script>
const fz = new NoahPay({
  username: "<YOUR MERCHANT USERNAME>"
});

...
</script>

Note: your merchant username can be obtained from the NoahPay Merchant Dashboard.

Step 4 - Subscribe to NoahPay.js events

NoahPay.js will emit various javascript events. Subscribe to the ones relevant to you.

Available events include:

• Validation - for validation errors
• Tokenization - for success or failure of the tokenization of the card data
• SCA - for success or failure of the 3DS2 checks
• Payment - for success or failure of the payment

JavaScript

// Handle validation related errors, e.g. client-side validation
fz.on('fz.validation.error', function(event) {
  // ...
});

// Receive a FZ card token
fz.on('fz.tokenization.success', function(event) {
  // If required you can save the card token in your backend
});

// Handle errors related to payment processing
fz.on('fz.payment.error', function(event) {
  // Show an error message to the customer
});

fz.on('fz.payment.success', function(event) {
  // checkout ends
});

// Handle errors related to SCA
fz.on('fz.sca.error', function(event) {
  // Show an error message to the customer
});

Step 5 - Load Hosted Payments Page

enableSca: true

See HppSetupParams for HPP options.

Note: The customer object is only required when enableSca is set to true.

JavaScript

fz.renderPaymentsPage({
  containerId: "fz-paynow",
  customer: {
    firstName: 'Captain',
    lastName: 'America',
    email: '[email protected]',
    address: '123 Australia Blvd.',
    city: 'Sydney',
    postcode: '2000',
    state: 'NSW',
    country: 'Australia'
  },
  paymentIntent: {
    payment: {
      amount: 500,
      currency: "AUD",
      reference: "ref_123490"
    },
    verification: 'ver_123480' // made up value
  },
  options: { // Hpp display options
    hideButton: false,
    hideLogos: true,
    enableSca: true
  }
});

// Register click event handler to trigger Hosted Payment Page payment flow if
// you have a custom checkout button.
const handler = function() {
  fz.checkout();
}

document.getElementById('checkoutButton').addEventListener('click', handler);