Colors set in `threeDSecureParams` are mostly ignored #182

benomatis · 2021-05-04T23:34:26Z

I tried setting the main color (themeColors.brandBlue) everywhere I could, but the only thing that changed is the text in the middle - that's the colour everything that is now violet should have. How can I achieve that?

<StripeProvider
  publishableKey={key}
  threeDSecureParams={{
    backgroundColor: '#FFFFFF', // iOS only
    timeout: 5,
    label: {
      headingTextColor: themeColors.brandBlue,
      headingFontSize: 13
    },
    navigationBar: {
      headerText: 'Complete card authentication',
      statusBarColor: themeColors.brandBlue // Android only
    },
    footer: {
      // iOS only
      backgroundColor: themeColors.brandBlue,
      headingTextColor: '#FFFFFF',
      textColor: '#FFFFFF'
    },
    submitButton: {
      backgroundColor: themeColors.brandBlue,
      borderRadius: 0,
      textColor: '#FFFFFF',
      textFontSize: 14
    }
  }}>
  <Component />
</StripeProvider>

arekkubaczkowski · 2021-05-06T06:35:05Z

to change the navigation bar color you have to set also backgroundColor since statusBarColor concerns the system bar at the very top of the screen

 navigationBar: {
      headerText: 'Complete card authentication',
      statusBarColor: themeColors.brandBlue,
     backgroundColor: '#c0c0c0' // <-- this one
    },

but there is also some glitch with setting statusBarColor which doesn't work until we set a backgroundColor @michelleb-stripe could you take a look on this? it's about Stripe3ds2ToolbarCustomization

regarding the submit button I have noticed a bug which I have just fixed.

this is what I achieved with above hints and the button fix:

benomatis · 2021-05-06T10:12:06Z

@arekkubaczkowski This looks way better indeed, if the submit button will be fixed (when will that be released? I know I can just patch it in the interim with your fix), the only remaining thing I have not raised here is the spinning wheel that appears after I submit the card and before this popup appears, that's still purple. Any ways that could be changed?

...and one more thing: when I tap the 'Learn more about authentication' or 'Need help', the text below them is revealed, but those section titles get hidden, they then will show again if I type the down (up) arrow again - is this expected or did I set one of the colours to white where I should have not?

arekkubaczkowski · 2021-05-06T11:16:24Z

...and one more thing: when I tap the 'Learn more about authentication' or 'Need help', the text below them is revealed, but those section titles get hidden, they then will show again if I type the down (up) arrow again - is this expected or did I set one of the colours to white where I should have not?

yes, I think it's caused by changed some text color

the only remaining thing I have not raised here is the spinning wheel that appears after I submit the card and before this popup appears, that's still purple. Any ways that could be changed?

@michelleb-stripe any ideas how to change it?

benomatis · 2021-05-06T14:47:51Z

opened #185 for the loading spinner color bit

michelleb-stripe · 2021-05-06T15:49:31Z

to change the navigation bar color you have to set also backgroundColor since statusBarColor concerns the system bar at the very top of the screen
 navigationBar: {
      headerText: 'Complete card authentication',
      statusBarColor: themeColors.brandBlue,
     backgroundColor: '#c0c0c0' // <-- this one
    },
but there is also some glitch with setting statusBarColor which doesn't work until we set a backgroundColor @michelleb-stripe could you take a look on this? it's about Stripe3ds2ToolbarCustomization

regarding the submit button I have noticed a bug which I have just fixed.

this is what I achieved with above hints and the button fix:

Can you clarify what version of the SDK you are using? There was a related fix in version 16.7.1

michelleb-stripe · 2021-05-06T15:52:07Z

...and one more thing: when I tap the 'Learn more about authentication' or 'Need help', the text below them is revealed, but those section titles get hidden, they then will show again if I type the down (up) arrow again - is this expected or did I set one of the colours to white where I should have not?

yes, I think it's caused by changed some text color

the only remaining thing I have not raised here is the spinning wheel that appears after I submit the card and before this popup appears, that's still purple. Any ways that could be changed?

@michelleb-stripe any ideas how to change it?

Is the reference to the spinning wheel this one:

Open the sheet
Enter a 3DS2 card ****3220
Press Buy Button
Spinner appears with the card logo <-- This spinner?

benomatis · 2021-05-06T16:05:51Z

@michelleb-stripe

Can you clarify what version of the SDK you are using? There was a related fix in version 16.7.1

Sorry, what SDK do you mean exactly?

Is the reference to the spinning wheel this one:

Open the sheet

Enter a 3DS2 card ****3220

Press Buy Button

Spinner appears with the card logo <-- This spinner?

Yes

benomatis · 2021-05-06T16:07:50Z

@michelleb-stripe the spinner also appears when you tap the 'Complete Authentication' button.

benomatis · 2021-05-06T16:13:31Z

@arekkubaczkowski I just upgraded stripe-react-native locally following your fix and I'm seeing the Visa logo has now lost its colours. It doesn't look like it's your changes, per se, may have been something else elsewhere that I picked up with that upgrade (screenshot below).

@michelleb-stripe This also shows the spinner I'm talking about, between the card logo and the 'Processing...' text.

michelleb-stripe · 2021-05-06T17:02:13Z

Great! That is helpful information. What version of stripe-react-native are you using?

benomatis · 2021-05-06T17:14:40Z

I thought it only had 0.0.1, maybe I'm missing something @michelleb-stripe?

benomatis · 2021-05-06T19:56:06Z

@michelleb-stripe or @arekkubaczkowski pls tell me if this should go into a separate issue, but using the same set up as what you can see in the description, this is how it looks at the moment on iOS - the header appears to be a darker version of my picked color (appears to be influenced by footer.backgroundColor but it appears to make that color just darker for some reason), the Cancel button and the 'Complete Authentication' button appears to be the standard (iOS) blue:

michelleb-stripe · 2021-05-06T21:23:41Z

To summarize here are the issues still unresolved in this closed issue:

Android: The 3DS progress spinner color Android: 3D secure popup styling changes #185
Android: Color of the custom chrome tab status bar cannot be set (if this is still an issue, please add to Android: 3D secure popup styling changes #185 )
Android: The section titles under the 3DS2 complete authentication are hidden (or white) when expanded (if this is still an issue, please add to Android: 3D secure popup styling changes #185 )
iOS: The color under the Complete Authentication button is an odd color. I have passed along the iOS issue to our iOS team to take a look. They will follow up.

Are there any other issues that I missed?

benomatis · 2021-05-06T21:38:18Z

@michelleb-stripe I have a couple of tiny corrections to make...

I'll report the Android related ones in #185, but for the iOS one, there are 3 issues:

1. Background color of navigationBar. headerText (that reads 'Complete card authentication' for me as I had set it explicitly to that) is a darkened version of footer.backgroundColor - why is it darkened? Can this be changed?
2. The background color of the 'Complete Authentication' button is probably the iOS default.
3. The color of the 'Cancel' button next to navigationBar. headerText also appears to be the iOS default.

benomatis · 2021-05-06T21:48:36Z

@michelleb-stripe on point 1 above, I just tested: the header background colour on iOS appears to be a darkened version of footer.backgroundColor - very odd.

davidme-stripe · 2021-05-06T23:04:02Z

@benomatis, Can you try setting translucent: false in the navigationBar settings? That should disable the unexpected translucency effect in the bar.
@arekkubaczkowski I think in these mappers, the RN SDK will need to also call setButtonCustomization, as it's currently only making a copy of the button customization and then mutating it.
@arekkubaczkowski The mapper will also need to allow customization of STPThreeDSCustomizationButtonType.cancel.

benomatis · 2021-05-07T19:24:58Z

@davidme-stripe If I set translucent: false the header background color becomes black, and I have no way to change it. Below is a screenshot of it and my current settings:

    {
      backgroundColor: '#22ff00', // iOS only --- WHITE
      timeout: 5,
      label: {
        headingTextColor: themeColors.brandBlue,
        headingFontSize: 13
      },
      navigationBar: {
        translucent: false,
        barStyle: 1,
        headerText: 'Complete card authentication',
        statusBarColor: '#FFFFFF', // Android only
        backgroundColor: themeColors.brandBlue
      },
      footer: {
        // iOS only
        backgroundColor: '#ff0000' // WHITE
      },
      submitButton: {
        backgroundColor: themeColors.brandBlue,
        borderRadius: 0,
        textColor: '#ffcd00', // WHITE
        textFontSize: 14
      }
    }

benomatis · 2021-05-10T22:47:14Z

@davidme-stripe adding barTintColor solves the issue with the header colour, it looks pretty neat now except for the 'Cancel' and the 'Complete Authentication' buttons, they still appear to ignore any styling changes I attempt to do to them.

@michelleb-stripe Is this going to be taken care of in this issue (and thus re-opened?) or shall I open a new one?

michelleb-stripe · 2021-05-11T00:04:12Z

@benomatis, Do we have all the android related items captured in: #185?

benomatis · 2021-05-11T05:07:53Z

@michelleb-stripe yes, and for iOS, we really only have the issue with the colors of those 2 buttons remaining.

davidme-stripe · 2021-05-11T20:58:08Z

I filed a new issue for the iOS changes: #201

benomatis · 2021-05-11T21:56:38Z

thank you @davidme-stripe

benomatis changed the title ~~Colors set in threeDSecureParams are largely ignored~~ Colors set in threeDSecureParams are mostlz ignored May 5, 2021

benomatis changed the title ~~Colors set in threeDSecureParams are mostlz ignored~~ Colors set in threeDSecureParams are mostly ignored May 5, 2021

arekkubaczkowski mentioned this issue May 6, 2021

fix: 3ds button styling #184

Merged

thorsten-stripe closed this as completed in #184 May 6, 2021

benomatis mentioned this issue May 6, 2021

Android: 3D secure popup styling changes #185

Closed

2 tasks

davidme-stripe mentioned this issue May 11, 2021

Colors set for buttons in threeDSecureParams are ignored on iOS #201

Closed

arekkubaczkowski mentioned this issue May 19, 2021

add missing 3ds button props #234

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Colors set in `threeDSecureParams` are mostly ignored #182

Colors set in `threeDSecureParams` are mostly ignored #182

benomatis commented May 4, 2021

arekkubaczkowski commented May 6, 2021 •

edited

Loading

benomatis commented May 6, 2021 •

edited

Loading

arekkubaczkowski commented May 6, 2021 •

edited

Loading

benomatis commented May 6, 2021

michelleb-stripe commented May 6, 2021 •

edited

Loading

michelleb-stripe commented May 6, 2021

benomatis commented May 6, 2021

benomatis commented May 6, 2021

benomatis commented May 6, 2021

michelleb-stripe commented May 6, 2021

benomatis commented May 6, 2021

benomatis commented May 6, 2021 •

edited

Loading

michelleb-stripe commented May 6, 2021

benomatis commented May 6, 2021 •

edited by arekkubaczkowski

Loading

benomatis commented May 6, 2021

davidme-stripe commented May 6, 2021

benomatis commented May 7, 2021

benomatis commented May 10, 2021

michelleb-stripe commented May 11, 2021

benomatis commented May 11, 2021

davidme-stripe commented May 11, 2021

benomatis commented May 11, 2021

Colors set in threeDSecureParams are mostly ignored #182

Colors set in threeDSecureParams are mostly ignored #182

Comments

benomatis commented May 4, 2021

arekkubaczkowski commented May 6, 2021 • edited Loading

benomatis commented May 6, 2021 • edited Loading

arekkubaczkowski commented May 6, 2021 • edited Loading

benomatis commented May 6, 2021

michelleb-stripe commented May 6, 2021 • edited Loading

michelleb-stripe commented May 6, 2021

benomatis commented May 6, 2021

benomatis commented May 6, 2021

benomatis commented May 6, 2021

michelleb-stripe commented May 6, 2021

benomatis commented May 6, 2021

benomatis commented May 6, 2021 • edited Loading

michelleb-stripe commented May 6, 2021

benomatis commented May 6, 2021 • edited by arekkubaczkowski Loading

benomatis commented May 6, 2021

davidme-stripe commented May 6, 2021

benomatis commented May 7, 2021

benomatis commented May 10, 2021

michelleb-stripe commented May 11, 2021

benomatis commented May 11, 2021

davidme-stripe commented May 11, 2021

benomatis commented May 11, 2021

Colors set in `threeDSecureParams` are mostly ignored #182

Colors set in `threeDSecureParams` are mostly ignored #182

arekkubaczkowski commented May 6, 2021 •

edited

Loading

benomatis commented May 6, 2021 •

edited

Loading

arekkubaczkowski commented May 6, 2021 •

edited

Loading

michelleb-stripe commented May 6, 2021 •

edited

Loading

benomatis commented May 6, 2021 •

edited

Loading

benomatis commented May 6, 2021 •

edited by arekkubaczkowski

Loading