Add brand icons to card form #5069

jameswoo-stripe · 2022-05-25T18:39:34Z

Summary

Add brand icons to card form

Motivation

Card brand filtering

Testing

Added tests
Modified tests
Manually verified

Screenshots

Before	After
before screenshot	after screenshot

cardbrandicons.mov

Fixed icon alignment:

Changelog

github-actions · 2022-05-25T18:44:29Z

Diffuse output:

OLD: paymentsheet-example-release-master.apk (signature: none)
NEW: paymentsheet-example-release-pr.apk (signature: none)

          │            compressed            │           uncompressed           
          ├───────────┬───────────┬──────────┼───────────┬───────────┬──────────
 APK      │ old       │ new       │ diff     │ old       │ new       │ diff     
──────────┼───────────┼───────────┼──────────┼───────────┼───────────┼──────────
      dex │  13.9 MiB │  13.9 MiB │ +2.9 KiB │  46.4 MiB │  46.4 MiB │ +8.2 KiB 
     arsc │   1.7 MiB │   1.7 MiB │      0 B │   1.7 MiB │   1.7 MiB │      0 B 
 manifest │   3.5 KiB │   3.5 KiB │      0 B │  15.7 KiB │  15.7 KiB │      0 B 
      res │ 825.4 KiB │ 825.4 KiB │      0 B │   1.3 MiB │   1.3 MiB │      0 B 
   native │   5.4 MiB │   5.4 MiB │      0 B │  13.4 MiB │  13.4 MiB │      0 B 
    asset │     3 MiB │     3 MiB │   -509 B │     3 MiB │     3 MiB │   -509 B 
    other │  79.9 KiB │  79.9 KiB │      0 B │ 154.8 KiB │ 154.8 KiB │      0 B 
──────────┼───────────┼───────────┼──────────┼───────────┼───────────┼──────────
    total │  24.8 MiB │  24.8 MiB │ +2.4 KiB │    66 MiB │    66 MiB │ +7.7 KiB 

         │          raw           │             unique              
         ├────────┬────────┬──────┼────────┬────────┬───────────────
 DEX     │ old    │ new    │ diff │ old    │ new    │ diff          
─────────┼────────┼────────┼──────┼────────┼────────┼───────────────
   files │      4 │      4 │    0 │        │        │               
 strings │ 225682 │ 225716 │  +34 │ 196505 │ 196527 │ +22 (+59 -37) 
   types │  39326 │  39333 │   +7 │  35907 │  35911 │  +4 (+8 -4)   
 classes │  33273 │  33277 │   +4 │  33273 │  33277 │  +4 (+8 -4)   
 methods │ 202475 │ 202512 │  +37 │ 194389 │ 194415 │ +26 (+55 -29) 
  fields │ 150049 │ 150055 │   +6 │ 149051 │ 149057 │  +6 (+24 -18) 

 ARSC    │ old  │ new  │ diff 
─────────┼──────┼──────┼──────
 configs │  293 │  293 │  0   
 entries │ 5798 │ 5798 │  0

APK

     compressed     │    uncompressed     │                               
─────────┬──────────┼──────────┬──────────┤                               
 size    │ diff     │ size     │ diff     │ path                          
─────────┼──────────┼──────────┼──────────┼───────────────────────────────
 3.3 MiB │ +3.1 KiB │  8.9 MiB │ +7.9 KiB │ ∆ classes2.dex                
 6.8 KiB │   -509 B │  6.7 KiB │   -509 B │ ∆ assets/dexopt/baseline.prof 
 3.8 MiB │   -213 B │ 11.4 MiB │   +264 B │ ∆ classes3.dex                
─────────┼──────────┼──────────┼──────────┼───────────────────────────────
 7.1 MiB │ +2.4 KiB │ 20.3 MiB │ +7.7 KiB │ (total)

DEX

STRINGS:

   old    │ new    │ diff          
  ────────┼────────┼───────────────
   196505 │ 196527 │ +22 (+59 -37) 
  + &
  ���
  ��
  ���
  ���
  
  �� 
  ���
  ���
  ���
  �������2�0�B���¢����J��
  ��0�2�������0H�J��
  ��0�2�������0J���������0�0�2�������0H�J���������0�0�2�����0H�R�����0�X�T¢��
  R���������0�0�¢��
  �����	¨��
  + (
  ���
  ���
  
  ���
  ���
  ���
  ���
  ��
  ���
  ���
  ����2�0�B#��������0��
  ��������0�������0�¢����J	����0�HÆ�J�������0�HÆ�¢���	J	����0�HÆ�J.����02�������0�2
  ��������0�2�������0�HÆ�¢����J�����0�2�������0�HÖ�J	����0�HÖ�J	����0�HÖ�R�������0�¢�
  
  ��
  �����	R�����0�¢��
  �����R�����0�¢��
  �����
  ¨��
  + .
  ���
  ���
  
  �� 
  ���
  ��	
  ���
  
  ��
  
  ���
  
  ���
  ����2�0�B!���������0�0����������0�0�¢����J��
  ������0�0�HÆ�J���������0�0�HÆ�J)���02�����������0�0�2�����������0�0�HÆ�J��
  ��0�2�������0�HÖ�J	����0�HÖ�J	����0�HÖ�R���������0�0�¢��
  ������R���������0�0�¢��
  ���	��¨��
  + 8
  ���
  ���
  
  ���
  ���
  ���
  ���
  ��
  ���
  ���
  
  ��_
  ���
  ���
  ������� /2�����00�:�/B����������0�������0���������0���������0���������0������	������0�0
  ��������0��
  �������0
  ����������0�����0
  0�������������0
  ����0�0�������0�¢����J�����0�2�����0�H�J�� ����0
  2�����0�H�J��!��02��#����0�J��_��02�������0�J��%��02��&��0�R�����0�¢��
  ������R�����0�¢��
  ������R��	������0�0
  ¢��
  ������R�����0�X��¢��
  R�����0�¢��
  ������R�����0�¢��
  ������R�����0�¢��
  ������R�����0�8F¢��������R���������0�����0
  0�X��¢��
  R������0
  X��¢��
  R�����0�X��¢��
  R���������0
  ����0�0�X��¢��
  j��'j��(j��)j��*j��+j��,j��-j��.¨�0
  + J
  
  ���
  
  �� 
  ���
  
  ���
  ���
  ���
  
  ���
  
  ���
  ���
  ���
  ���
  ���
  ���
  ���
  ���
  ����#���0�2��������0�0�2�����0�H�¢�����O����0�2��	��0
  2�������02��
  ��0�2�����0�2�������������0�����0�0�H�ø�ø��¢������������0�2�������0�H�¢�����[����0�2��	��0
  2�������02
  ��������0�2��
  ��0�2�����0�2�������������0�����0�0�H�ø�ø��¢������������0�2�����0�2�����0�H�¢��� ���
  ���
  ��¡�0�¨�!
  + _dividerHeight
  + _icons
  + _this_produceState
  + (ILjava/lang/Integer;Z)Lcom/stripe/android/ui/core/elements/TextFieldIcon_Trailing;
  + (Lcom/stripe/android/ui/core/elements/TextFieldIcon_Trailing;ZLandroidx/compose/runtime/Composer;I)V
  + (Ljava/lang/String;ILjava/lang/String;Ljava/lang/String;IIILjava/util/Set;ILjava/util/regex/Pattern;Ljava/util/Map;Ljava/util/Map;I)V
  + (Ljava/util/List;ZLandroidx/compose/runtime/Composer;I)V
  + , animatedIcons=
  + , isTintable=
  + AnimatedIcons
  + AnimatedIcons_lambda-16
  + C(AnimatedIcons)
  + Lcom/stripe/android/model/CardBrand_special__inlined_sortedBy_1;
  + Lcom/stripe/android/ui/core/elements/RowElementUIKt_RowElementUI_3_1_1_1;
  + Lcom/stripe/android/ui/core/elements/TextFieldIcon_MultiTrailing;
  + Lcom/stripe/android/ui/core/elements/TextFieldIcon_Trailing;
  + Lcom/stripe/android/ui/core/elements/TextFieldUIKt_AnimatedIcons_1;
  + Lcom/stripe/android/ui/core/elements/TextFieldUIKt_AnimatedIcons_2;
  + Lcom/stripe/android/ui/core/elements/TextFieldUIKt_AnimatedIcons_3;
  + Lcom/stripe/android/ui/core/elements/TextFieldUIKt_AnimatedIcons_target_2;
  + MultiTrailing
  + MultiTrailing(staticIcons=
  + SMAP
  CardBrand.kt
  Kotlin
  *S Kotlin
  *F
  + 1 CardBrand.kt
  com/stripe/android/model/CardBrand
  + 2 _Collections.kt
  kotlin/collections/CollectionsKt___CollectionsKt
  *L
  1#1,260:1
  286#2,2:261
  764#2:263
  855#2,2:264
  1043#2:266
  *S KotlinDebug
  *F
  + 1 CardBrand.kt
  com/stripe/android/model/CardBrand
  *L
  198#1:261,2
  254#1:263
  254#1:264,2
  255#1:266
  *E
  
  + SMAP
  CardBrand.kt
  Kotlin
  *S Kotlin
  *F
  + 1 CardBrand.kt
  com/stripe/android/model/CardBrand_Companion
  + 2 _Arrays.kt
  kotlin/collections/ArraysKt___ArraysKt
  *L
  1#1,260:1
  3785#2:261
  4300#2,2:262
  1275#2,2:264
  *S KotlinDebug
  *F
  + 1 CardBrand.kt
  com/stripe/android/model/CardBrand_Companion
  *L
  239#1:261
  239#1:262,2
  249#1:264,2
  *E
  
  + SMAP
  CardNumberController.kt
  Kotlin
  *S Kotlin
  *F
  + 1 CardNumberController.kt
  com/stripe/android/ui/core/elements/CardNumberController
  + 2 Transform.kt
  kotlinx/coroutines/flow/FlowKt__TransformKt
  + 3 Emitters.kt
  kotlinx/coroutines/flow/FlowKt__EmittersKt
  + 4 SafeCollector.common.kt
  kotlinx/coroutines/flow/internal/SafeCollector_commonKt
  *L
  1#1,168:1
  47#2:169
  49#2:173
  47#2:174
  49#2:178
  47#2:179
  49#2:183
  47#2:184
  49#2:188
  50#3:170
  55#3:172

...✂

skyler-stripe

One thing to check before approving.

How does this look with animations off? Curious if it doesn't animate, I wonder if this might cause tests to be flakey. Is this enabled by default otherwise I think you'll need to update the screenshot tests.

Does it look good with bigger font sizes? You can change that via this guy: https://github.com/stripe/stripe-android/blob/master/paymentsheet/src/main/java/com/stripe/android/paymentsheet/PaymentSheet.kt#L403

jameswoo-stripe · 2022-05-25T21:43:00Z

One thing to check before approving.

How does this look with animations off? Curious if it doesn't animate, I wonder if this might cause tests to be flakey. Is this enabled by default otherwise I think you'll need to update the screenshot tests.

Does it look good with bigger font sizes? You can change that via this guy: https://github.com/stripe/stripe-android/blob/master/paymentsheet/src/main/java/com/stripe/android/paymentsheet/PaymentSheet.kt#L403

✅ The icons don't change size when the sizeScaleFactor changes.
✅ I tried turning off animations through Accessibility and developer settings, no changes.

csabol-stripe · 2022-05-26T20:51:21Z

Could we update this so the trailing edge of the card brand icons lines up with the trailing edge of the cvc icon?

michelleb-stripe · 2022-05-27T13:13:52Z

payments-model/src/main/java/com/stripe/android/model/CardBrand.kt

@@ -45,6 +45,30 @@ enum class CardBrand(
     */
    private val variantMaxLength: Map<Pattern, Int> = emptyMap(),
 ) {
+    Visa(


Is this changed so that the order appears correctly in the UI? If so it might be better to have a getOrderedBrandList function. I can see adding a brand, and then not realizing I was impacting functionality, or changing the order around in the enum. The test would check it, but it might be better to be explicit. If there was a question you could look at the caller of getOrderedBrandList and see how it was being used.

The one thing I don't like is that we will need to maintain this list if there is a new CardBrand added, I think it can be easily missed.

In this situation I feel like it's better to have an explicit list. Your test could also assert that the orderedBrandList function has the same length as CardBrand.values()

I don't really see the difference between having a test that tests the order, and this. It will get caught either way.

I agree that the test will catch the order, but if I don't understand that the order is used in a particular place in the code, I might just change the values in that function to make the test pass.

I think adding something to the test to make it clear, or modifying the function name to make it clear that there is a method to the ordering and it does matter and should not just be changed.

I added a new field to CardBrand called renderingOrder let me know what you think of this approach

sounds great, thanks James!

payments-ui-core/src/main/java/com/stripe/android/ui/core/elements/CardNumberController.kt

michelleb-stripe · 2022-05-27T15:01:31Z

This looks really slick!

jameswoo-stripe · 2022-05-27T21:11:41Z

Could we update this so the trailing edge of the card brand icons lines up with the trailing edge of the cvc icon?

@csabol-stripe Done!

jameswoo-stripe requested a review from csabol-stripe May 25, 2022 18:39

jameswoo-stripe requested review from brnunes-stripe, michelleb-stripe, skyler-stripe and ccen-stripe as code owners May 25, 2022 18:39

jameswoo-stripe force-pushed the jameswoo/card_brand_filtering_add_brand_icons_to_card_field branch 3 times, most recently from aac80fe to 27f0cab Compare May 25, 2022 20:45

skyler-stripe reviewed May 25, 2022

View reviewed changes

jameswoo-stripe force-pushed the jameswoo/card_brand_filtering_add_brand_icons_to_card_field branch from 27f0cab to 7d844aa Compare May 25, 2022 20:49

michelleb-stripe reviewed May 27, 2022

View reviewed changes

payments-ui-core/src/main/java/com/stripe/android/ui/core/elements/CardNumberController.kt Outdated Show resolved Hide resolved

jameswoo-stripe assigned brnunes-stripe, michelleb-stripe and skyler-stripe May 27, 2022

skyler-stripe previously approved these changes May 28, 2022

View reviewed changes

stripe-ci unassigned skyler-stripe May 28, 2022

jameswoo-stripe added 2 commits May 31, 2022 11:31

Add brand icons to card form

73d97ec

Update RowElementUI and screenshot tests

1e2a029

jameswoo-stripe dismissed skyler-stripe’s stale review via 54c9b81 May 31, 2022 18:39

jameswoo-stripe force-pushed the jameswoo/card_brand_filtering_add_brand_icons_to_card_field branch from a31aea7 to 54c9b81 Compare May 31, 2022 18:39

jameswoo-stripe requested a review from awush-stripe as a code owner May 31, 2022 18:39

michelleb-stripe previously approved these changes May 31, 2022

View reviewed changes

stripe-ci unassigned michelleb-stripe May 31, 2022

Refactor ordering

95cbf84

jameswoo-stripe dismissed michelleb-stripe’s stale review via 95cbf84 May 31, 2022 19:21

jameswoo-stripe force-pushed the jameswoo/card_brand_filtering_add_brand_icons_to_card_field branch from 54c9b81 to 95cbf84 Compare May 31, 2022 19:21

michelleb-stripe approved these changes May 31, 2022

View reviewed changes

jameswoo-stripe merged commit b1742cb into master May 31, 2022

jameswoo-stripe deleted the jameswoo/card_brand_filtering_add_brand_icons_to_card_field branch May 31, 2022 19:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add brand icons to card form #5069

Add brand icons to card form #5069

jameswoo-stripe commented May 25, 2022 •

edited

github-actions bot commented May 25, 2022 •

edited

skyler-stripe left a comment

jameswoo-stripe commented May 25, 2022

csabol-stripe commented May 26, 2022

michelleb-stripe May 27, 2022

jameswoo-stripe May 27, 2022

skyler-stripe May 27, 2022

jameswoo-stripe May 27, 2022

michelleb-stripe May 31, 2022

jameswoo-stripe May 31, 2022

michelleb-stripe May 31, 2022

michelleb-stripe commented May 27, 2022

jameswoo-stripe commented May 27, 2022

Add brand icons to card form #5069

Add brand icons to card form #5069

Conversation

jameswoo-stripe commented May 25, 2022 • edited

Summary

Motivation

Testing

Screenshots

Changelog

github-actions bot commented May 25, 2022 • edited

skyler-stripe left a comment

Choose a reason for hiding this comment

jameswoo-stripe commented May 25, 2022

csabol-stripe commented May 26, 2022

michelleb-stripe May 27, 2022

Choose a reason for hiding this comment

jameswoo-stripe May 27, 2022

Choose a reason for hiding this comment

skyler-stripe May 27, 2022

Choose a reason for hiding this comment

jameswoo-stripe May 27, 2022

Choose a reason for hiding this comment

michelleb-stripe May 31, 2022

Choose a reason for hiding this comment

jameswoo-stripe May 31, 2022

Choose a reason for hiding this comment

michelleb-stripe May 31, 2022

Choose a reason for hiding this comment

michelleb-stripe commented May 27, 2022

jameswoo-stripe commented May 27, 2022

jameswoo-stripe commented May 25, 2022 •

edited

github-actions bot commented May 25, 2022 •

edited