Update Credit Card Payment Method
This endpoint is for updating a credit card via AJAX transparent redirect. Unlike the basic version, this endpoint will not return any HTML and does not take a success/failure URL. This grants more flexibility for handling the response to the call.In order to succeed, this call must be made from a whitelisted domain. Please contact Stax Bill support to add or remove a domain from this whitelist. You can view the whitelisted domains for your account under Settings > Integrations > Transparent Redirect
Update Credit Card
Request Parameters
| Property | Type | Description | Required |
|---|---|---|---|
customerID | Number | This is the Stax Bill generated customer ID of the customer you wish to add the card to. | Yes |
Id | Number | This is the Stax Bill generated payment method ID for the credit card being updated | Yes |
publicApiKey | String | This is your public API key. It can be found under Settings > Integrations > Transparent Redirect | Yes |
cardNumber | String | This is the credit card number | Yes |
firstName | String | This is the first name of the cardholder. yments.subscriptionplatform | Yes |
lastName | String | This is the last name of the cardholder. ayments.subscriptionplatfor | Yes |
expirationMonth | Number (1-12) | This is the month the credit card expires. | Yes |
expirationYear | Number | This is the year the credit card expires. format: YY | Yes |
cvv | String | The card verification number. It is a common mistake to take this in as integer and convert it to a string. This will drop leading zeros and can cause validation to fail. | Yes |
makeDefault | Boolean | If true, forces this payment method to become the customer's default. | Optional. False by default |
recaptcha | String | The recaptcha token response. | Yes |
address1 | String | Standard line 1 of an address. This is for the address of the cardholder. m/api/paymentsv2>
| Conditional** |
address2 | String | Standard line 2 of an address. This is for the address of the cardholder. m/api/paymentsv2>
| Conditional** |
city | String | This is the city for the address of the cardholder. ubscriptionplatform.com/api | Conditional** |
stateId | Number | This is the Stax Bill generated state code. Call Read Country ID to find the appropriate code. This is for the state of the cardholder | Conditional** |
countryId | Number | This is the Stax Bill generated country code. Call Read Country ID to find the appropriate code. This is for the country of the cardholder. | Conditional** |
postalZip | String | The postal code or zip code of the cardholder. | Conditional** |
paymentCollectOptions | Object. Defined Below | If the card is validated successfully, this object is used to collect a specified amount | Optional |
Payment Collect Options Object
| Property | Type | Description |
|---|---|---|
collectionAmount | Decimal | The amount to be collected |
Security - Public API KeyAs the name implies, the public API key does not need to be hidden from your end users, and is not for security. This is in contrast to your private API key which is used as authentication for virtually all other Stax Bill API endpoints. Your account's private API key should never be visible to your end users.
Sample Request - x-www-form-urlencoded and JSON
PUT https://payments.subscriptionplatform.com/api/paymentsv2?CustomerId=12345678&Id=999&PublicApiKey=123-abc-456-def&CardNumber=4242424242424242&FirstName=Karen&LastName=Wood&ExpirationMonth=12&ExpirationYear=23&Cvv=123&Address1=10+Dodge+St&Address2=Unit+B&City=Columbia&CountryId=124&StateId=1&PostalZip=V9C9V9&MakeDefault=true&Recaptcha=abc123def456&paymentCollectOptions.collectionAmount=0.50PUT https://payments.subscriptionplatform.com/api/paymentsv2
{
"customerId": 12345678,
"Id":99,
"PublicApiKey":"123-abc-456-def",
"cardNumber": "4242424242424242",
"firstName": "Karen",
"lastName": "Wood",
"expirationMonth": 2,
"expirationYear": 23,
"cvv": "123",
"makeDefault": true,
"recaptcha": "abc123def456",
"address1": "10 Dodge St",
"address2": "Unit B",
"city": "Columbia",
"stateId": 1,
"countryId": 124,
"postalZip": "V9V 9V9",
"paymentCollectOptions":{
"collectionAmount":0.50
}
}
NoteEditing the payment method ID will replace the the specified payment method by deleting it and creating a new one. This means you will have a different payment ID returned as a URL parameter than you passed into the call.
Sample Response
{
"maskedCardNumber": "************4242",
"cardType": "Visa",
"expirationMonth": 2,
"expirationYear": 23,
"customerId": 5547,
"firstName": "Karen",
"lastName": "Wood",
"address1": "10 Dodge St",
"address2": "Unit B",
"countryId": 124,
"country": "CAN",
"stateId": 1,
"state": "Alberta",
"city": "Columbia",
"postalZip": "V9V 9V9",
"isDefault": true,
"externalCustomerId": null,
"externalCardId": null,
"storedInFusebillVault": true,
"email": "[email protected]",
"modifiedDate": "2020-05-22T16:31:14.00248Z",
"originalPaymentMethodId": null,
"id": 104,
"uri": null
}{
"ErrorId": 0,
"HttpStatusCode": 400,
"Errors": [
{
"Key": "Api Error",
"Value": "Api Error: 0\nHttp Status Code: BadRequest\nErrors:\nApi Error - Cannot edit payment method 102 because it has been deleted.\n"
}
]
}Google ReCAPTCHA
Stax Bill 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 Stax Bill'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.
| Stax Bill Environment | reCAPTCHA Public Site Key |
|---|---|
| Sandbox and Production (payments.subscriptionplatform.com) | 6LfVtGwUAAAAALHn9Ycaig9801f6lrPmouzuKF11 |
(Optional) Use Your Own ReCAPTCHA
Rather than use Stax Bill's public site key, you can configure your own.
-
Go to https://www.google.com/recaptcha and create an account. In the register a new site area, add a reCaptcha v2. At this stage you can choose invisible reCAPTCHA if that is your preferred approach. Register. If you don’t want to validate against a domain, you’ll need to open the advanced settings and uncheck the domain name validation.
-
In the Keys section you should have a site key and secret key, you’ll need both.
-
Login to your Stax Bill account and go to Settings > Integrations > Transparent Redirect
https://admin.fusebill.com/Integrations/TransparentRedirectConfigurations. -
Select the “use your ReCAPTCHA” and enter the secret key. Save
-
On your payment method form, just update the site key with your new one.
Sample Code For Testing
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AJAX Transparent Redirect</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>
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': '<Public Site Key>', //replace with fusebill google public key
'callback': verifyCallback,
'expired-callback': expCallback
});
};
function AJAXTransparentRedirect(){
$('#response').html("<p>into function</p>");
var dataString = 'CustomerId='+ $('input#CustomerId').val() +
'&PublicApiKey=' + $('input#PublicApiKey').val() +
'&Id=' + $('input#Id').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();
$('#response').append("<br><p>Data: "+$( "#allfields" ).serialize()+"</p>");
alert(dataString);
//Set up the request
var request = $.ajax({
type: "PUT",
url: "https://payments.subscriptionplatform.com/api/paymentsv2/",
data: dataString,
});
//Set up the callback functions
request.done(function(msg)
{
$('#response').append("<br><p>success</p>");
});
request.fail(function(jqXHR)
{
$('#response').append("<br><p>failure</p>");
});
}
</script>
</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="Id">Payment Method Id</label>
<input autofocus="autofocus" id="Id" name="Id" type="text" value="your payment method 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="23" />
</div>
<div>
<label for="Cvv">CVV</label>
<input id="Cvv" name="Cvv" type="text" value="123" />
</div>
<div>
<label for="MakeDefault">MakeDefault</label>
<input id="MakeDefault" name="MakeDefault" type="text" value="true" />
</div>
<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"></div>
</body>
</html>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer>
</script>Updated about 1 year ago
