Braintree-web: Custom font-family in hosted fields?

[rbsmidt]

I'm currently working on a project, where we're using Braintree Hosted Fields for our checkout fase. Really neat tool.

I do have an issue using my custom font-family, though. Is it at all possible to specify font-family based on a font imported in my stylesheets, or is it only possible to use system fonts?
I've tried the monospace-font from your example in the docs, which works fine. But my paid font (Brown Pro) isn't working.

I also noticed, that if i inspect the input element in the browser, the font-family value is without quotation marks, event if i try adding them like

'font-family': '\"BrownPro\"'

So my question in short - is it possible at all to use custom fonts, and if so, (how) am i doing it wrong?

Best regards

[EvanHahn]

Thanks for your feedback. You're not doing anything wrong—font-family customization is not supported in Hosted Fields.

We don't currently have plans to add this feature, but we appreciate your input, and we'll take this request into consideration when planning future projects.

[atleykins]

I would like to second the request for support of font-family customization

[ngzhongcai-zz]

+1

[raliste]

+1

If it doesn't affect PCI, why not? You could even allow well-known providers (and PCI-DSS approved) such as Google fonts if third-party security is an issue.

[EvanHahn]

If it doesn't affect PCI, why not?

Turns out that it's a little more nuanced than that, unfortunately. For PCI and security reasons, we can't simply include third-party code into Hosted Fields, regardless of the party.

Of course, we would like to solve this and we plan to investigate feasibility of securely offering font customization, though we can't offer a timeline right now.

[micahlisonbee]

+1

[menzo]

+1

[NuckChorris]

Would it not be viable (security-wise) to allow Google Web Fonts at least? I mean, they've already been vetted by Google and then processed/subsetted by their servers, and they provide it all over HTTPS, and you don't even have to use their CSS or JS — you can just take the font name and weights and generate the @font-face directive yourselves, thus preventing third-party code from being run in a hosted field.

The worst that can happen, I suppose, is an arbitrary code execution exploit in the browser's font parser; but that would be already be a doomsday scenario (it could possibly exploit Braintree even without being in the same frame) and is rather more unlikely with WOFF files (since WOFF files are built for the web from day one), so I can't imagine the risk factor is that high (especially if you lock it down to WOFF only)

This and the fact that I can't control the interactivity of the form fields (making them feel like complete shit to the user) makes me almost inclined to just accept SAQ-A-EP instead of SAQ-A

[mrak]

@NuckChorris Unfortunately, to qualify for SAQ A compliance the iframes and pages served by your PCI DSS compliant payment provider must have all elements served originate only and directly from the payment provider^[1].

In the case of Google Fonts, the fonts would originate from Google and would force SAQ A-EP compliance.

[1] [Understanding the SAQs for PCI DSS version 3](https://www.pcisecuritystandards.org/documents/Understanding_SAQs_PCI_DSS_v3.pdf)

[NuckChorris]

There's obviously some nuance here: Google definitely is PCI DSS compliant in their payment services, but it's doubtful that Google Fonts is. The PCI document says "PCI DSS validated third-party
service provider(s)" but what happens when a third-party provider isn't doing anything at all related to payment cards? What kind of PCI SAQ do they use then?

It would be nice to get clarification from PCI, or a yes/no from Google about whether their fonts service is PCI DSS compliant. Worst case scenario, Google provides a dump of all the web fonts which you could safely put on your own servers and provide a fancy style feature.

[micahlisonbee]

Stripe.js allows the developer to use his own HTML/CSS all together. This is why I switched to Stripe, such a smooth, customizable UI build process. Could Braintree switch to a similar method?

[atleykins]

I'm lobbying super hard to get my company to switch to Stripe.

[mrak]

The interpretation of PCI DSS v3 held by Braintree and the external PCI quality assessors that verify our compliance forbid elements originating from any third party within our Hosted Fields solution.

Barring a more lenient revision to PCI DSS we cannot allow usage of services such as Google Fonts within Hosted Fields and continue to claim SAQ A.

Other payment providers may offer more lenient solutions while claiming SAQ A compliance, but Braintree has historically erred on the side of safety when abiding by PCI regulations.

[micahlisonbee]

@mrak What about not using hosted fields like Stripe? Change the entire strategy...

[NuckChorris]

Just hand us the gun and let us shoot ourselves in the foot, IMO. Your top competitor clearly has gotten away with it, might as well offer the same with warning labels

[mrak]

If SAQ A is not a requirement for you, we do offer non-SAQ A solutions that allow you to use your own form and input fields.

See our developer documentation at Credit Cards / Client-side Implementation for details.

[tofutim]

Can you just put the fonts on your machine?

[EvanHahn]

@tofutim Installing a font on your machine will only display the font on your machine. Other customers who don't have the font installed will not see the font.

[tofutim]

I mean you should install the Google Fonts on Braintree's server so that
they are provided to the iframe.

On Mon, Nov 7, 2016 at 8:15 AM, Evan Hahn [email protected] wrote:

@tofutim https://github.com/tofutim Installing a font on your machine
will only display the font on your machine. Other customers who don't have
the font installed will not see the font.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/braintree/braintree-web/issues/75#issuecomment-258880622,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAJoRs70wOC_xsGLrXR1-C33pdA4YC5Uks5q706JgaJpZM4GC6_1
.

[lilaconlee]

@tofutim This is something we've looked into internally, but have no plans of implementing at the moment. That being said, we definitely understand wanting custom fonts and will keep that in mind for the future.

[tofutim]

I already love you guys at Braintree. If you can get this done, I'll love
you even more. :)

On Wed, Nov 9, 2016 at 1:54 PM, Lila Conlee [email protected]
wrote:

@tofutim https://github.com/tofutim This is something we've looked into
internally, but have no plans of implementing at the moment. That being
said, we definitely understand wanting custom fonts and will keep that in
mind for the future.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/braintree/braintree-web/issues/75#issuecomment-259537535,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAJoRjPJIE93Byf2yWDQlffHinAQZna2ks5q8kEggaJpZM4GC6_1
.

[carlgunderson]

If this is the case, then perhaps adding a blurb near the example on this page would be helpful: https://developers.braintreepayments.com/guides/hosted-fields/styling/javascript/v3

braintree.hostedFields.create({
  // ...
  styles: {
    // Style all elements
    'input': {
      'font-size': '16px',
      'color': '#3A3A3A'
    },

    // Styling a specific field
    '.number': {
      'font-family': 'monospace'
    },

    // Styling element state
    ':focus': {
      'color': 'blue'
    },
    '.valid': {
      'color': 'green'
    },
    '.invalid': {
      'color': 'red'
    },

    // Media queries
    // Note that these apply to the iframe, not the root window.
    '@media screen and (max-width: 700px)': {
      'input': {
        'font-size': '14px'
      }
    }
  }
}, function (err, hostedFieldsInstance) { /* ... */ });

[crookedneighbor]

@carlgunderson I've passed your feedback onto our docs team.

[alovak]

Guys at Braintree, if you need an idea on how to solve it... here it is.

You accept cssSrc option with url to any external css file. But in reality you will use proxy to load it like this:

https://secure.braintree.com/sanitized-font?url=https://domain.com/style.css

On your side you will load file and keep in it only things that are safe.

Here is the repo for nginx/lua for this: https://github.com/leafo/web_sanitize

All sanitized files can be cached and stored on your side.

[ngryman]

FYI Stripe Elements does support custom fonts via cssSrc like mentioned by @alovak: https://stripe.com/docs/stripe-js/reference#stripe-elements while still supporting SAQ-A. Any chance you could revisit this issue given that information? Thanks!

[jazzpaths]

FYI Stripe Elements does support custom fonts via cssSrc like mentioned by @alovak: https://stripe.com/docs/stripe-js/reference#stripe-elements while still supporting SAQ-A. Any chance you could revisit this issue given that information? Thanks!

Chances are they're going to delete your comment (and mine too) as it happened to me for the same reason few weeks ago...

[crookedneighbor]

@jazzpaths We don't have a practice of deleting Github comments. Can you reach out to our support team with details and reference this issue so we can figure out what happened? https://help.braintreepayments.com/

[crookedneighbor]

For now, this feature is still not on our roadmap, but I will bring it up with the team again.