BlueSnap's Secure Customer Data Fields capture and tokenize your customer's sensitive information, without this data ever touching your server. Secure Customer Data Fields are discrete input fields that give you complete control over the look and feel of your data collection form while giving customers the seamless experience of staying on your website.

How it works

  1. You create a token for the specific session, using a server-to-server API call.
  2. On the checkout form, you call BlueSnap’s JavaScript file.
  3. After the customer completes the form and clicks “Submit”, their personal data is saved in BlueSnap’s database and bound to the token you provided.
  4. Once the form has been submitted, you can use the token to create the customer's merchant account.

Implementing Secure Customer Data Fields

Before you begin, create a form on your website for customers to enter their personal information. Then you can begin implementing Secure Customer Data Fields, which consists of these steps:

  1. Obtain the token for the session
  2. Add the BlueSnap JavaScript file to your form
  3. Add the Secure Customer Data Fields to your form
  4. Initialize the Secure Customer Data Fields with your token
  5. Submit and tokenize the customer's data


Insert the domain for either Sandbox or Production

In all steps below, replace the BLUESNAPDOMAINPATH with the relevant BlueSnap domain:

  • Sandbox:
  • Production:

1. Obtain the token for the session

Obtain the token by sending a server-to-server POST request to:


The response provides the token in the location header. For example:

Note: The token expires after 60 minutes.

2. Add the BlueSnap JavaScript file to your form

In your form, call the BlueSnap JavaScript file by adding the following script.

<script type="text/javascript" src="BLUESNAPDOMAINPATH/web-sdk/4/bluesnap.js"></script>

3. Add the Secure Customer Data Fields to your form

For each piece of information you would like to collect from the customer, you will add an input element to your form with a data-bluesnap attribute. The attribute's value will depend on the specific data element you would like to collect. See the following section for details.

Supported customer data elements

The following table outlines all the supported customer data elements, including the code you can add to your page to collect the information. Be sure to collect all required information so BlueSnap can create a merchant account for the customer.

Data elementCode
Business information
Business namehtml <input data-bluesnap="businessName"/>
Business legal namehtml <input data-bluesnap="businessLegalName"/>
Business product and service descriptionhtml <input data-bluesnap="businessProductAndServiceDesc"/>
Business phonehtml <input data-bluesnap="businessPhone"/>
Business emailhtml <input data-bluesnap="businessEmail"/>
Business websitehtml <input data-bluesnap="businessWebsite"/>
Business typehtml <input data-bluesnap="businessType"/>
Business categoryhtml <input data-bluesnap="businessCategory"/>
Business tax IDhtml <input data-bluesnap="businessTaxId"/>
Business addresshtml <input data-bluesnap="businessAddress"/>
Business cityhtml <input data-bluesnap="businessCity"/>
Business statehtml <input data-bluesnap="businessState"/>
Business suburbhtml <input data-bluesnap="businessSuburb"/>
Business ziphtml <input data-bluesnap="businessZip"/>
Business countryhtml <input data-bluesnap="businessCountry"/>
Business account usernamehtml <input data-bluesnap="businessAccountUsername"/>
Business sales volumehtml <input data-bluesnap="businessSalesVolume"/>
Business registration numberhtml <input data-bluesnap="businessRegistrationNumber"/>
Business trading namehtml <input data-bluesnap="businessTradingName"/>
Business ACN or ABNhtml <input data-bluesnap="businessAcnOrAbn"/>
Bank information
Bank namehtml <input data-bluesnap="bankName"/>
Bank branch codehtml <input data-bluesnap="bankBranchCode"/>
Bank codehtml <input data-bluesnap="bankCode"/>
Bank routing numberhtml <input data-bluesnap="bankRoutingNumber"/>
Bank account numberhtml <input data-bluesnap="bankAccountNumber"/>
Bank BSBhtml <input data-bluesnap="bankBsb"/>
Bank transit numberhtml <input data-bluesnap="bankTransitNumber"/>
Bank institution numberhtml <input data-bluesnap="bankInstitutionNumber"/>
Bank sort orderhtml <input data-bluesnap="bankSortOrder"/>
Bank BIChtml <input data-bluesnap="bankBic"/>
Bank IBANhtml <input data-bluesnap="bankIban"/>
Bank SWIFT or BIC codehtml <input data-bluesnap="bankSwiftOrBICCode"/>
Bank account number or IBANhtml <input data-bluesnap="bankAccountNumberOrIBAN"/>
Bank account typehtml <input data-bluesnap="bankAccountType"/>
Bank cityhtml <input data-bluesnap="bankCity"/>
Bank statehtml <input data-bluesnap="bankState"/>
Bank provincehtml <input data-bluesnap="bankProvince"/>
Bank countryhtml <input data-bluesnap="bankCountry"/>
Bank payout currencyhtml <input data-bluesnap="bankPayoutCurrency"/>
Minimal payout amounthtml <input data-bluesnap="bankMinimalPayoutAmount"/>
Refund reservehtml <input data-bluesnap="bankRefundReserve"/>
Ownership infoYou can collect data for up to 4 business owners. In the code below, replace [n] with an integer 1 through 4.
Business owner first namehtml <input data-bluesnap="owner[n]FirstName"/>
Business owner last namehtml <input data-bluesnap="owner[n]LastName"/>
Business owner date of birthhtml <input data-bluesnap="owner[n]DateOfBirth"/>
Business owner government ID numberhtml <input data-bluesnap="owner[n]GovID"/>
Business owner phonehtml <input data-bluesnap="owner[n]Phone"/>
Business owner addresshtml <input data-bluesnap="owner[n]Address"/>
Business owner cityhtml <input data-bluesnap="owner[n]City"/>
Business owner statehtml <input data-bluesnap="owner[n]State"/>
Business owner ziphtml <input data-bluesnap="owner[n]Zip"/>
Business owner countryhtml <input data-bluesnap="owner[n]Country"/>
Company representative information
Company representative first namehtml <input data-bluesnap="companyRepFirstName"/>
Company representative last namehtml <input data-bluesnap="companyRepLastName"/>
Company representative date of birthhtml <input data-bluesnap="companyRepDateOfBirth"/>
Company representative government IDhtml <input data-bluesnap="companyRepGovID"/>
Company representative phonehtml <input data-bluesnap="companyRepPhone"/>
Company representative addresshtml <input data-bluesnap="companyRepAddress"/>
Company representative cityhtml <input data-bluesnap="companyRepCity"/>
Company representative statehtml <input data-bluesnap="companyRepState"/>
Company representative ziphtml <input data-bluesnap="companyRepZip"/>
Company representative countryhtml <input data-bluesnap="companyRepCountry"/>
Additional information
Service agreement sign datehtml <input data-bluesnap="serviceAgreementDate"/>
Pricing agreement sign datehtml <input data-bluesnap="pricingAgreementDate"/>
Customer's IP addresshtml <input data-bluesnap="merchantIp"/>
Default IPN URLhtml <input data-bluesnap="defaultIPN"/>


data-bluesnap values

The data-bluesnap values must be entered exactly as they appear in the above table in order for your implementation to work.

Below is a form capturing business name and business legal name, only for example purposes. You will need to capture more information in order for BlueSnap to successfully create the merchant account.

<form action="#">
  <label for="businessName">business Name:</label>
  <input id="businessName" name="businessName" data-bluesnap="businessName" placeholder="Business Name" />

  <label for="businessLegalName">business Legal Name:</label>
  <input id="businessLegalName" name="businessLegalName" data-bluesnap="businessLegalName" placeholder="Business Legal Name" />

  <!-- Add additional required inputs...  -->

Required customer data elements

For details on all the data elements you need to include on your form, refer to the Parameters section on the page corresponding to your customer's country:

4. Initialize the Secure Customer Data Fields

After the DOM and the BlueSnap JavaScript file are fully loaded, initialize the Secure Customer Data Fields by calling bluesnap.partnerSecuredCaptureSetup with all the following:

  • The token you created in Step 1
  • A callback function for when the data submission attempt is completed

Your callback function will receive a sdkResponse object containing the data submission result. Your function should detect the result and respond accordingly. For example, if the data submission was successful, you should continue the form submission to your server and create the customer's merchant account.

// Run after DOM and BlueSnap JS are fully loaded
document.addEventListener('DOMContentLoaded', function () {
  bluesnap.partnerSecuredCaptureSetup('TOKEN', function (sdkResponse) {
    if (sdkResponse.code === 1) {
      // Submission was successful
      // Continue form submission to your server and create merchant account...
    } else {
      // Submission resulted in an error or warning
      const { errors, warnings } =;
      console.log('Errors: ', errors);
      console.log('Warnings: ', warnings);


The sdkReponse object will be passed to your callback function and will contain the following:

statusStringThe status of the data submission.

Possible values:
- Success - The data submission was successful. Finish the form submission to your server and create the merchant account.

- Invalid Data - There was an issue with the data passed to BlueSnap. For example, this occurs if an input is missing or invalid. Check for details.

- Server Error - The BlueSnap server encountered a problem. Check for error details.
codeIntegerThe status code of the data submission.

Possible values:
- 1 - When sdkResponse.status is Success

- 15 - When sdkResponse.status is Invalid Data and the warning does not prevent the process from continuing (such as an invalid or missing input). Your data collection and submission process can continue.

- 14040 - When sdkResponse.status is Server Error. The token is expired and needs to be updated.

- All other codes indicate a general BlueSnap server error (sdkResponse.status is Server Error). Check for error details.
infoObjectThis is present if any errors or warnings occurred.

errors - An array of errors
warnings - An array of warnings
  status: 'Invalid Data',
  code: 15,
  info: {
    // if an error or warning occurred
    errors: ['Some error'],
    warnings: ['Some warning']

Possible errors

When sdkResponse.status is 'Server Error', details about the error will be present in Errors prevent the data submission process from continuing.

Token is expiredWhen sdkResponse.code is 14040. The token is expired.Reload the page or implement bluesnap.setTokenProvider (see Updating an expired token).
All other general server errors (when sdkResponse.code >= 400), such as Unauthorized or Server UnavailableThe error message in will have specific details.If the error can't be resolved by checking the error message, please contact BlueSnap Support.

Possible warnings

When sdkResponse.status is 'Invalid Data', details about the warning will be present in Warnings inform you of input conditions you might want to address. Unlike errors, warnings do not prevent your data collection or submission process from continuing.

Warning messageDescriptionSolution
Data BlueSnap Input <given_key> is missingBlueSnap could not find an input value containing the attribute data-bluesnap = ...

For example: 'Data BlueSnap Input owner3Phone is missing'
Ensure the input was properly added to the page or display a message in the UI for the customer to enter a value.
Parameter "..." with value of "..." is invalidOne or more of the input values is invalid.

For example: 'Parameter "bankAccountType" with the value of "savings123" is invalid'
Display a message in the UI for the customer to correct the value.

5. Submit and tokenize the customer's data

When the customer clicks the submit button on your form, submit the customer's data directly to BlueSnap, where it will be securely stored and associated with your token, by calling bluesnap.partnerSecuredCaptureSubmitData.

  .addEventListener('click', function () {

When the data submission attempt is completed, the callback you provided to BlueSnap in Step 4 will be called with the results. If the submission was successful (when sdkResponse.code is 1), then you will continue the form submission to your server and create the customer's merchant account using the token.

Note: After a successful data submission to BlueSnap (when sdkResponse.code is 1), all data within the input fields will be deleted to maintain the customer's confidentiality.

Updating an expired token

To allow BlueSnap to handle token expiration, provide a function that obtains a new token from your server. BlueSnap will automatically call your function when an expired token is detected, preventing an error from occurring. Prior to calling bluesnap.partnerSecuredCaptureSetup, call bluesnap.setTokenProvider with your function. Your function should contact your server to get the token, and then your function should call the provided callback with it.

bluesnap.setTokenProvider((callback) => {
  // 1. Get a new token from your server
    .then((response) => response.json())
    .then((data) => {
      // 2. Pass token to BlueSnap
    .catch((error) => {


All of the styling of the input fields (such as width, height, and border) can be performed as usual via CSS.