The Pay & Tokenize flow allows a merchant to execute a payment at the present time while simultaneously creating and verifying a customer token. This token can then be used for all future transactions, enabling one-click purchases, subscriptions, or merchant-initiated payments without requiring the customer to re-enter their sensitive payment details.

Steps

Create an invoice with the fieldverificationset to null or false
Tokenize a card in the browser or on mobile devices
Authorize the Payment with the flag: save_source set to true
Finally, after the authorization step, ProcessOut will generate the verified customer token (tok_xxx)

Specific instructions for Authorizing a payment from the Front-End

In order to save the customer token from the Front-End, the merchant has to ensure that client_secret is also set for this operation.

The client secret (x-processout-client-secret) is returned in the response header during the invoice creation. The merchant has to safely send this ID to the Front-End.

Finally, when making the authorization call, the secret should be added as an extra parameter. Code Examples:

function processoutCardTokenized(token) {
  // make sure `invoiceID` generated from
  // your backend is available in this scope
  client.makeCardPayment(
    invoiceID,
    token,
    {
      authorize_only: false, // set to true if you don't want to capture directly
      save_source: true //Set to true to force the generation of a customer token
    },
    function(iv) {
      var field = document.createElement("input");
      field.type = "hidden";
      field.name = "invoice_id";
      field.value = iv;

      // Enable back the button
      document.getElementById("paymentBtn").disabled = false;

      // We add the invoice_id input so that it's sent back to the server.
      // The only thing left to do is to submit the form
      formElement.appendChild(field);
      formElement.submit();
    },
    function(err) {
      document.getElementById("errors").innerHTML = err.message;
    },
    {
      //Client secret returned in the
      //response header during the invoice creation
      clientSecret: document.getElementById("secret-id").value
    }
  );
}

// Ensure that the ProcessOut shared instance is configured.
let invoicesService = ProcessOut.shared.invoices

// Create an authorization request.
let request = POInvoiceAuthorizationRequest(
    invoiceId: invoiceId,
    source: cardId,
    saveSource: true,
    clientSecret: clientSecret
)

do {
    try await invoicesService.authorizeInvoice(
        request: request, threeDSService: threeDSService
    )
    // TODO: Handle successful authorization.
} catch {
    // TODO: Handle authorization errors.
}

// Ensure that ProcessOut instance is configured.
val invoicesService = ProcessOut.instance.invoices

// Create an authorization request.
val request = POInvoiceAuthorizationRequest(
    invoiceId = invoiceId,
    source = cardId,
    saveSource = true,
    clientSecret = clientSecret
)

// Call the suspend function within a coroutine scope.
invoicesService.authorize(
    request = request,
    threeDSService = threeDSService
).onSuccess {
    // Handle successful authorization.
}.onFailure {
    // Handle authorization failure.
}

How to fetch the new verified customer token

Option 1: Fetch the transaction & expand the payment method

Simply execute this API GET:

https://api.processout.com/transactions/<<transaction_id>>?expand[]=card.token

Inside the response, the merchant will find the card.token JSON object, containing the customer token.

Option 2: Leverage the ProcessOut asynchronous events.

During the authorization ProcessOut will generate different events describing the life cycle of the token creation and verification status. List of events.