Tokenisation with CaptureJs

With the Pinch CaptureJS library, payment details are tokenised directly in the user's browser — sensitive card or bank account data never touches your server. This removes your infrastructure from PCI scope.

Embed the Pinch CaptureJS script

<script src="https://cdn.getpinch.com.au/capturejs/pinch.capture.v2.js" integrity="sha384-hglYFSKC4AMA/rAQOGB3OiA8u5ri5F4qNMGgw4I+fggDSlTmPyREcj1J+VGnkAX8" crossorigin="anonymous"></script>

Create a Pinch.Capture instance

Use your Merchant Publishable key here (found in the API Keys section of the Developer Portal):

var capture = Pinch.Capture({
  publishableKey: "pk_test_IPA27NRmeTfCawt00h1Zbt9vitpZEPMH"                
});

Tokenise a Credit Card or Bank Account

Credit Card

Credit Card tokenisation requires the following properties:

• cardNumber - The credit card number
• expiryMonth - The month of the card's expiry (in 2 digit number form ie. January = "01")
• expiryYear - The year of the card's expiry (in 4 digit number form ie. "2025")
• cvc - The verification code found on the back of the credit card.
• cardHolderName - The name of the person who owns the credit card.

capture.createToken({
  sourceType: "credit-card",
  cardNumber: document.getElementById("cardNumber").value,
  expiryMonth: document.getElementById("expiryMonth").value,
  expiryYear: document.getElementById("expiryYear").value,
  cvc: document.getElementById("cvc").value,
  cardHolderName: document.getElementById("cardHolderName").value
}).then(function(result) {
    // result.token is a short-lived string — send it to your server,
    // then use it with the Pinch API to create a Payment or Payment Source.
});

Bank Account

Bank Account tokenisation requires the following properties:

• bankAccountName - The name of the bank account.
• bankAccountRouting - The Routing number of the bank account. Referred to as BSB in Australia, normally the first 6 digits of a New Zealand account number.
• bankAccountNumber - The Bank account number not including the Routing number.

capture.createToken({
  sourceType: "bank-account",
  bankAccountName: document.getElementById("bankAccountName").value,
  bankAccountRouting: document.getElementById("bankAccountRouting").value,
  bankAccountNumber: document.getElementById("bankAccountNumber").value
}).then(function(result) {
    // result.token is a short-lived string — send it to your server,
    // then use it with the Pinch API to create a Payment or Payment Source.
});

Using the token

Once you have a token, you can use it in several ways:

• Pass it to the POST /payments/realtime endpoint to charge the card immediately.
• Pass it to the POST /payments endpoint to schedule a future Payment.
• Pass it to the POST /payers/{payerId}/sources endpoint to save a Payment Source against a Payer for future automatic Payments.

See the full Credit Card example

See the full Bank Account example