Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Stripe Elements couldn't calculate its wow-effects because font-size #1465

Merged
merged 2 commits into from
Sep 6, 2021
Merged

Stripe Elements couldn't calculate its wow-effects because font-size #1465

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
74850d7
Stripe Elements could not calculate its wow-effects because font-size…
Gnito Aug 31, 2021
723d76a
Update changelog
Gnito Sep 6, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ way to update this template, but currently, we follow a pattern:

## Upcoming version 2021-XX-XX

- [fix] Font-size for Poppins font was too big for Stripe Elements on small screens.
[#1465](https://github.com/sharetribe/ftw-daily/pull/1465)
- [change] Updates to some of the libraries. React Intl had a breaking change v3 -> v5.
[#464](https://github.com/sharetribe/ftw-daily/pull/1464)
- [fix] Adblockers might block Google analytics (window.ga) and cause an error.
Expand Down
12 changes: 8 additions & 4 deletions src/forms/StripePaymentForm/StripePaymentForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,10 +71,14 @@ const stripeElementsOptions = {
],
};

// card (being a Stripe Elements component), can have own styling passed to it.
// However, its internal width-calculation seems to break if font-size is too big
// compared to component's own width.
const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;
const cardStyles = {
base: {
fontFamily: '"poppins", Helvetica, Arial, sans-serif',
fontSize: '18px',
fontSize: isMobile ? '14px' : '18px',
fontSmoothing: 'antialiased',
lineHeight: '24px',
letterSpacing: '-0.1px',
Expand Down Expand Up @@ -236,10 +240,10 @@ class StripePaymentForm extends Component {
// EventListener is the only way to simulate breakpoints with Stripe.
window.addEventListener('resize', () => {
if (this.card) {
if (window.innerWidth < 1024) {
this.card.update({ style: { base: { fontSize: '18px', lineHeight: '24px' } } });
if (window.innerWidth < 768) {
this.card.update({ style: { base: { fontSize: '14px', lineHeight: '24px' } } });
} else {
this.card.update({ style: { base: { fontSize: '20px', lineHeight: '32px' } } });
this.card.update({ style: { base: { fontSize: '18px', lineHeight: '24px' } } });
}
}
});
Expand Down