PAYMENTS
SIMPLIFIED

Offer all the payment features your
customers want with a fast integration
that limits your PCI scope.

GET STARTED

API Base URLs

  • Production Server

    For processing live transactions

    https://api.payjunction.com

  • Test Server

    For development

    https://api.payjunctionlabs.com

Most Commonly Referred to Articles

Our integration team is ready to
speak with you.

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" name="firstName" placeholder="First Name"/>
        <input type="text" name="lastName" 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: result.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 to our Demo account.

curl -X POST -u "pj-ql-01:pj-ql-01p" -H "Accept: application/json" -H "X-PJ-Application-Key: c0d73641-65ae-4e9b-bbab-fb6215d7ee98" \
-d "tokenId ={YOUR_TOKEN_ID}"
-d "amountBase=1901.00" \
"https://api.payjunctionlabs.com/transactions"

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" name="firstName" placeholder="First Name"/>
        <input type="text" name="lastName" 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: result.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
{
    ...
}%

Example 4: Split payments

In this example we’ll show how to do split payments between multiple merchant accounts by creating two separate tokens.

Consider this scenario:

  • There are two merchants, Merchant A and Merchant B.
  • Customer is charged $100.
  • Merchant A takes $96.
  • Merchant B takes $4.

The following code uses the card information entered by the customer to create two different tokens on two distinct merchant accounts (using different publishable keys).
The tokens are then charged separately on the backend.

Client-side

<html>
<head>
  <script type="text/javascript" src="http://hostlocale:8081/trinity/js/sdk.js"></script>
</head>
<body>

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

  <input type="text" name="firstName" placeholder="First Name"/>
  <input type="text" name="lastName" 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>
  const merchantA = new PayJunction(‘MERCHANT_A_PUBLISHABLE_KEY’);
  const merchantB = new PayJunction(‘MERCHANT_B_PUBLISHABLE_KEY’);

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

    const 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,
    };

    Promise.all([
      merchantA.createToken(cardPaymentInformation),
      merchantB.createToken(cardPaymentInformation),
    ]).then(results => {

      if (results.some(r => r.errors)) {
        // Handle token errors
        console.log(results.map(r => r.errors));
      }

      if (results.every(r => r.tokenId)) {
        fetch('https://your-server.com/checkout', {
          method: 'POST',
          body: JSON.stringify({
            // Returned values are in order of the Promises passed, regardless of completion order.
            merchantATokenId: results[0].tokenId,
            merchantBTokenId: results[1].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 transactions
                }
              });
        });
      }

    });

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

Server-side

# Create a transaction with the tokenId for merchant A
➜ curl -H "Accept: application/json" -H "X-PJ-Application-Key: YOUR_PRODUCTION_APP_KEY" \
  -u "merchantA_login:password" \
  -d amountBase=96 -d cvv=on \
  -d tokenId=merchantATokenId \
  https://api.payjunctionlabs.com/transactions

# Create a transaction with the tokenId for merchant B
➜ curl -H "Accept: application/json" -H "X-PJ-Application-Key: YOUR_PRODUCTION_APP_KEY" \
  -u "merchantB_login:password" \
  -d amountBase=4 -d cvv=on \
  -d tokenId=merchantBTokenId \
  https://api.payjunctionlabs.com/transactions