Update Credit Card Payment Method

This endpoint is for updating a credit card via basic transparent redirect. Unlike the AJAX version, this endpoint will return a stream of HTML to display during processing. This means the response's Transfer-Encoding header is 'chunked' and the Content-Type header is 'text/html; charset=utf-8'.

The page sends data via HTML form action, then the user is shown a processing message, then the user is taken to one of two URLs (success/failure).

📘

Update Credit Card

POSThttps://payments.subscriptionplatform.com/v2/payments/edit

Request Parameters

PropertyTypeDescriptionRequired
customerIDNumberThis is the Stax Bill generated customer ID of the customer you wish to add the card to.Yes
IdNumberThis is theStax Bill generated payment method ID for the credit card being updatedYes
publicApiKeyStringThis is your public API key. It can be found under Settings > Integrations > Transparent RedirectYes
successURIStringThis is the URI you want to redirect to on success.Yes
failURIStringThis is the URI you want to redirect to on failure.Yes
cardNumberStringThis is the credit card numberYes
firstNameStringThis is the first name of the cardholder.
**: "POST https://payments.
Yes
lastNameStringThis is the last name of the cardholder.
**": "POST https://payments
Yes
expirationMonthNumber (1-12)This is the month the credit card expires.Yes
expirationYearNumberThis is the year the credit card expires. format: YYYes
cvvStringThe 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
emailStringoptional
makeDefaultBooleanIf true, forces this payment method to become the customer's default.Optional. False by default
recaptchaStringThe recaptcha token response.Yes
address1StringStandard line 1 of an address. This is the cardholder's address. riptionplatform.com/v2/paymConditional**
address2StringStandard line 2 of an address. This is the cardholder's address. riptionplatform.com/v2/paymConditional**
cityStringThis is the city for the cardholder's address. https://payments.subscriptiConditional**
stateIdNumberThis is the Stax Bill generated state code. Call Read Country ID to find the appropriate code. This is for the state of the cardholderConditional**
countryIdNumberThis is the Stax Bill generated country code. Call Read Country ID to find the appropriate code. This is for the cardholder's country.Conditional**
postalZipStringThe postal code or zip code of the cardholder.Conditional**
paymentCollectOptionsObject. Defined BelowIf the card is validated successfully, this object is used to collect a specified amountOptional

*For a full explanation, see Stax Bill Payments API Risk Fields
**These fields are required if Address Verification Services (AVS) are being used. They may also be required depending on your account's credit card gateway.

Payment Collect Options Object

PropertyTypeDescription
collectionAmountDecimalThe amount to be collected
🚧

Security - Public API Key

As 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

POST https://payments.subscriptionplatform.com/v2/payments/edit?CustomerId=12345678&Id=999&PublicApiKey=123-abc-456-def&SuccessUri=https%3A%2F%2Fwww.mywebsite.com%2Fsuccess%3FqueryStringKey%3DqueryStringValue&FailUri=https%3A%2F%2Fwww.mywebsite.com%2Ffail%3FqueryStringKey%3DqueryStringValue&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.50
POST https://payments.subscriptionplatform.com/v2/payments/edit
{
  "customerId": 12345678,
  "Id":99,
  "PublicApiKey":"123-abc-456-def",
  "successURI":"https://www.mywebsite.com/success?queryStringKey=queryStringValue",
  "failURI":"https://www.mywebsite.com/fail?queryStringKey=queryStringValue",
  "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
  }
}

Initial Response

The stream of HTML returned to the client's browser will start with an indication that the request is being processed:

Your request is being processed, please do not press the back button.

Your request is being processed, please do not press the back button.

Here is the raw HTML:

<!DOCTYPE html>
<html>
<head>
<title>Your request is being processed, please do not press the back button.</title>
</head>
<body>
<div style="width: 400px; border: 1px solid #000000; padding: 0 1em;">
<h1 style="font-family:"Lucida Console", Monaco, monospace">Your request is being processed, please do not press the back button. <img src="/Content/images/ajax-loader.gif" /></h1>
</div>

In addition, you will receive the following parameters in the success/failure URL when the call redirects:

Field NameDetails
customerIDThis is the Stax Bill customer ID of the customer you added the card to.
successThis boolean indicates whether the action succeeded or failed.
paymentMethodIdThis is the numeric Payment Method ID of the newly added payment method (credit card). You can use this to process a payment for this customer. Alternatively, you can simply use the paymentCollectOptions.collectionAmount to collect upon validation.
📘

These fields will return in the following format:

www.my-success-or-failure-url.com?customerId=32607&success=True&paymentMethodId=1410

🚧

Note

Editing 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.

In addition, you can add URL parameters to the success and failure URLs. We will pass those through the call process, and then out as URL parameters on the other end. An example of this would be to include this parameter "?price=57.95" on the success URL. This would look something like this "www.my-success-url.com?price=57.95". Normally, the parameters are set by a script on your website. Having additional parameters, such as price, would allow you to take actions on the success or failure page. For example, when using the customer ID and payment method ID and the 'price' parameter to automatically charge the customer the price of their service.

Google ReCAPTCHA

Stax Bill leverages reCAPTCHA technology to ensure that 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 Stax Bill with the payment method data for our system to validate and verify.

Stax Bill EnvironmentreCAPTCHA Public Site Key
Staging (stg-payments.subscriptionplatform.com)6LcI_GwUAAAAAJZu0VvB68DdxNxb5ZcBIwAX7RVj
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 a secret key; you’ll need both.

  • Log in to your Stax Bill account and go to Settings > Integrations > Transparent Redirect
    https://admin.staxbill.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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test Transparent Redirect</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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;
		};
		var onloadCallback = function() {
			grecaptcha.render('exampleWithCallback', {
				'sitekey': '<site key>', //replace with Stax Bill google public key
				'callback': verifyCallback,
				'expired-callback': expCallback
			});
		};
	</script>
</head>
<body>
    
    <h1>Test Basic Transparent Redirect</h1>

    <form action="https://payments.subscriptionplatform.com/v2/payments/edit" method="post">
      
        <fieldset>
            <div>
                <label for="CustomerId">Customer Id</label>
                <input autofocus="autofocus" id="CustomerId" name="CustomerId" type="text" value="" />
            </div>
            
            <div>
                <label for="Id">Payment Method Id</label>
                <input autofocus="autofocus" id="Id" name="Id" type="text" value="" />
            </div>
            
            <div>
                <label for="PublicApiKey">Public Api Key</label>
                <input id="PublicApiKey" name="PublicApiKey" type="text" value="" />
            </div>
            
            <div>
                <label for="SuccessUri">Success Uri</label>
                <input id="SuccessUri" name="SuccessUri" type="text" value="https://www.success.com" />
            </div>
            
            <div>
                <label for="FailUri">Fail Uri</label>
                <input id="FailUri" name="FailUri" type="text" value="https://www.failed.com" />
            </div>
        </fieldset>

        <br />

        <fieldset>
            <div>
                <label for="CardNumber">Card number</label>
                <input id="CardNumber" name="CardNumber" type="text" value="4242424242424242" />
            </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">Make Default</label>
				        <input id="MakeDefault" name="MakeDefault" type="text" value="true" />
			    </div>
          
          <div>
				<label for="PaymentCollectOptions.collectionAmount">Payment Collect Options Collection Amount</label>
				<input id="PaymentCollectOptions.collectionAmount" name="PaymentCollectOptions.collectionAmount" type="text" value="1.50" />
			  </div>
      
        </fieldset>
        
        <br/>

        <fieldset>
            <div>
                <label for="Address1">Address 1</label>
                <input id="Address1" name="Address1" type="text" value="" />
            </div>
                
            <div>
                <label for="Address2">Address 2</label>
                <input id="Address2" name="Address2" type="text" value="" />
            </div>
            
            <div>
                <label for="City">City</label>
                <input id="City" name="City" type="text" value="" />
            </div>
            
            <div>
                <label for="CountryId">Country</label>
                <input id="CountryId" name="CountryId" type="text" value="" />
            </div>
                
            <div>
                <label for="StateId">State</label>
                <input id="StateId" name="StateId" type="text" value="" />
            </div>
            
            <div>
                <label for="PostalZip">Postal / Zip code</label>
                <input id="PostalZip" name="PostalZip" type="text" value="" />
            </div>
            
             <div class="g-recaptcha" id="exampleWithCallback"></div>
            <input id="recaptcha_token" type="hidden" name="recaptcha_token" />
            
        </fieldset>
        <br/>
        <input type="submit" id="mySubmit" disabled />
    </form>

</body>
</html>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer> </script>