Create Omise card token

[nimid]

1. Objective

Create Omise card token at the front office, client side.

The Omise card token will be submitted to server side to create Omise charge in the next step.

Related information:

• Related issue: #28
• Related ticket: -

2. Description of change

• Define a constant, CARD_PAYMENT_OPTION_NAME, at server side. This constant will be passed from server side to client side and will be assigned to be the identifier of card payment option.

• Modify JavaScript, client-side script, at the card payment form by add the action to the PrestaShop 1.7 generated submit payment button. The action is create Omise card token. It will be triggered, if the Omise card payment option has been selected.

  • Change all place that uses keyword const to var because var has more web browsers compatible than const.
  • Use JavaScript closure to reduce scope of functions and variables. Without JavaScript closure, the functions and variables may be altered by another unknown behavior or by mistake.

Note The behavior of card payment form is similar to the before change. The behavior of card payment form after the user clicked submit payment button are:

• Lock the elements in card payment form to prevent the user change the information in card payment form after the user clicked submit payment button.
• Lock the submit payment button to prevent double submit payment by mistake or non mistake.
• Guide the user that the system is working after the user clicked submit payment button by change text of submit button to Processing.

3. Quality assurance

Environments:

• Platform: PrestaShop 1.7.2.3
• Omise plugin: Omise PrestaShop 1.2
• PHP: 5.6.31
• Web browsers: Google Chrome 61.0, Mozilla Firefox 56.0.1, Opera 48.0, and Safari 11.0

Details:

There are 2 test cases.

1. Success case, test create Omise card token by using valid credit card information. The Omise card token must be created and assigned to the HTML element, hidden.
2. Fail case, test create Omise card token by using invalid credit card information. The error message must be displayed.

• At the PrestaShop back office, install and enable Omise payment module, if it is not installed and enabled.
• Go to the PrestaShop front office and proceed the checkout.
• At the payment step, input the valid test credit card information.

The screenshot below shows the testing on Google Chrome 61.0. The Omise card token has been created and assigned to the HTML element, hidden.

The screenshot below shows the testing on Mozilla Firefox 56.0.1. The Omise card token has been created and assigned to the HTML element, hidden.

The screenshot below shows the testing on Opera 48.0. The Omise card token has been created and assigned to the HTML element, hidden.

The screenshot below shows the testing on Safari 11.0. The Omise card token has been created and assigned to the HTML element, hidden.

The screenshot below shows the error message when create Omise card token with invalid card number on Safari 11.0.

4. Impact of the change

-

5. Priority of change

Normal

6. Additional notes

References:

• The table of web browsers that compatible with JavaScript keyword, var.
• The table of web browsers that compatible with JavaScript keyword, const.