Tokenisation with CaptureJs

Pinch uses client-side tokenisation of payment details, so your clients directly send details to the Pinch API. This allows you to bypass your own server infrastructure and send the credit card details from the user's device directly to us, alleviating you of any PCI requirements.

Embed the Pinch CaptureJs script

<script src="https://web.getpinch.com.au/capture/capture.bundle.js"></script>

Create the Pinch.Capture object that will be used for tokenisation.

Use your Merchant Publishable key here (This can be found in the API Keys section of the developer portal)

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

Tokenise a Credit Card or a Bank Account with the createToken function.

To tokenise either a Credit Card or a 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 string containing the token
    // that can be sent to your own API to then make a call to the Pinch API for either
    // a Payments endpoint or to create a Payment Source
});

Bank Account

Bank Account tokenisation requires the folling 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 string containing the token
    // that can be sent to your own API to then make a call to the Pinch API for either
    // a Payments endpoint or to create a Payment Source
});

Using the Token

Once you have a token it can then be used in a number of different ways.

Using the Realtime Payment Endpoint to execute a transaction immediately.
Using the Create or Update Payment Endpoint to schedule a future payment.
Using the Create Payment Source Endpoint to save a Payment Source against a Payer for automatic payments.