JavaScript Tokenization Examples

Example 1: Process a transaction

In this example we show how to securely collect a customer's credit card and charge it using CVV verification.

Client-side

<html>
<head>
<script type="text/javascript" src="https://www.payjunctionlabs.com/trinity/js/sdk.js"></script>
</head>
<body>

<form id="checkoutForm">
<p id="checkoutFormErrors"></p>

<input type="text" placeholder="First Name"/>
<input type="text" placeholder="Last Name"/>

<input type="text" name="cardNumber" placeholder="Card Number"/>
<input type="text" name="cardExpMonth" placeholder="Card Exp Month"/>
<input type="text" name="cardExpYear" placeholder="Card Exp Year"/>
<input type="text" name="cardCvv" placeholder="Card CVV"/>

<button type="submit">Submit</button>
</form>

<script>
var payJunction = PayJunction('YOUR_PUBLISHABLE_KEY');

document.querySelector('#checkoutForm').addEventListener('submit', function(event) {
event.preventDefault();
document.querySelector('#checkoutFormErrors').textContent = '';

var cardPaymentInformation = {
cardNumber: document.querySelector("[name=cardNumber]").value,
cardExpMonth: document.querySelector("[name=cardExpMonth]").value,
cardExpYear: document.querySelector("[name=cardExpYear]").value,
cardCvv: document.querySelector("[name=cardCvv]").value,
};

payJunction.createToken(cardPaymentInformation)
.then(function(result) {

if (result.tokenId) {
fetch('https://your-server.com/checkout', {
method: 'POST',
body: JSON.stringify({
tokenId: tokenId,
firstName: document.querySelector("[name=firstName]").value,
lastName: document.querySelector("[name=lastName]").value,
})
}).then(function(result) {
return result.json()
.then(function(res) {
if (res.transactionId) {
// Successful transaction!
}
});
});
}

if (result.errors) {
const formattedErrors = result.errors.map(function(error) {
return `${error.parameter}: ${error.message}`;
});
document.querySelector('#checkoutFormErrors').textContent = formattedErrors;
}

});

});
</script>
</body>
</html>

Server-side

Implementation of the /checkout endpoint on your-server.com. This example uses curl to show the API requests.

➜ alias pjcurl='curl -u "login:password" -H "Accept: application/json" -H "X-PJ-Application-Key: YOUR_PRODUCTION_APP_KEY"'

# Create a transaction with the tokenId, enabling CVV verification
➜ pjcurl https://api.payjunctionlabs.com/transactions -d amountBase=5.99 -d cvv=on -d tokenId=YOUR_TOKEN_ID
{
...
}%

Example 2: Create a customer vault

In this example we show how to securely collect a customer's credit card, exchange it for a Customer Vault, and charge it.

Client-side

<html>
<head>
<script type="text/javascript" src="https://www.payjunctionlabs.com/trinity/js/sdk.js"></script>
</head>
<body>

<form id="checkoutForm">
<p id="checkoutFormErrors"></p>

<input type="text" placeholder="First Name"/>
<input type="text" placeholder="Last Name"/>

<input type="text" name="cardNumber" placeholder="Card Number"/>
<input type="text" name="cardExpMonth" placeholder="Card Exp Month"/>
<input type="text" name="cardExpYear" placeholder="Card Exp Year"/>

<button type="submit">Submit</button>
</form>

<script>
var payJunction = PayJunction('YOUR_PUBLISHABLE_KEY');

document.querySelector('#checkoutForm').addEventListener('submit', function(event) {
event.preventDefault();
document.querySelector('#checkoutFormErrors').textContent = '';

var cardPaymentInformation = {
cardNumber: document.querySelector("[name=cardNumber]").value,
cardExpMonth: document.querySelector("[name=cardExpMonth]").value,
cardExpYear: document.querySelector("[name=cardExpYear]").value,
};

payJunction.createToken(cardPaymentInformation)
.then(function(result) {

if (result.tokenId) {
fetch('https://your-server.com/checkout', {
method: 'POST',
body: JSON.stringify({
tokenId: tokenId,
firstName: document.querySelector("[name=firstName]").value,
lastName: document.querySelector("[name=lastName]").value,
})
}).then(function(result) {
return result.json()
.then(function(res) {
if (res.transactionId) {
// Successful transaction!
}
});
});
}

if (result.errors) {
const formattedErrors = result.errors.map(function(error) {
return `${error.parameter}: ${error.message}`;
});
document.querySelector('#checkoutFormErrors').textContent = formattedErrors;
}

});

});
</script>
</body>
</html>

Server-side

Implementation of the /checkout endpoint on your-server.com. This example uses curl to show the API requests.

➜ alias pjcurl='curl -u "login:password" -H "Accept: application/json" -H "X-PJ-Application-Key: YOUR_PRODUCTION_APP_KEY"'

# Create customer.
➜ pjcurl https://api.payjunctionlabs.com/customers -d firstName=Dave -d lastName=Smith
{
"customerId" : 10064,
"uri" : "https://api.payjunctionlabs.com/customers/10064",
"firstName" : "Dave",
"lastName": "Smith",
"created" : "2021-06-10T22:31:13Z",
"lastModified" : "2021-06-10T22:31:13Z"
}%

# Create a customer vault using token id.
➜ pjcurl https://api.payjunctionlabs.com/customers/10064/vaults -d tokenId=YOUR_TOKEN_ID
{
"vaultId" : 10107,
"uri" : "https://api.payjunctionlabs.com/customers/10065/vaults/10107",
"type" : "CARD",
"accountType" : "MASTERCARD",
"lastFour" : "4444",
"cardExpMonth" : 12,
"cardExpYear" : 2030,
"created" : "2021-06-21T18:34:01Z",
"lastModified" : "2021-06-21T18:34:01Z"
}%

# Finally, perform a transaction with the new vault
➜ pjcurl https://api.payjunctionlabs.com/transactions -d amountBase=3.99 -d vaultId=10107
{
...
}%

Example 3: Process an ACH transaction

In this example we show how to securely collect a customer's ACH information and charge it.

To comply with NACHA regulations, you must provide an authorization form signed by the customer before initiating the payment. ACH information cannot be entered by the customer; only merchants are allowed to collect payment info. PPD and CCD transactions are the only types of SEC codes supported. For more information, please see: How Do I Obtain an ACH Authorization Form?

Processing an ACH payment requires more information than the routing number, account number, and account type that is included in the token. In the following example, ACH type is set to CCD, which means that billingCompanyName is required. For more information, see the ACH parameters section of the POST /transactions article.

Client-side

<html>
<head>
<script type="text/javascript" src="https://www.payjunctionlabs.com/trinity/js/sdk.js"></script>
</head>
<body>

<form id="checkoutForm">
<p id="checkoutFormError"></p>

<input type="text" size="64" name="companyName" placeholder="Company Name (required for CCD)"/><br/>
<input type="text" size="64" name="achRoutingNumber" placeholder="ACH Routing Number"/><br/>
<input type="text" size="64" name="achAccountNumber" placeholder="ACH Account Number"/><br/>
<select name="achAccountType">
<option value="">Select</option>
<option value="CHECKING">Checking</option>
<option value="SAVINGS">Savings</option>
</select>
<br/>
<br/>

<button type="submit">Submit</button>
</form>

<script>
var payJunction = PayJunction('YOUR_PUBLISHABLE_KEY');

document.querySelector('#checkoutForm').addEventListener('submit', function (event) {
event.preventDefault();
document.querySelector('#checkoutFormError').textContent = '';

var achPaymentInformation = {
achRoutingNumber: document.querySelector("[name=achRoutingNumber]").value,
achAccountNumber: document.querySelector("[name=achAccountNumber]").value,
achAccountType: document.querySelector("[name=achAccountType]").value,
};

payJunction.createToken(achPaymentInformation)
.then(function (result) {

if (result.tokenId) {
fetch('https://your-server.com/checkout', {
method: 'POST',
body: JSON.stringify({
tokenId: result.tokenId,
companyName: document.querySelector("[name=companyName]").value,
achType: 'CCD',
})
}).then(function (result) {
return result.json()
.then(function (res) {
if (res.transactionId) {
// Successful transaction!
}
});
});
}

if (result.errors) {
const formattedErrors = result.errors.map(function (error) {
return `${error.parameter}: ${error.message}`;
});
document.querySelector('#checkoutFormError').textContent = formattedErrors;
}

});

});
</script>
</body>
</html>

Server-side

Implementation of the /checkout endpoint on your-server.com. This example uses curl to show the API requests.

➜ alias pjcurl='curl -u "login:password" -H "Accept: application/json" -H "X-PJ-Application-Key: YOUR_PRODUCTION_APP_KEY"'

# Create a transaction with the tokenId, enabling CVV verification
➜ pjcurl https://api.payjunctionlabs.com/transactions -d amountBase=5.99 -d achType=CCD -d billingCompanyName=company -d tokenId=YOUR_TOKEN_ID
{
...
}%