SubscriptionBridge.JS is a JavaScript API that allows you to embed hosted payment forms into any web site. This gives you a seamless look & feel of the developer's API, but with simplicity and PCI compliance of our hosted payment pages.

What kind of forms may I embed into my web site?

• Onetime Payments
• Update Billing Info
• Checkout (Beta)

Click here to open our online demos. You will see a demo of:

• an embedded payment form
• an embedded “Update Your Billing Information” form

Here's what we recommend you do:

• Check out the demos above to get an idea of the end result
• Download the sample code. \\You can open the samples up in a text editor, such as notepad, and plug in your own parameters. We outline all of the available parameters later in this article.
• Since some of the code samples make use of “server scripts” (for encrypting sensitive information), we do recommend that you have access to a developer when getting started. However, if you are web savvy you can get it done without a programmer. We are here to help!

Once you have downloaded the code samples, you'll want to modify some of the parameters. The following chart contains a list of all available parameters.

The code samples contain a mix of JavaScript, HTML, and - in some cases - server code.

Don't worry, there are only a few bits of server code for encrypting sensitive information.

The following section will take you step-by-step through the process of re-creating the sample files.

1. We add the SB JavaScript library to the web page directly above the closing HTML body tag. (e.g. </body>).

Example:

<script type="text/javascript" language="javascript">
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.subscriptionbridge.com/v2/subscriptionbridge.min.js';g.onreadystatechange=SubscriptionBridge;g.onload=SubscriptionBridge;s.parentNode.insertBefore(g,s)}(document,'script'));
</script>

</body>

2. Second, we add some JavaScript to create the form. We will go step by step and then show you a complete example at the end.

Let's break it down…

It all starts with a basic JavaScript tags:

<script type="text/javascript" language="javascript">	
       ...
</script>

Next, we add the function that will load our form:

var _noconflict = 0;
var SubscriptionBridge = function() {		
     if (_noconflict==0) {
          ...
     }
     _noconflict = 1;	
};

Next, we specify the type of form we want to create. In this example, we will create a form that will allow visitors to the page to post a one-time payment related to their subscription (e.g. add extra space to an online file backup service):

var Transaction = new OnetimePayment(); 

Next, we add the parameters:

Transaction.URL = "https://www.subscriptionbridge.com/v2/OnetimePayment";
Transaction.ID = "mydiv";
Transaction.Guid = "UVAXSW919201103417";
Transaction.Description = 'Add 5GB of Storage';
Transaction.Amount = '5.00';
Transaction.Currency = 'EUR';
Transaction.Language = 'en';
Transaction.ReturnURL = 'https://www.my_domain.com/v2/onetimepayment.php';
Transaction.Signature = 'you cannot tamper with this form';		
Transaction.IsProrated = 'False';
Transaction.IsRecurring = 'False';
Transaction.PassThrough = 'val | val2 | val3 | val4';
	

Lastly, we call the Open method to load the form into our “div”.

Transaction.Open();

When we put that all together, we get something that looks like this:

<script type="text/javascript" language="javascript">	
	var _noconflict = 0;
	var SubscriptionBridge = function() {		
		if (_noconflict==0) {
			
                     var Transaction = new OnetimePayment(); 
				Transaction.URL = "https://www.subscriptionbridge.com/v2/OnetimePayment";
				Transaction.ID = "mydiv";
				Transaction.Guid = "UVAXSW919201103417";
				Transaction.Description = 'Add 5GB of Storage';
				Transaction.Amount = '5.00';
				Transaction.Currency = 'EUR';
				Transaction.Language = 'en-US';
				Transaction.ReturnURL = 'https://www.my_domain.com/receipt.php';
				Transaction.Signature = 'my_signature';		
				Transaction.IsProrated = 'False';
				Transaction.IsRecurring = 'False';
				Transaction.PassThrough = 'val | val2 | val3 | val4';

				Transaction.Open();
			}
		_noconflict = 1;	
	};
</script>

3. We add a secure signature to tamper-proof the form. This step is not required for checkout forms, but is required for editing payments and onetime payments.

That means that no programming is required to embed a “Checkout” form into a web-site. However, to embed an “Update Billing Information” form requires some basic knowledge of a programming language such as PHP, ASP.NET, Ruby, etc.

The signature is an encrypted hash of the form values in the following format:

Transaction.Signature = 'my_signature';

View the next section for information creating the signature.

If it seems complicated, don't worry. Our team is standing by to lend you a hand.

The signature is a HMAC/SHA hash of the amount and return URL separated by a pipe.

e.g. Amount|Return_URL

After you form the signature you must encrypt it using HMAC/SHA. You will find encryption samples for PHP, .NET, and Classic ASP in the samples section.

Note, if you are using the SubscriptionBridge API this is the same method used to create your SB API token.

Here are some examples for creating the Signature:

Classic ASP

var_Amount = "1.00"
var_APIKey = "82F3BB4C92D2412694661A28A8454E6"
var_Hash = var_Amount & "|" & "https://www.my_domain.com/receipt.asp"
var_Signature = hex_hmac_sha1(var_APIKey, var_Hash)