To facilitate PCI compliant credit card collections Fusebill provides a AJAX Transparent Redirect endpoint which you can use to securely capture customer’s credit cards. If you are adding the first payment method on a customer, it will be set to the default payment method automatically.

This API action is authenticated with a separate Public API Key. If you do not have that key, please contact Fusebill Support. The Public Key can only be used to authenticate the Transparent Redirect action.

Google reCAPTCHA required.

Fusebill leverages reCAPTCHA technology to ensure payment method data captured is provided by a human and to protect against bots and scripting.

We use Google reCAPTCHA V2 in order to accomplish this.
https://developers.google.com/recaptcha/intro
The basic workflow for how this is accomplished is as follows:

Using Fusebill’s public site key, the client is presented with a captcha widget.
The user then verifies that they are human, starting with a check box. The user may be presented with additional verification steps such as an image recognition task.
The captcha widget then verifies with Google that the user is human, and returns a response token.
That response token is then sent to Fusebill with the payment method data for our system to validate and verify.

Fusebill Environment	reCAPTCHA Public Site Key
Staging (stg-payments.subscriptionplatform.com)	6LcI_GwUAAAAAJZu0VvB68DdxNxb5ZcBIwAX7RVj
Sandbox and Production (payments.subscriptionplatform.com)	6LfVtGwUAAAAALHn9Ycaig9801f6lrPmouzuKF11

Create Credit Card Payment Method

Add Credit Card

POST https://payments.subscriptionplatform.com/api/paymentsv2/

Field Name	Details	Required	Type
`CustomerID`	This is the Fusebill customer ID of the customer you wish to add the card to	Yes	Number
`PublicAPIKey`	This is your public API key. This is found in fusebill account under Settings > Integrations > Transparent Redirect.	Yes	String
`CardNumber`	This is the credit card number.	Yes	Number
`FirstName`	The first name of the cardholder.	Yes	String
`LastName`	The last name of the card holder.	Yes	String
`ExpirationMonth`	Expiration month on the credit card.	Yes	Number
`ExpirationYear`	Expiration on the credit card.	Yes	Number
`CVV`	The credit card verification number.	Yes	Number
`recaptcha`	Recaptcha token response.	Yes	String
`riskToken`	WePay Risk token	No+	String
`clientIp`	Client/Customer IP address	No+	String
`email`	Customer Email address	No+	String
`address1`	First line of payment method address.	No`*`	String
`address2`	Second line of payment method address.	No*	String
`city`	City of the payment method	No*	String
`stateId`	State ID of the Payment method. These can be found by performing a GET to v1/countries	No*	Number
`countryId`	Country ID of the payment method. These can be found by performing a GET to v1/countries	No*	Number
`postalZip`	PostalZip of the payment method	No*	String
`paymentCollectOptions`	Object that allows specifying an amount to collect when creating the card. Only works through Json `{ "collectionAmount": 1.0 }`	No	Object

+ Denotes a field required for Fusebill Payments API Risk Fields
* Denotes fields required for AVS and may be required by your account’s Gateway. These fields are also required if using Fusebill Payments accounts as AVS is mandatory.

Notes:- Address information can optionally be captured as well.

Sample Code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>AJAX Transparent Redirect</title>
		<a href="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js</a>
		
		
		
		
      var verifyCallback = function(response) {
        document.getElementById("mySubmit").disabled = false;
        $('input#recaptcha_token').val(response);
      };
      var expCallback = function () {
        document.getElementById("mySubmit").disabled = true;
        grecaptcha.reset();
      };
      var onloadCallback = function() {
        grecaptcha.render('exampleWithCallback', {
          'sitekey': '',
          'callback': verifyCallback,
          'expired-callback': expCallback
        });
      };
      
			function AJAXTransparentRedirect() {                                 
				var dataString = 'CustomerId='+ $('input#CustomerId').val() + 
						'&PublicApiKey=' + $('input#PublicApiKey').val() + 
						'&SuccessUri='+$('input#SuccessUri').val() +
						'&FailUri='+$('input#FailUri').val() + 
						'&CardNumber='+$('input#CardNumber').val() + 
						'&FirstName='+$('input#FirstName').val() + 
						'&LastName='+$('input#LastName').val() + 
						'&ExpirationMonth='+$('input#ExpirationMonth').val() + 
						'&ExpirationYear='+$('input#ExpirationYear').val() + 
						'&makeDefault='+$('input#MakeDefault').val() + 
						'&Cvv='+$('input#Cvv').val() +
						'&recaptcha=' + $('input#recaptcha_token').val();
				alert(dataString);

				//Set up the request
				var request = $.ajax({
					type: "POST",
					url: "https://stg-payments.subscriptionplatform.com/api/paymentsv2/",                   
					data: dataString 
				});

				//Set up the callback functions
				request.done(function (msg) {
					//$('#response').append("<br><p>success </p>");
					alert("success");
					//document.location.replace = '';
				});

				request.fail(function (jqXHR) {
					// $('#response').append("<br><p>failure</p>");
					alert(parseAndBuildErrorMessage(jqXHR));
					//document.location.replace = '';
					expCallback();
				});
			}

			function htmlEscape(msg) {
			return document.createElement('span')
				.appendChild(document.createTextNode(msg))
				.parentNode
				.innerHTML;
			}

			function buildErrorMessage (errors) {
				if (errors.length == 0) {
					return "";
				}

				var message;
					if (errors.length > 1) {
						message = "<ul>";

						for (var i = 0; i " + htmlEscape(errors[i].Value) + "</li>";
							}
						}

						message += "</ul>";
					} else {
					var internalErrors = errors[0].Value;
					internalErrors = internalErrors.split("\r\n");

					if (internalErrors.length > 1) {
						message = "<ul>";
						for (var i = 0; i " + htmlEscape(internalErrors[i]) + "</li>";
							}

							message += "</ul>";
						}
					} else {
						message = htmlEscape(errors[0].Value);
					}
				}

				return message;
			}                             

			function parseAndBuildErrorMessage (xhr) {
				if (xhr.status >= 500)
					return "An error occurred, please try again";
				else
					return buildErrorMessage(xhr.responseJSON.Errors);
			}

		
	</head>
	
	<body>
		<form id="allfields">
			<fieldset>
				<div>
				<label for="CustomerId">Customer Id</label>
				<input autofocus="autofocus" id="CustomerId" name="CustomerId" type="text" value="your customer id here" />
				</div>

				<div>
				<label for="PublicApiKey">Public Api Key</label>
				<input id="PublicApiKey" name="PublicApiKey" type="text" value="your key here" />
				</div>

				<div>
				<label for="CardNumber">Card number</label>
				<input id="CardNumber" name="CardNumber" type="text" value="4111111111111111" />
				</div>

				<div>
				<label for="FirstName">First name</label>
				<input id="FirstName" name="FirstName" type="text" value="John" />
				</div>

				<div>
				<label for="LastName">Last name</label>
				<input id="LastName" name="LastName" type="text" value="Doe" />
				</div>

				<div>
				<label for="ExpirationMonth">Expiry month</label>
				<input id="ExpirationMonth" name="ExpirationMonth" type="text" value="12" />
				</div>

				<div>
				<label for="ExpirationYear">Expiry year</label>
				<input id="ExpirationYear" name="ExpirationYear" type="text" value="20" />
				</div>

				<div>
				<label for="Cvv">CVV</label>
				<input id="Cvv" name="Cvv" type="text" value="123" />
				</div>

				<input id="MakeDefault" name="MakeDefault" type="hidden" value="true" />
        <div class="g-recaptcha" id="exampleWithCallback"></div>
        <input id="recaptcha_token" name="recaptcha_token" type="hidden" />
			<fieldset>
		</form>
		
		<input type="button" onCLick="AJAXTransparentRedirect();" value="Submit Card" id="mySubmit" disabled />
		<div id="response"/>
	</body>
</html>
    
<a href="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit">https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit</a>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

<!DOCTYPE html>

<head>

<title>AJAX Transparent Redirect</title>

<a href="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js</a>

var verifyCallback = function(response) {

document.getElementById("mySubmit").disabled = false;

$('input#recaptcha_token').val(response);

};

var expCallback = function () {

document.getElementById("mySubmit").disabled = true;

grecaptcha.reset();

};

var onloadCallback = function() {

grecaptcha.render('exampleWithCallback', {

'sitekey': '',

'callback': verifyCallback,

'expired-callback': expCallback

});

};

function AJAXTransparentRedirect() {

var dataString = 'CustomerId='+ $('input#CustomerId').val() +

'&PublicApiKey=' + $('input#PublicApiKey').val() +

'&SuccessUri='+$('input#SuccessUri').val() +

'&FailUri='+$('input#FailUri').val() +

'&CardNumber='+$('input#CardNumber').val() +

'&FirstName='+$('input#FirstName').val() +

'&LastName='+$('input#LastName').val() +

'&ExpirationMonth='+$('input#ExpirationMonth').val() +

'&ExpirationYear='+$('input#ExpirationYear').val() +

'&makeDefault='+$('input#MakeDefault').val() +

'&Cvv='+$('input#Cvv').val() +

'&recaptcha=' + $('input#recaptcha_token').val();

alert(dataString);

//Set up the request

var request = $.ajax({

type: "POST",

url: "https://stg-payments.subscriptionplatform.com/api/paymentsv2/",

data: dataString

});

//Set up the callback functions

request.done(function (msg) {

//$('#response').append("<br><p>success </p>");

alert("success");

//document.location.replace = '';

});

request.fail(function (jqXHR) {

// $('#response').append("<br><p>failure</p>");

alert(parseAndBuildErrorMessage(jqXHR));

//document.location.replace = '';

expCallback();

});

}

function htmlEscape(msg) {

return document.createElement('span')

.appendChild(document.createTextNode(msg))

.parentNode

.innerHTML;

}

function buildErrorMessage (errors) {

if (errors.length == 0) {

return "";

}

var message;

if (errors.length > 1) {

message = "<ul>";

for (var i = 0; i " + htmlEscape(errors[i].Value) + "</li>";

}

message += "</ul>";

} else {

var internalErrors = errors[0].Value;

internalErrors = internalErrors.split("\r\n");

if (internalErrors.length > 1) {

message = "<ul>";

for (var i = 0; i " + htmlEscape(internalErrors[i]) + "</li>";

}

message += "</ul>";

}

} else {

message = htmlEscape(errors[0].Value);

}

return message;

}

function parseAndBuildErrorMessage (xhr) {

if (xhr.status >= 500)

return "An error occurred, please try again";

else

return buildErrorMessage(xhr.responseJSON.Errors);

}

</head>

<body>

<div>

<label for="CustomerId">Customer Id</label>

</div>

<div>

<label for="PublicApiKey">Public Api Key</label>

</div>

<div>

<label for="CardNumber">Card number</label>

</div>

<div>

<label for="FirstName">First name</label>

</div>

<div>

</div>

<div>

<label for="ExpirationMonth">Expiry month</label>

</div>

<div>

<label for="ExpirationYear">Expiry year</label>

</div>

<div>

</div>

</form>

</body>

</html>

<a href="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit">https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit</a>

Sample Response

{
    "maskedCardNumber" : "************1111",
    "cardType" : "Visa",
    "expirationMonth" : 10,
    "expirationYear" : 23,
    "customerId" : 50975,
    "firstName" : "a",
    "lastName" : "a",
    "address1" : null,
    "address2" : null,
    "countryId" : null,
    "country" : "",
    "stateId" : null,
    "state" : "",
    "city" : null,
    "postalZip" : null,
    "makeDefault" : true,
    "id" : 5933,
    "uri" : null
}

{

"maskedCardNumber" : "************1111",

"cardType" : "Visa",

"expirationMonth" : 10,

"expirationYear" : 23,

"customerId" : 50975,

"firstName" : "a",

"lastName" : "a",

"address1" : null,

"address2" : null,

"countryId" : null,

"country" : "",

"stateId" : null,

"state" : "",

"city" : null,

"postalZip" : null,

"makeDefault" : true,

"id" : 5933,

"uri" : null

}

Fusebill Payments

When using Fusebill Payments as your gateway processing account, some additional processing and data is required.

These are the ClientIP and a Risk token.

Additional information is available here.

Fusebill Test Gateways

Available here.

Tag: fusebill

Fusebill AJAX Transparent Redirect

Google reCAPTCHA required.

Create Credit Card Payment Method

Add Credit Card

Fusebill Payments

Fusebill Test Gateways