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
{
...
}%