Working with Existing Customers

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);
	}

Step 1: Build Payment Form

Step 2: Create Get Customer Token Endpoint

🚧Customer Token Security

Step 3: Client side changes

🚧
Customer Token Security