Thursday, November 10, 2016

Payer Site Embedding with JavaScript Plugin

Bill & Pay provides a JavaScript file you can include in your web page that will embed your custom payer site. You will need to have experience working with HTML to get this to work. If you do not have this experience we recommend you hire a web developer to perform this task for you.

The first step is to add the following JavaScript reference to the <head> section of your webpage:

<script src="https://www.billandpay.com/web/billandpayembed.min.js"></script>

Then you must choose a place within the body of your web page where you want the embedded site to appear and place this code:

<div id="embed"></div><script>BillAndPayEmbed('XXXX', 'embed', 'login');</script>

The <div> with an id of "embed" will be the container inside which the payer site will be embedded. You can size and style this <div> however best suites your site's design.

The <script> call to the BillAndPayEmbed function has to be modified for your installation.

First, replace the 'XXXX' parameter with your account's biller number. When you log in to Bill & Pay the top of the page will say "Logged in to biller XXXX". That is your biller number you will put in this function call.

Second, you can optionally change the 'login' parameter to be one of the following three values:

  • 'login' - Shows the login page by default
  • 'enroll' - Shows the payer enrollment page, which is the create user account page, by default
  • 'lookup' - Shows the invoice lookup page by default
That third parameter defines what page will be displayed by default when a customer goes directly to the page on your site that embeds the payer site. If one your customers clicks a Make Payment link in an email Bill & Pay sends them they will be taken directly to the Make Payment page embedded within your web page instead of seeing the default page.

Read our "Payer Site Embedding with Server Side Programming" article for a more technical description of how payer site embedding works.