This is the guide for advanced options when creating a URL query string.  To utilize a Hosted Payment Page, Resellers will need to enable the rights for the users they wish to have access to editing the look and feel of the page and integrators will need to authenticate and compile a URL with Query String Parameters to redirect the website user to the Hosted Payment Page.

The below information explains all the needed steps to complete and use a Hosted Payment Page.

User Setup Steps in MyBridgePay

1. Ensure the user that needs access to the Hosted Payment Page setup screen has a role attached that allows the Hosted Payment Page Tab to appear.

   1. To setup a Role/Right, you must be logged in as a reseller user and navigate to the Admin Module.

   2. Create or edit an existing role, add the “Hosted Payment Page Tab” right.

   3. Assign the role to any user you want to have access to configure their Hosted Payment Page.

2. Ensure the user that needs access to the Hosted Payment Page setup screen has a role attached that allows the Account Management Module to appear.

   1. To setup a Role/Right, you must be logged in as a reseller user and navigate to the Admin Module.

   2. Create or edit an existing role, add the “Hosted Payment Page Tab” right.

   3. Assign the role to any user you want to have access to configure their Hosted Payment Page.

Hosted Payment Page Setup Steps

For a Merchant Account to use a Hosted Payment page, they will need to follow these steps to set it up in MyBridgePay:

1. Login to MyBridgePay with a user that has the Hosted Payment Page Tab right enabled.

2. Navigate to Account Management >> Drill Down to the Merchant Account Level >> Click on the Processing Applications Tab

3. Toggle ON the Hosted Payment Page option

4. Click Manage API keys

5. Click + Create New Key

6. Set to Never Expires or choose a date for the key to expire if the Hosted Payment Page to only be available for a limited time

7. Copy down the Public Key, Application and OrganizationID to use in integrating you Hosted Page

8. Click Save

9. Click Save again in the Boarding Checklist column to save the Processing Applications screen

10. Navigate to Account Management >> Drill Down to a Merchant Account >> Click the Hosted Payment Page tab

11. Edit the Hosted Payment Page Configuration screen to your liking.

12. Click Save

*To enable Mastercard Click to Pay please follow these steps https://bridgepaynetwork.atlassian.net/wiki/spaces/DC/pages/303038488/Hosted+Payment+Page+-+Advanced+Options#Enabling-Click-to-Pay-on-a-Hosted-Payment-Page

Configuration Fields and Descriptions

• Hosted Payment Page Base URL: This is the base URL of the hosted page. This URL with additional Query String Parameters will be used to display the page to the customers. This field will only appear after the Hosted Payment Page configuration is saved.
  Enable iframe support: This toggles iframe support on or off. If enabled, the hosted payment page will allow iframe payment collection for a more seamless payment form on your website. If disabled, no iframe support will be available and any transactions from an iframe will fail.

• iframe Domain URL: This is the domain of the website the iframe payments will be coming from. This field allows for only 1 domain per Hosted Payment Page. If an iframe payment is submitted to BridgePay from a domain that does not match the domain entered in the iframe domain URL field, any iframe payments will fail. This is added security for an iframe Hosted Payment Page.

• iframe Code: This appears if Enable iframe support is enabled. An iframe code is provided and includes the Base URL only. The URL will also need to be updated with Query String Parameters so that the page can be displayed to your customer.

• Page Name: The name of the page. This is not displayed on the Hosted Payment Page.

• Terms and Conditions URL: The Terms and Conditions URL that will be displayed to customers on the Hosted Payment Page. The Terms and Conditions URL is optional and if left blank will not appear on the Hosted Payment Page.

• Privacy Statement URL: The Privacy Statement URL that will be displayed to customers on the Hosted Payment Page. The Privacy Statement URL is optional and if left blank will not appear on the Hosted Payment Page.

• Successful Payment URL: The URL a customer will be taken to when a successful transaction is processed.

• Failed Payment URL: The URL a custom will be taken to when a failed transaction occurs. This could be a decline or any error.

• Page Preview: Clicking this will open a new browser window and display a preview of the Hosted Payment Page with its current settings.

• Page is Live?: This is essentially an on and off toggle. Enabling this will make the Hosted Payment Page Live to customers. Disabling this will make the Hosted Payment Page disabled and not accessible.

• Company Name: The name of your company. Will appear blank if left blank.

• Category: The category of your payment. Will appear blank if left blank.

• Payment Types: This will display checkboxes of the payment types that are setup within the Account Management tab for this Merchant Account. For example, if there is no ACH processor setup on the Merchant Account, the ACH checkbox will not be an option in the Hosted Payment Page configuration. The same rules apply for the credit card brands. If your Merchant Account's credit card processor is not setup with American Express or Discover, those checkboxes will not be an option in the Hosted Payment Page configuration. Only the checked payment types will be allowed on the live Hosted Payment Page.

• Page Logo: This is the logo that will display on the Hosted Payment Page. It is optional. Recommended size is 400x200 pixels.
  Display Divider: This toggle will display or not display the thick divider on the Hosted Payment Page. It will always be the Primary Color if displayed.

• Primary Color: This allows setting the primary branding color. It controls the divider color and the Submit Payment button color.

• Page Background Color: This allows setting the page background color displayed on the Hosted Payment Page.

• Section Background Color: This allows setting the background color of the Payment Information section of the Hosted Payment Page.

• Header Text Color: This allows setting the color of the header text for Payment Details and Payment Information.

• Payment Details Text Color: This allows setting the color of the Company Name, Category and Amount text on the Hosted Payment Page.

• Text Color: This allows setting the color of all other text on the Hosted Payment Page.

There is a Page Preview section that shows the current configuration in real-time as changes are made to the configuration settings.

Integration Setup

Integrators will need to use the following developer guide to authenticate and create URLs. [Add Link to PostMan Guide]

The steps to display a Hosted Payment Page are as follows (and outlined in the PostMan documentation above):

1. Program the PostMan request BridgePayAuthToken with the Public Key, Application and OrganizationID obtained in the above “Hosted Page Setup Steps” step #7 and send the request to obtain the AcquireAuthenticationTokenResult

   1. Example Token: 5f54f351-b0fa-4dcf-b316-b1cd8fa5f014

2. Navigate to MyBridgePay >> Account Management >> Drill Down to a Merchant Account >> Click the Hosted Payment Page tab

3. Copy Hosted Payment Page Base URL

4. Create the full Hosted Payment Page URL (Base URL + Query String Parameters)

   1. See Basic URL Creation steps

5. Customer to open the full URL with Query String Parameters

6. Customer to use the Hosted Payment Page for making their payment

7. Customer redirected to either the Successful Payment URL or Failed Payment URL set in the Hosted Page tab (step #2) depending on the outcome of the transaction

Basic URL Creation

From within MyBridgePay, you can navigate to the following page (Account Management >> Drill Down to the Merchant Account >> Click the Hosted Payment Page tab).  This page will give you your basic page URL.  It will look similar to this:

https://{mySite}/hpplive/paymentpage/{hppId}

To use this URL, you will need to include the amount of the transaction.  You can do this by adding an “?amount=123.45” to the end of the URL as well as include the Authentication Token you received from the above Developer Guide. Example:

UAT:
https://www.bridgepaynetsecuretest.com/hpplive/paymentpage/{hppId}?amount={amount in 00.00 format}&authToken=5f54f351-b0fa-4dcf-b316-b1cd8fa5f014

Production:
https://www.bridgepaynetsecuretx.com/hpplive/paymentpage/{hppId}?amount={amount in 00.00 format}&authToken=5f54f351-b0fa-4dcf-b316-b1cd8fa5f014

Additional Field Sending

Additional information can be captured in the gateway reports and sent to the payment processor.  The additional information will be added after the “?amount=123.45” with an “&” followed by the field you wish to include from your website.  This data will be sent to the MyBridgePay gateway and the connected processor.  The supplied data will not appear on the Hosted Payment Page form as these would be pass-through fields from the checkout process on your website.  Here is a list of the additional fields that can be sent with a URL.  They are all optional fields.

Here is an example URL with all of the additional fields added to it:

UAT:
https://www.bridgepaynetsecuretest.com/hpplive/paymentpage/{hppId}?amount=123.45&invoiceNum=123456789012345678901234&PONum=123456789012345678901234&customerAccountCode=123456789012345678901234&emailAddress=john.smith@example.com&mobilePhone=1234567890&authToken=5f54f351-b0fa-4dcf-b316-b1cd8fa5f014

Production:
https://www.bridgepaynetsecuretx.com/hpplive/paymentpage/{hppId}?amount=123.45&invoiceNum=123456789012345678901234&PONum=123456789012345678901234&customerAccountCode=123456789012345678901234&emailAddress=john.smith@example.com&mobilePhone=1234567890&authToken=5f54f351-b0fa-4dcf-b316-b1cd8fa5f014

Receiving the Response from the Payment

After a payment is processed using the Hosted Payment Page, BridgePay will send the customer to one of two customizable URLs.  Success URL and Failed URL.  BridgePay does not send out payment notification to your customers.  You can email your customers from MyBridgePay reports by viewing a receipt and clicking the email option at the bottom of the receipt.  Alternatively, the Reporting API can be used to capture transaction data.

Using an iframe

You can add a Hosted Payment iframe to your website.  We provide you with the basic iframe in the MyBridgePay gateway.  Additional details like amount, invoice number, PO number and customer ID will need to be added to the iframe code that will be added to your checkout page.  Here is a sample iframe code with all the additional information added:

<iframe id=”BPIframe” 
width=”700%” 
height=”500%” 
src=”https://www.myurl.com/paymentpage/0123456789?amount=123.45&invoiceNum=123456789012345678901234&PONum=123456789012345678901234&customerAccountCode=123456789012345678901234&authToken=5f54f351-b0fa-4dcf-b316-b1cd8fa5f014” 
frameborder=”0″ 
allowfullscreen=”” 
style=”position:absolute; top:0; left: 0″>
</iframe>

Enabling Click to Pay on a Hosted Payment Page

What is Click to Pay? https://www.mastercard.us/en-us/checkout/click-to-pay.html

Enabling Click to Pay on a Merchant Account

1. Navigate to MyBridgePay >> Account Management >> Drill Down to a Merchant Account >> Click the Gateway Configuration tab

2. Toggle ON Enable Click to Pay on the Hosted Payment Page

3. Enter the merchant’s website address

4. Click Save in the Boarding Checklist column

Click to Pay is now enabled on your Hosted Payment Page. Customers will now see an Email and Mobile Phone field on the Hosted Payment Page when checking out. The Email and Mobile Phone fields will do a lookup to determine if there is an existing Click to Pay account for the entered information. Customer can then either use Click to Pay or add their card to Click to Pay for future Click to Pay transactions. Click to Pay does not support ACH transactions.

To manage a Click to Pay account or to pre-enroll, use one of the following Mastercard websites.

Production:
https://src.mastercard.com/profile/enroll

UAT:
https://sandbox.src.mastercard.com/profile/enroll