Hosted Payments Redirect

You can use the following template to create URLs for redirecting a customer to a Hosted Payments Form.

https://<converge-api-url>?sessionId=<payment-session-id>&publicApiKey=<public-api-key>&merchanAlias=<merchant-alias>

 

The Converge-API-URL is the URL for the environment you are currently using. Typically these will be either:

  • Sandbox: https://uat2.api.converge.eu.elavonaws.com

  • Production: https://api.eu.convergepay.com

On top of that, it will need the following pieces of information:

  • Session ID: This is obtained from creating a payment session. See Server-Side Scripting for more information.

  • Public API Key: This is one of the pieces of information given to you when onboarding.

  • Merchant Alias: This is another piece of information given to you when onboarding.

The Hosted Payments Page supports most modern browsers.
The Hosted Payments Page does not support Internet Explorer and Microsoft Edge.

Your Merchant Alias and Public API Key can be safely stored on-page for your website. However, you will need to generate Session ID from a payment session request and will need to add that information into the template URL before it will work correctly.

Example: A Client-Side Approach

One way to approach executing this redirect is to have a button that initiates the checkout when it's clicked.

Create an HTML button (similar to the following) which invokes a redirect function on click.

<button onclick="hostedRedirect();" id="checkoutButton">Checkout</button>

Then, define a function that the previous button invokes. This function should handle the work of creating a Hosted Payments Page redirect URL and redirects the client's browser to the location. There are multiple ways to make this function; the following function one possible approach.

async function hostedRedirect() {
  const sessionId = await paymentSession(); // A function that returns a payment session ID. See Server Side Scripting for more info.
  const merchantAlias = 'KCDNocKwIM2cypYgzaHCsCk'; // Merchant Alias.
  const publicKey = 'pk_KCDNoX4gzZzKliDNocKwKQ'; // Public API Key.
  
  // Use a string literal to put it all together.
  const redirectUrl = 
`https://https://uat2.hpp.converge.eu.elavonaws.com?sessionId=${sessionId}&publicApiKey=${publicKey}&merchanAlias=${merchantAlias}`;
 
  // Redirect the window to the payment session.
  window.location = redirectURL;
}