Switch credit card tokenization to use SP PaymentFields

[garthbrantley]

PRs: #208, #209, #211, #212, #213, #214, #226, #227, #228, #229, #230, #232

In each of the following locations:

• [x] Front-end checkout
• [x] Front-end wallet page
• [x] Admin checkout / create order

With each config:

• [x] Config 1
• [x] Config 2

Other changes required:

• [x] Remove Spreedly 3DS2 implementation (Gateway Independent 3DS Type in M2 admin)
• [x] Remove DPO gateway / gateway specific 3DS implementation (Gateway Specific 3DS Type in M2 admin)
• [x] Remove 3DS Type config setting from M2 admin

Version

Use version 1.0.1 of PaymentFields - https://hosted.subscribepro.com/payment-fields/payment-fields-1.0.1.js

Events To Handle

Handle thevalidationresultchanged event

Use this event to change the card image and to determine if the card / cvv entered are valid yet or not.

• Vault IFrame docs - https://docs.subscribepro.com/technical/sp-vault/hosted-iframe/events/#event-validationresultchanged

Replace the current credit card iframe with the implementation via SP PaymentFields widget:

• https://docs.subscribepro.com/technical/hosted-widgets/payment-fields-widget/implementing/

Iframe locations:

• Front-end checkout
  • Must support 3DS2 with "payment" set for authenticationType
  • Must support 3DS2 disabled
• Front-end wallet page
  • With Enable Authorization on Wallet = Yes
  • Must support 3DS2 with "payment" set for authenticationType
  • Must support 3DS2 disabled
  • With Enable Authorization on Wallet = No
  • Must support 3DS2 with "non_payment" set for authenticationType
  • Must support 3DS2 disabled
• Admin checkout / create order
  • Never uses 3DS2

SP Environment configurations

The Subscribe Pro iframe should work with the following SP Environment configurations:

• Config 1 -

  • Vault Type: Subscribe Pro + Spreedly Vault
  • Payment Gateway Type: Test Gateway or Test Gateway (SP Native)
  • 3DS2 Merchant Profile Type: Test

• Config 2 -

  • Vault Type: Subscribe Pro
  • Payment Gateway Type: Any SP Core / Native gateway in Test Mode - For example NMI (SP Core) in Test Mode
  • 3DS2 Merchant Profile Type: Test

Enable / Disable setting

The Enable 3DS2 config setting in M2 admin should control this business logic:

• Enable 3DS2 = Enabled
  • 3DS2 authentication should be used on front-end checkout with "payment" set for authenticationType
  • 3DS2 authentication should be used on wallet page with "non_payment" set for authenticationType
• Enable 3DS2 = Disabled
  • 3DS2 should not be used anywhere

Test Scenarios

Wallet Page - Config 1

3DS2 Authentication	Wallet Authorization	authenticationType Used	Test Card	Expected Result
Enabled	Disabled	non_payment / NPA	Frictionless - tranStatus = Y	Card stored
Enabled	Disabled	non_payment / NPA	Frictionless - tranStatus = N	3DS2 authentication fails, error message displayed to user
Enabled	Disabled	non_payment / NPA	Challenge - Any	3DS2 authentication fails, error message displayed to user
Enabled	Enabled	payment / PA	Frictionless - tranStatus = Y	Card Stored / $1 Authorization & Void
Enabled	Enabled	payment / PA	Frictionless - tranStatus = N	3DS2 authentication fails, error message displayed to user
Enabled	Enabled	payment / PA	Challenge - transStatus = Y	Card Stored / $1 Authorization & Void
Enabled	Enabled	payment / PA	Challenge - trnasStatus = N	3DS2 authentication fails, error message displayed to user
Disabled	Disabled	none	4111111111111111	Card stored
Disabled	Disabled	none	4012888888881881	Card stored
Disabled	Enabled	none	4111111111111111	Card Stored / $1 Authorization & Void
Disabled	Enabled	none	4012888888881881	Authorization Transaction Fails

[czettnersandor]

• Replace html placeholder with JS logic in view/frontend/web/template/payment/three-ds.html
• Rewrite logic to include hosted fields in app/code/Swarming/SubscribePro/view/frontend/web/js/model/payment/cc-form.js
• Receive token in Magento (make sure the customer receives the token app/code/Swarming/SubscribePro/Observer/Payment/TokenAssigner.php)
• Remove iframe styling from view/frontend/web/css/source/_module.less and add hosted field styling if necessary

[garthbrantley]

@czettnersandor Have you accounted for handling the 3DS2 authentication flow through the PaymentFields library, instead of how it is handled now? Can you research that and write up all the places and code that need to change?

[garthbrantley]

Sandor left these comments in slack:

Sandor Czettner I believe the 3DS is coming after the credit card widget, I'm not sure if there's anything to do with it. It's separated from it as far as I know. There needs to be a separate element, then we receive events when the content is shown, but that's it.

Garth Brantley Yes, there is something to do.

Garth Brantley The current 3DS2 implementation needs to be removed and replaced with the PaymentFields library.

Sandor Czettner Only to provide an element?

Sandor Czettner ah yes, to remove the current 3DS implementation

Sandor Czettner The new PaymentFields is handling the 3DS form completely, I only need to add a new div for it.

[garthbrantley]

@eugene-shab See note about using latest verison, 1.0.1 of PaymentFields and how to implement event handler to get card type and is valid or not flags.

[eugene-shab]

@garthbrantley During work on event validation on the new version of payment-fields.1.0.1, an old error was noticed, related to the fact that events (like inputEvent or new validationResultChanged) for Number and CVV inputs are only working for a certain time ~5-7 seconds. After the time has passed, no validation events work.

For example: when a customer changes the credit card number, the entire credit card number from Visa to Master, then no verification takes place. There are no errors in the console either.

[eugene-shab]

@garthbrantley I have pushed updates for validation on wallet page in my account

[eugene-shab]

@garthbrantley I have pushed updates for validation on admin order create page