Updates hideCvv flag for edit payment methods and new payment methods. #1109

wjames111 · 2024-10-28T18:17:22Z

OKR: Implement real-time CVV validation on all transactions for Give App

wjames111 · 2024-11-04T22:05:58Z

@wrandall22 I'm having some difficulty with this one. I need to validate that the CVV is correct when paying with a saved card. I added a save payment method that is essentially just ripped from creditCardForm.component.js. I haven’t been able to get it working though which isn't surprising seeing as I'm not entirely sure what all is going on in that code block. Do you have any pointers for me/is this the right way of going about it?

wrandall22 · 2024-11-05T14:32:36Z

So, there are a few things.

You should probably make the changes in existingPaymentMethods instead of in paymentMethodDisplay since the first is only used in checkout and the latter is used in several places we don't want to capture cvv.
The validation is happening, but is not preventing the user from moving forward, which means we need to hook into the continue button on checkout step 2 and ensure that the validation passes there before moving forward.
The Angular way of re-using the cvv template/controller code is to create a directive and put it in both places. We have several directives in the codebase already which you can reference (even creditCardNumber has one). This would be a way to not copy/paste code and maintain it in two places.

wjames111 · 2024-11-05T15:25:54Z

@wrandall22 thank you this is really helpful. One question, do we only need the validators on the CVV? I would assume we need to ensure the CVV is also correct for the given credit card before allowing them to move forward. That was what I was trying to accomplish with the savePayment method, although it didn't appear to be working.

wrandall22 · 2024-11-05T15:31:08Z

The CVV is the only thing being entered, so is the only thing being validated in this situation. That validation can live in the directive.

wjames111 · 2024-11-05T15:37:18Z

Ahh okay that makes things a bit easier.

dr-bizz · 2024-11-08T15:29:30Z

Great work on this PR!

Just a note: before merging with staging, can you run yarn lint:write? This will ensure the lint issues are fixed or bring attention to code that needs to be changed. This way, your changes on staging will be deployed to the staging site.

dr-bizz · 2024-11-08T15:57:26Z

Removing the on staging label for now. Once everything is working on this branch, feel free to add it back

dr-bizz · 2024-11-08T15:58:08Z

It seems like it wasn't just you, there were some other changes from other PRs that caused staging to fail being deployed.

wjames111 · 2024-11-08T15:59:39Z

@dr-bizz thanks that make me feel better. Sorry about that, I didn't realize it was causing issues. It's not quite ready for staging either.

wrandall22 · 2024-11-08T16:03:47Z

You can turn it into a draft PR until it's ready if you want.

dr-bizz · 2024-11-08T16:03:55Z

It's all good. This is where amplify previews would come in handy

wjames111 · 2024-11-13T17:37:16Z

@wrandall22 is this more what you had in mind? Do you know where else the directive needs to be used apart from existingPaymentMethods?

wrandall22 · 2024-11-13T18:31:20Z

Hey Will, thanks for working on this. I was more thinking of putting this part of the HTML in the directive:

<div class="form-group" ng-class="{'has-error': ($ctrl.creditCardPaymentForm.securityCode | showErrors), 'is-required': !$ctrl.paymentMethod}">
          <label translate>{{'SEC_CODE'}}</label>
          <input type="text"
                 name="securityCode"
                 autocomplete="cc-csc"
                 class="form-control form-control-subtle"
                 ng-model="$ctrl.creditCardPayment.securityCode"
                 ng-required="!$ctrl.paymentMethod || $ctrl.creditCardPayment.cardNumber"
                 ng-attr-placeholder="{{$ctrl.paymentMethod && !$ctrl.creditCardPayment.cardNumber ? '***' : ''}}">
          <div role="alert" ng-messages="$ctrl.creditCardPaymentForm.securityCode.$error" ng-if="($ctrl.creditCardPaymentForm.securityCode | showErrors)">
            <div class="help-block" ng-message="required" translate>{{'CARD_SEC_CODE_ERROR'}}</div>
            <div class="help-block" ng-message="minLength" translate>{{'MIN_LENGTH_CARD_SEC_CODE'}}</div>
            <div class="help-block" ng-message="maxLength" translate>{{'MAX_LENGTH_CARD_SEC_CODE'}}</div>
            <div class="help-block" ng-message="cardTypeLength" ng-init="isAmex = $ctrl.cardInfo.type($ctrl.creditCardPayment.cardNumber) === 'American Express'">
              <translate ng-if="!isAmex">{{'LOCATION_OF_CODE_OTHER'}}</translate>
              <translate ng-if="isAmex">{{'LOCATION_OF_CODE_AMEX'}}</translate>
            </div>
          </div>
        </div>

Then using it in both creditCardForm and existingPaymentMethods

wjames111 · 2024-11-14T21:02:55Z

@wrandall22 is this a little more what you had in mind? I was initially trying to validate within the directive itself, but it ended up being easier to just use the directive for the template and use the validators that were already in place.

wrandall22 · 2024-11-14T21:05:59Z

Yep, this is the direction I was thinking.

wjames111 · 2024-11-14T21:07:20Z

@wrandall22 okay great! I'll fix it up.

src/app/checkout/step-2/step-2.component.js

wrandall22

I got part way through the review, this is a good start. I'm going to play around a little bit with the directive locally as well.

src/app/checkout/step-2/step-2.component.js

src/app/profile/payment-methods/payment-method/payment-method.component.js

src/app/profile/payment-methods/payment-methods.component.js

src/common/components/paymentMethods/creditCardForm/creditCardForm.component.js

src/app/checkout/step-2/step-2.component.spec.js

src/common/directives/creditCardCvv.directive.js

src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js

src/common/directives/creditCardCvv.directive.js

wjames111 · 2024-11-20T22:03:51Z

Thanks @wrandall22! I'll get started on these changes.

dr-bizz

I am getting this error message when trying to continue to step 3.

TypeError: Cannot read properties of undefined (reading 'cvv')
at Step2Controller.onPaymentFormStateChange (step-2.component.js:114:74)
at Step2Controller.submit (step-2.component.js:75:10)

I also get an error message when trying to submit the checkout.

{"error":"Invalid Data"}

In my incognito window, I get an error that prevents me from moving from Step 2 to Step 3. But this could just be my local.

Error tokenizing credit card

dr-bizz · 2024-12-06T14:23:52Z

src/app/checkout/step-2/step-2.component.js

@@ -117,7 +120,7 @@ class Step2Controller {
  }

  isContinueDisabled () {
-    if (this.selectedPaymentMethod?.['card-type'] && typeof this.isCvvValid !== 'undefined' && !this.isCvvValid) {
+    if (this.selectedPaymentMethod?.['card-type'] && !this.isCvvValid) {


Is it no longer returning as undefined

It doesn't appear to be, so I just removed the condition.

dr-bizz · 2024-12-06T14:32:31Z

src/app/checkout/step-2/step-2.component.js

@@ -109,14 +110,19 @@ class Step2Controller {
      this.changeStep({ newStep: 'review' })
      this.onStateChange({ state: 'submitted' })
      this.paymentFormState = 'success'
+    } else if ($event.state === 'submitted') {
+      this.orderService.storeCardSecurityCode(this.selectedPaymentMethod.cvv, this.selectedPaymentMethod.self.uri)


Change the test to be like the below. Adding the line self.controller.selectedPaymentMethod = { cvv: '123', self: { uri: 'uri'} }

it('should update paymentFormState if transitioning to a different state', () => { self.controller.paymentFormState = 'unsubmitted' self.controller.selectedPaymentMethod = { cvv: '123', self: { uri: 'uri'} } self.controller.onPaymentFormStateChange({ state: 'submitted' }) expect(self.controller.paymentFormState).toEqual('submitted') })

wrandall22 · 2024-12-06T15:06:28Z

Error tokenizing credit card is due to you not using the Referer Control extension properly.

{"error":"Invalid Data"} is due to the work being done in staging for recaptcha enterprise.

dr-bizz · 2024-12-06T15:39:33Z

Error tokenizing credit card is due to you not using the Referer Control extension properly.

{"error":"Invalid Data"} is due to the work being done in staging for recaptcha enterprise.

This makes sense. Ignore that comment.

wrandall22 · 2024-12-09T16:46:30Z

src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js

-              '{"/paymentmethods/crugive/giydsnjqgi=":"456","/paymentmethods/crugive/giydsnjqgy=":"321"}'
+              '{"/paymentinstruments/orders/crugive/hfsdoylfhbswk…4tmljug5qtqllcg44wcljvhezgcntcmvtdeojwgy=":"456"}'


Note that both of these show possibilities of reality.

wrandall22 · 2024-12-12T18:24:05Z

Something seems to have regressed on the display of adding a new payment method and the optional cover fees area.

Prod:

This branch:

wrandall22 · 2024-12-12T18:40:00Z

@rguinee I'd be curious to hear your design perspective on a good way of showing the security code here as well. I'm thinking inline label/input instead of stacked and not quite so tall.

rguinee · 2024-12-12T18:41:37Z

@rguinee I'd be curious to hear your design perspective on a good way of showing the security code here as well. I'm thinking inline label/input instead of stacked and not quite so tall.

Are we requiring they enter it again on a saved card for security purposes?

wrandall22 · 2024-12-12T18:42:55Z

Correct

wrandall22 · 2024-12-12T18:48:28Z

src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js

+      const storage = JSON.parse(this.sessionStorage.getItem('cvv')) || ''
+      this.creditCardPaymentForm.securityCode.$setViewValue(storage)
+      this.creditCardPaymentForm.securityCode.$render()
+      this.sessionStorage.removeItem('cvv')


We don't want to clear this from session storage here, as this is what is sent to the server.

So here was my thinking; this only gets removed on switchPayment, which only happens previously to cvv getting added to storage. So if we remove it here it just gets added again once you proceed to the next step. From testing session storage appears to always hold the correct cvv key/value at the final step which I believe is where it gets sent to the server. The primary reason for deleting the session storage here is to only set it once, which will keep it from adding the stored cvv to the cvv field every time switchPayment is called. I could be missing something though, I could always try to come up with a different way to keep cvv getting set everytime.

In my testing, it cleared right after I edited the existing payment method and entering the CVV there. It got copied to the text box but then removed from session storage.

hmm okay I must have missed something.

So when you get to the final step. The stored cvv isn't present?

Ah, I see what you're saying. It does get added back after hitting continue. We need to test that on the single step BCO branch as well to see how that behaves.

Good call, I did not to think to check branded that could be problematic.

So, it looks like switchPayment is called when hitting Continue on 2 step branded checkout and when hitting Submit on single step branded checkout. So this will definitely need to change in some way.

rguinee · 2024-12-12T18:59:15Z

Agree on your instinct @wrandall22. There are several other recommendations I'd have for this like moving "Add a payment method" into the list of Your Payment Methods.

wrandall22 · 2024-12-12T19:27:40Z

Do you envision that being below the selected payment method or the full list? I think the former.

rguinee · 2024-12-12T19:30:49Z

Exactly @wrandall22. They could have multiple card payment methods, so we would show below the selected option the sec code verification input. There are other considerations to make here. Is it validated when 3 or 4 digits are entered and can show success or error response? Does it have it be submitted and if incorrect the errors appear after page reloads?

wrandall22 · 2024-12-12T19:32:50Z

The validation is there and it shows in real time, not after submit (unless the back-end finds issues with the card verification with TSYS)

wjames111 · 2024-12-13T18:18:01Z

@rguinee @wrandall22 Ryan is the image you shared what we want to go with? I can get started styling it, but I don't want to jump the gun if you guys are still deciding on what works/looks best.

src/common/directives/creditCardCvv.directive.scss

wrandall22 · 2024-12-16T22:21:19Z

src/common/directives/creditCardCvv.directive.scss

+.give-modal-content, .branded-checkout {
+  .credit-card-cvv-label {
+    text-transform: uppercase;
+    font-weight: 500;


On my local, this is being overwritten by the bold above.

wrandall22 · 2024-12-16T22:21:45Z

src/common/directives/creditCardCvv.directive.scss

+    display: block;
+    margin-bottom: 4px;
+    &::after {
+      content: '*';


On my local, this is being overwritten by the : above.

wjames111 · 2024-12-26T17:33:17Z

Seems like the styling is working locally now, for some reason the changes aren't reflected on staging. Not sure if there's a cacheing issue.

wjames111 self-assigned this Oct 28, 2024

wjames111 added the On Staging Will be merged to the staging branch by Github Actions label Oct 28, 2024

wjames111 force-pushed the hideCvv-flag branch from 65c4157 to 64cfd40 Compare November 5, 2024 19:48

dr-bizz removed the On Staging Will be merged to the staging branch by Github Actions label Nov 8, 2024

wjames111 marked this pull request as draft November 8, 2024 16:05

wjames111 force-pushed the hideCvv-flag branch from 929aa54 to 24cde89 Compare November 19, 2024 20:35

wjames111 added the On Staging Will be merged to the staging branch by Github Actions label Nov 19, 2024

wjames111 marked this pull request as ready for review November 19, 2024 20:42

wjames111 requested a review from wrandall22 November 19, 2024 20:42

wrandall22 reviewed Nov 20, 2024

View reviewed changes

src/app/checkout/step-2/step-2.component.js Outdated Show resolved Hide resolved

wjames111 removed the On Staging Will be merged to the staging branch by Github Actions label Nov 20, 2024

wjames111 requested a review from wrandall22 November 20, 2024 19:26

wrandall22 requested changes Nov 20, 2024

View reviewed changes

dr-bizz requested changes Dec 6, 2024

View reviewed changes

wrandall22 reviewed Dec 9, 2024

View reviewed changes

wrandall22 reviewed Dec 12, 2024

View reviewed changes

wjames111 force-pushed the hideCvv-flag branch 2 times, most recently from b9a9e63 to 7988984 Compare December 12, 2024 23:46

CVV validation on all transactions.

6a2f32f

wjames111 force-pushed the hideCvv-flag branch from 7988984 to 6a2f32f Compare December 12, 2024 23:50

Fix display issue with cover fees.

9123795

wjames111 added 2 commits December 13, 2024 18:28

Add styles for creditCardCvv.directive.

c92ebd8

Add styles for creditCardCvv directive in BCO.

115ac0f

wrandall22 reviewed Dec 16, 2024

View reviewed changes

src/common/directives/creditCardCvv.directive.scss Show resolved Hide resolved

wrandall22 reviewed Dec 16, 2024

View reviewed changes

src/common/directives/creditCardCvv.directive.scss Show resolved Hide resolved

Uses tabs over spaces in scss file.

57360ce

wrandall22 requested changes Dec 16, 2024

View reviewed changes

wjames111 added On Staging Will be merged to the staging branch by Github Actions and removed On Staging Will be merged to the staging branch by Github Actions labels Dec 17, 2024

wjames111 added 2 commits December 23, 2024 12:39

Updates specificity in css to override default styles.

c31c35c

Add more style overrides.

c6a1bc5

		'{"/paymentmethods/crugive/giydsnjqgi=":"456","/paymentmethods/crugive/giydsnjqgy=":"321"}'
		'{"/paymentinstruments/orders/crugive/hfsdoylfhbswk…4tmljug5qtqllcg44wcljvhezgcntcmvtdeojwgy=":"456"}'

Updates hideCvv flag for edit payment methods and new payment methods. #1109

Are you sure you want to change the base?

Updates hideCvv flag for edit payment methods and new payment methods. #1109

Conversation

wjames111 commented Oct 28, 2024

wjames111 commented Nov 4, 2024

wrandall22 commented Nov 5, 2024

wjames111 commented Nov 5, 2024

wrandall22 commented Nov 5, 2024

wjames111 commented Nov 5, 2024

dr-bizz commented Nov 8, 2024

dr-bizz commented Nov 8, 2024

dr-bizz commented Nov 8, 2024

wjames111 commented Nov 8, 2024

wrandall22 commented Nov 8, 2024

dr-bizz commented Nov 8, 2024 • edited Loading

wjames111 commented Nov 13, 2024

wrandall22 commented Nov 13, 2024

wjames111 commented Nov 14, 2024

wrandall22 commented Nov 14, 2024

wjames111 commented Nov 14, 2024

wrandall22 left a comment

Choose a reason for hiding this comment

wjames111 commented Nov 20, 2024

dr-bizz left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wrandall22 commented Dec 6, 2024

dr-bizz commented Dec 6, 2024

Choose a reason for hiding this comment

wrandall22 commented Dec 12, 2024

wrandall22 commented Dec 12, 2024

rguinee commented Dec 12, 2024

wrandall22 commented Dec 12, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rguinee commented Dec 12, 2024 • edited Loading

wrandall22 commented Dec 12, 2024

rguinee commented Dec 12, 2024

wrandall22 commented Dec 12, 2024

wjames111 commented Dec 13, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wjames111 commented Dec 26, 2024

dr-bizz commented Nov 8, 2024 •

edited

Loading

rguinee commented Dec 12, 2024 •

edited

Loading