Create an Omise card token

[nimid]

1. Objective

Create an Omise card token from the valid card information that payer filled in the checkout form. The token will be used to process the charge in the next step.

Related information: Related issue: - Related ticket: T1122 Required pull request: #11

2. Description of change

• Call the external client side script, Omise.js
• Pass a variable, Omise public key, from server side to client side
• Manipulate the checkout form to create the Omise card token

Note: The JavaScript code has followed the PrestaShop coding standard (at the JavaScript code section).

3. Quality assurance

Environments:

• Platform: PrestaShop 1.6.1.6
• Omise plugin: Omise-PrestaShop 1.6.0.0
• PHP: 5.6.28
• Mozilla Firefox: 50.1.0

Details:

• Make sure that the Omise-PrestaShop has been installed and enabled.
• At the front-end, add a product to cart.
• Proceed to checkout.

Test case 1: Successfully create Omise card token

• At the step, 05. Payment, fill the valid card information and click button, Submit Payment.
• The Omise card token will be successfully created and defined to the HTML hidden element, omise_card_token.
• The Omise card token will be used to submit to process in the next step.

The screenshot below shows the Omise card token was defined to be the value for HTML hidden after the payer filled the valid card information.

Test case 2: Display the error message if card information is invalid

• At the step, 05. Payment, do not fill any card information and then click button, Submit Payment.
• The system will display the popup contained the error message.

The screenshot below shows the popup contained the error message and it is no Omise card token has been created and defined.

4. Impact of the change

-

5. Priority of change

Normal

6. Additional Notes

-

[guzzilar]

@nimid, fyi, going to rebase #11 feature/display-checkout-form => here, feature/create-card-token

[guzzilar]

rebased #11 feature/display-checkout-form => feature/create-card-token

[guzzilar]

@nimid LGTM 👍

Btw, is it possible to reduce that document.getElementById() part? something like,

const form = {
  name: document.getElementById('omise_card_holder_name'),
  number: document.getElementById('omise_card_number'),
  expiration_month: document.getElementById('omise_card_expiration_month'),
  expiration_year: document.getElementById('omise_card_expiration_year'),
  security_code: document.getElementById('omise_card_security_code'),
}

const omiseLockCheckoutForm = function omiseLockCheckoutForm(form) {
  form.name.disabled = true;

  // blah
}

const omiseUnlockCheckoutForm = function omiseUnlockCheckoutForm(form) {
  form.name.disabled = false;

  // blah
}

To reduce executing document.getElementById() with the same fields multiple times.

• It can reduce an error that may cause by human-error (typo on field name).
• And it will make sure that omiseLockCheckoutForm() and omiseUnlockCheckoutForm() will process with the same fields (since it use the same object.)
• Code more clean.
• Just to make list complete, I'll say, performance.. (but for me, I don't think performance will be significant difference.. just wanna say it to make the benefit list complete 😂 )

note, I didn't try ☝️ by myself. It might not work because of this line, https://github.com/omise/omise-prestashop/pull/12/files#diff-703d934df9e134d3b80f37155717d048R100

[nimid]

@guzzilar

note, I didn't try ☝️ by myself. It might not work because of this line, https://github.com/omise/omise-prestashop/pull/12/files#diff-703d934df9e134d3b80f37155717d048R100

For the line that you mentioned, omiseUnlockCheckoutForm();, what is make it not work?

I have tried to modify but can not found the problem.

[guzzilar]

@nimid https://github.com/omise/omise-prestashop/pull/12#issuecomment-272685956 Just Im not sure if t's gonna work with that omiseCreateTokenCallback() function.

Because that function will be executed by Omise.createToken('card', card, omiseCreateTokenCallback);but my idea has to pass form object through omiseUnlockCheckoutForm(form).

So, not sure if I can pass form object within that callback function.

[nimid]

@guzzilar Ok, thanks. I will test more further with the callback function as well.

[nimid]

@guzzilar https://github.com/omise/omise-prestashop/pull/12#issuecomment-272290720

Done.

I have modified and tested to the process of save the order. The system can work correctly.

I have modified this pull request description by add a second test case that show the error message if the card information is invalid.

[guzzilar]

@nimid fyi, rebased develop to #12 feature/create-card-token

[guzzilar]

👍