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

<form action="#">
  <label for="ecpRoutingNumber">Routing Number:</label>
  <input id="ecpRoutingNumber" name="ecpRoutingNumber" data-bluesnap="ecpRoutingNumber" placeholder="ACH/ECP Routing Number" />

  <label for="ecpAccountNumber">Account Number:</label>
  <input id="ecpAccountNumber" name="ecpAccountNumber" data-bluesnap="ecpAccountNumber" placeholder="ACH/ECP Account Number" />

  <label for="ecpAccountType">Account Type:</label>
  <input id="ecpAccountType" name="ecpAccountType" data-bluesnap="ecpAccountType" placeholder="ACH/ECP Account Type" />
</form>

<form action="#">
  <label for="ccn">credit card number:</label>
  <input id="ccn" name="ccn" data-bluesnap="ccNumber" pattern="^[0-9]{10,26}$" placeholder="1234567890123456" />

  <label for="cvv">cvv:</label>
  <input id="cvv" name="cvv" data-bluesnap="cvv" pattern="^[0-9]{3,4}$" placeholder="123" />

  <label for="exp">expiration date:</label>
  <input id="exp" name="exp" data-bluesnap="expDate" pattern="^[0-9]{2}\/[0-9]{4}$" placeholder="MM/YYYY" />
</form>

<form action="#">
  <label for="last4digits">Credit card (last 4 digits)</label>
  <input id="last4digits" name="last4digits" data-bluesnap=" last4Digits" pattern="^[0-9]{4}$" placeholder="1234" />

  <label for="type">Card type</label>
  <input id="type" name="type" data-bluesnap="ccType" pattern="^[A-Z]{3,}([_][A-Z]{3,}){0,}$" placeholder="VISA" />
</form>

<form action="#">
  <label for="sepaIban">IBAN:</label>
  <input id="sepaIban" name="sepaIban" data-bluesnap="sepaIban" placeholder="DE89370400440532013000" />
</form>

<form action="#">
  <label for="acssRoutingNumber">Routing Number:</label>
  <input id="acssRoutingNumber" name="acssRoutingNumber" data-bluesnap="acssRoutingNumber" placeholder="acssRoutingNumber" />

  <label for="acssAccountType">Account Type:</label>
  <input id="acssAccountType" name="acssAccountType" data-bluesnap="acssAccountType" placeholder="acssAccountType" />

  <label for="acssAccountNumber">Account Number:</label>
  <input id="acssAccountNumber" name="acssAccountNumber" data-bluesnap="acssAccountNumber" placeholder="acssAccountNumber" />
  </form>

Note: `acssAgreementId` is not collected as an HTML input field. Pass it as a numeric value in the `data` object supplied to `bluesnap.securedPaymentCollectorSubmitData`.

<form action="#">
  <label for="becsAccountNumber">Account Number:</label>
  <input id="becsAccountNumber" name="becsAccountNumber" data-bluesnap="becsAccountNumber" placeholder="becsAccountNumber" />

  <label for="becsBsbNumber">BSB Number:</label>
  <input id="becsBsbNumber" name="becsBsbNumber" data-bluesnap="becsBsbNumber" placeholder="becsBsbNumber" />

  <label for="becsAccountName">Account Name:</label>
  <input id="becsAccountName" name="becsAccountName" data-bluesnap="becsAccountName" placeholder="becsAccountName" />

  <label for="becsFinancialInstitution">Financial Institution:</label>
  <input id="becsFinancialInstitution" name="becsFinancialInstitution" data-bluesnap="becsFinancialInstitution" placeholder="becsFinancialInstitution" />

  <label for="becsBranchName">Branch Name:</label>
  <input id="becsBranchName" name="becsBranchName" data-bluesnap="becsBranchName" placeholder="becsBranchName" />
</form>
```
Note: `becsAgreementId` is not collected as an HTML input field. Pass it as a numeric value in the `data` object supplied to `bluesnap.securedPaymentCollectorSubmitData`.

// Run after DOM and BlueSnap JS are fully loaded
document.addEventListener('DOMContentLoaded', function () {
  bluesnap.securedPaymentCollectorSetup(
    'PAYMENT_TOKEN',
    function (sdkResponse) {
      if (sdkResponse.code == 1) {
        // Data submission was a success
        // Continue form submission to your server & complete the transaction
      } else {
        // Data submission resulted in error or warning
        const { errors, warnings } = sdkResponse.info;
        console.log('Errors: ', errors);
        console.log('Warnings: ', warnings);
      }
    },
    false
  );
});

// Run after DOM and BlueSnap JS are fully loaded
document.addEventListener('DOMContentLoaded', function () {
  bluesnap.securedPaymentCollectorSetup(
    'PAYMENT_TOKEN',
    function (sdkResponse) {
      if (sdkResponse.code == 1) {
        // Submission was successful
        const { cardData /*, threeDSecure */ } = sdkResponse;
        console.log('Card Data:', cardData);
        // Continue form submission to your server & complete the transaction
      } else {
        // Submission resulted in an error or warning
        const { errors, warnings } = sdkResponse.info;
        console.log('Errors: ', errors);
        console.log('Warnings: ', warnings);
      }
    },
    false // set to true for 3-D Secure
  );
});

document
  .getElementById('submitButton')
  .addEventListener('click', function () {
    const data = {
      amount: 10,
      currency: 'USD'
    };
    bluesnap.securedPaymentCollectorSubmitData(data);
  });

document
  .getElementById('submitButton')
  .addEventListener('click', function () {
    const data = {
      amount: 10,
      currency: 'CAD',
      acssAgreementId: 12345
    };
    bluesnap.securedPaymentCollectorSubmitData(data);
  });

document
  .getElementById('submitButton')
  .addEventListener('click', function () {
    const data = {
      amount: 10,
      currency: 'AUD',
      becsAgreementId: 67890
    };
    bluesnap.securedPaymentCollectorSubmitData(data);
  });

// Run before calling bluesnap.securedPaymentCollectorSetup
bluesnap.setTokenProvider((callback) => {
  // 1. Get a new token from your server
  fetch('/token')
    .then((response) => response.json())
    .then((data) => {
      // 2. Pass token to BlueSnap
      callback(data.token);
    })
    .catch((error) => {
      console.log(error);
      callback();
    });
});

curl -v -X POST https://sandbox.bluesnap.com/services/2/alt-transactions/ \
-H 'Content-Type: application/json' \
-H 'Accept: application/json' \ 
-H 'Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=' \
-d '
{
  "pfToken": "PAYMENT_TOKEN",
  "amount": 100,
  "currency": "USD",
  "payerInfo": {
    "zip": "12345",
    "firstName": "John",
    "lastName": "Doe",
    "phone": "1234567890"
  },
  "softDescriptor": "ABC COMPANY",
  "authorizedByShopper": true
}'

curl -v -X POST https://sandbox.bluesnap.com/services/2/alt-transactions/ \
-H 'Content-Type: application/json' \
-H 'Accept: application/json' \
-H 'Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=' \
-d '
{
  "pfToken": "PAYMENT_TOKEN",
  "payerInfo": {
    "firstName": "John",
    "lastName": "Doe",
    "country": "FR"
  },
  "amount": 9.65,
  "currency": "EUR",
  "softDescriptor": "ABC COMPANY",
  "authorizedByShopper": true
}'

curl -v -X POST https://sandbox.bluesnap.com/services/2/alt-transactions/ \
-H 'Content-Type: application/json' \
-H 'Accept: application/json' \
-H 'Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=' \
-d '
{
  "pfToken": "PAYMENT_TOKEN",
  "amount": 11,
  "payerInfo": {
    "zip": "12345",
    "firstName": "John",
    "lastName": "Doe",
    "country": "CA"
  },
  "currency": "CAD",
  "authorizedByShopper": true
}'

curl -v -X POST https://sandbox.bluesnap.com/services/2/alt-transactions/ \
-H 'Content-Type: application/json' \
-H 'Accept: application/json' \
-H 'Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=' \
-d '
{
  "pfToken": "PAYMENT_TOKEN",
  "amount": 77,
  "payerInfo": {
    "zip": "12345",
    "firstName": "Boris",
    "lastName": "Britva",
    "country": "AU"
  },
  "currency": "AUD",
  "authorizedByShopper": true
}'

bluesnap.getMandate('SEPA', 'en')
  .then(function (mandateResponse) {
    console.log(mandateResponse);
  });

bluesnap.getMandate('ACSS', 'en')
  .then(function (mandateResponse) {
    console.log(mandateResponse);
  });

bluesnap.getMandate('BECS', 'en')
  .then(function (mandateResponse) {
    console.log(mandateResponse);
  });

json
[
  {
    "translations": [
      {
        "language": "en",
        "translationText": "By signing this mandate form, you authorise the merchant to send instructions to your bank to debit your account and your bank to debit your account in accordance with the instructions from the merchant. \nAs part of your rights, you are entitled to a refund from your bank under the terms and conditions of your agreement with your bank. A refund must be claimed within 8 weeks starting from the date on which your account was debited. By signing this you are confirming that you understand your account information will be securely stored."
      }
    ]
  }
]

json
[
  {
    "region": "Canada",
    "debitType": "ONETIME",
    "agreementName": "Pre-Authorized Debit Agreement",
    "agreementId": 629525,
    "agreementText": "I / we authorize the merchant to debit the bank account I / we have identified on any future purchase that I / we make.\nThe amount debited should equal the checkout amount.\nThe merchant is not required to get my / our authorization for any future sporadic debit.\n\nI / we may revoke this authority at any time, subject to providing notice of 30 days.\nTo obtain a sample cancellation form, or for more information on my / our right to cancel a PAD Agreement, I / we may contact my / our financial institution or visit www.payments.ca.\n\nI / we have certain recourse rights if any debit does not comply with this agreement. For example, I / we have the right to receive reimbursement for any debit that is not consistent with this PAD Agreement.\nTo obtain more information on my / our recourse rights, I / we may contact my / our financial institution or visit www.payments.ca.\n\nI authorize BlueSnap, Inc. to process payments on behalf of the merchant.",
    "status": "UNUSED"
  }
]

json
[
  {
    "region": "Australia",
    "debitType": "ONETIME",
    "agreementName": "Direct Debit Request Service Agreement",
    "agreementId": 629523,
    "agreementText": "By signing a Direct Debit Request, you have authorised us to arrange for your nominated account to be debited according to the agreement we have with you.\n\nChanges by us - We will advise you 14 days in advance of any changes to the Direct Debit arrangements.\n\nChanges by you - For all matters relating to the Direct Debit arrangement, including deferment, stops, cancellations or alteration of any of the arrangements, please contact us.\n\nPlease allow 7 days for the amendments to take effect.\n\nDisputes - If you believe that there has been an error in debiting your account, you should contact us in the first instance to confirm the details so that we can investigate the matter and advise you in writing whether your account has been incorrectly or correctly debited.\nIf we can not resolve the matter, you can still refer it to your Financial Institution and they may lodge a claim on your behalf.\n\nYour responsibility - It is your responsibility to ensure you have sufficient cleared funds available in the account to be debited when payments are due.\n\nReturned Payments - In the event that the debit to your account is returned to us unpaid, you will be notified and will have 7 days to pay the amount. A returned payment fee may apply.\n\nAll customer records and account details will be kept private and confidential and will be disclosed only at the request of the customer or Financial Institution in connection with a claim made to an alleged incorrect or wrongful debit.",
    "status": "UNUSED"
  }
]