Working with Existing Customers

Collecting payments and updating existing account details

If your system provides a way for users to securely authenticate, your server may request a Customer Token which authorizes requests to update customer account details and make payments on an existing customer.

Step 1: Build Payment Form

Follow the steps in Vaulting Accounts and Making Payments

Step 2: Create Get Customer Token Endpoint

On your server, obtain a Customer Token that uniquely identifies your customer to PaySimpleJS, and pass the token to the Checkout page. Your server obtains this token from the PaySimple API using:

GET /customer/{customer_id}/token

Response:
{
    "JwtToken": "<Customer Token>"
}
[HttpPost]
public async Task<ActionResult> CustomerToken()
{
  var customerService = new CustomerService(PSSettings);
  // do not allow the customer id to be passed in from the UI here or any 
  // customer would have access to other customers data!
  var customerId = 12345; // fetch from your system

  if (!customerId.HasValue)
    throw new ApplicationException("No customer exists to use");

  var token = await customerService.GetCustomerTokenAsync(customerId.Value);
  return Json(token);
}
// Endpoint to get a JWT token for a customer that has been authenticated
// by the merchant. The PaySimple customer id should NOT be passed into this service
// to prevent unauthorized access.
app.get('/customertoken, function(req, res) {
let customerid = 1234; // do a lookup in your system to fetch the PaySimple customer id for the authenticated customer
let options = {
    method: "GET",
    uri: settings.apiv4url + '/customer/' + customerId + "/token",
    headers: {
        Authorization: getAuthHeader()
    },
    json: true,
};
request(options, function(error, response, body) {
    if (!error && response && response.statusCode < 300) {
        res.json(body.Response);
        return;
    }
    res.status((response && response.statusCode) || 500).send(error);
    });
});

🚧

Customer Token Security

Take care not to pass the PaySimple customer id unencrypted in the request for the Customer Token on your server to prevent unauthorized users from accessing customer data, creating accounts and making payments. Instead, keep the PaySimple customer id stored on your server or encrypted in a cookie value.

Step 3: Client side changes

  • Add getCustomerToken function
  • Call getCustomerToken from onSubmit button event listener, adding a callback to the PaySimpleJs method matchOrCreateAccount
  • Pass the customerAuth method into the PaySimpleJS initialization
function loadPaysimpleJs(auth, customerAuth) {
    // Initialize the PaySimpleJS SDK with the checkout token and styles
    var paysimplejs = window.paysimpleJs({
            debug: true,
            container: document.querySelector('#psjs'),
            auth: auth,
            customerAuth: customerAuth, // register with init
            styles: {
                body: {
                    backgroundColor: '#f9f9f9'
                }
            }
        });

    // Submit button event listener -- triggered when the user clicks
    // the submit button.
    // Sumbits the merchant form data to the PaySimpleJS SDK
    function onSubmit(event) {
        // Prevent the default submit behavior of the form
        event.preventDefault();
        document.getElementById('message').innerHTML = '';

        // Request the PaySimpleJS SDK to add a new cc or ach account for the
        // customer which the server generated the customer token was granted
        getCustomerToken(function (customerToken) {
            return paysimplejs.send.matchOrCreateAccount(customerToken);
        });
    }

    function getCustomerToken(callback) {
        getToken('CustomerToken', callback);
    }

Did this page help you?