Episode 554: Web Reception, But No Card Information

Sunday, September 24, 2017

Operation: Acceptance of credit card registration

Want to promote credit card charging...



Challenge: Risk of credit card information data breach



  • PAN：Primary Account Number (card number)
  • PIN：Personal Identification Number

[Credit Card Info Reception]

Solution: Browser based Tokenization

If you place a "Form Start Event" at the beginning of a Workflow, it will automatically start when there is an entry in the publicated Web form.

In this example, once a customer completes "Input of application for service", "Application reception flow" in the company is automatically started. It is noteworthy that "credit card number etc" will never be delivered to the Workflow system.

Specifically, customer's "card information etc." is tokenized by JavaScript communication (CORS communication) between customer's browser and Stripe.com, and only the token information is transmitted to the Workflow system . (Employees involved in reception process never see credit card information.)

※ I am going to introduce charging-fee operation in the next article.

Discussion: Difficulty of JavaScript implementation

The mechanism of sending card information from &#91;Customer's browser&#93; directly to &#91;Payment Service Provider&#93; (PSP) without passing through &#91;Member Store Server&#93; is very effective for "realizing non-retention". In this example, "card information etc." is entrusted to Stripe.com, and a token as its storage ID flows in the Workflow.

Although so-called "Cross-domain access" is required, Stripe.com has been supporting CORS since 2012 (W3C Candidate Recommendation in Jan. 2013, Recommendation in Jan. 2014).

* Incidentally, Stripe.com has two tokenization mechanisms called "Checkout" (embedded payment form) and "Elements" (pre-built UI components). We use "Elements" which has higher degree of freedom, in order to customize "Form Start Event" here.

On the other hand, in the cloud-based Workflow "Questetra BPM Suite", it is possible to decorate the "Operation form screen" (including the Form Start screen) with HTML / JavaScript. (M213)

However (at least as of v11.4), these codes are inserted into the <body> of the HTML document. That is, if you want to use the function defined in the external .js file, you need programming for "dynamic loading". For example, in the case of using jQuery, "JS file load completion" is guaranteed by the method of setting the callback function as the second argument of getScript ().

Setting example in &#91;Guid Panel&#93;
jQuery.getScript("https://js.stripe.com/v3/", function(){
  var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh'); // Create a Stripe client
  var elements = stripe.elements(); // Create an instance of Elements
  var card = elements.create('card', { hidePostalCode: true, style: {
    base: {
      iconColor: '#666EE8',
      color: '#31325F',
      lineHeight: '30px',
      fontWeight: 300,
      fontSize: '14px',
      '::placeholder': {
        color: '#CFD7E0',
    invalid: {
      color: '#fa755a',
      iconColor: '#fa755a'

//// Handle real-time validation errors from the card Element
card.addEventListener('change', function(event) {
  var displayError = document.getElementById('carderror');
  if (event.error) { displayError.textContent = event.error.message;
  } else { displayError.textContent = ''; }

//////// Tokenize with Button Click
var tokenizeButton = document.getElementById('stripeTokenization');
tokenizeButton.addEventListener('click', function(event) {
  var extraDetails = {
    name: jQuery('input[name=cardholder-name]').val(),
  stripe.createToken(card, extraDetails).then(function(result) {
    if (result.error) {
      // Inform the user if there was an error
      var errorElement = document.getElementById('carderror');
      errorElement.textContent = result.error.message;
    } else {
      jQuery("input[name='data\\[6\\].input']").val( result.token.id );
      jQuery("input[name='data\\[7\\].input']").val( result.token.card.last4 );
      var successElement = document.getElementById('cardsuccess');
      successElement.textContent = "Your Stripe token for use of Questetra is generated! : " + result.token.id;

}); // endof "jQuery.getScript( , function(){"

jQuery('input[name="data\\[6\\].input"]').attr( "readonly", true );
jQuery('input[name="data\\[7\\].input"]').attr( "readonly", true );
jQuery('input[name="data\\[6\\].input"]').css( "background-color", "#f2f2f2" );


<div class="stripegroup">
  <label class="stripebox">
    <input name="cardholder-name" class="field" placeholder="Jane Doe" />
  <label class="stripebox">
    <div id="card-element" class="field"></div>

  <div class="outcome">
    <div id="carderror" role="alert"></div>

  <button type="button" id="stripeTokenization">Tokenization</button>
  <div id="stripenote"> * Tokenized by Stripe.com, your credit card details will Not be submitted to Questetra.</div>

  <div class="outcome">
    <div id="cardsuccess"></div>

<Form screen>

[Data Items list]

[Free download]
&lt;Similar Models&gt;

[Japanese Entry (和文記事)]