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

Jump to bottom

Fix stripe elements on paymentmethodsform too #1471

Merged
merged 2 commits into from
Sep 7, 2021
Merged

Fix stripe elements on paymentmethodsform too #1471

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
9a800c9
Font-size was too big for Stripe Elements on PaymentMethodsForm too
Gnito Sep 7, 2021
0e38b36
Update changelog
Gnito Sep 7, 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
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ way to update this template, but currently, we follow a pattern:
---

## Upcoming version 2021-XX-XX

- [fix] Font-size was too big for Stripe Elements on small screens on PaymentMethodsForm.
[#1471](https://github.com/sharetribe/ftw-daily/pull/1471)
- [fix] Remove unnecessary language import: fr.json
[#1469](https://github.com/sharetribe/ftw-daily/pull/1469)
- [fix] Font-size for Poppins font was too big for Stripe Elements on small screens.
Expand Down
12 changes: 8 additions & 4 deletions src/forms/PaymentMethodsForm/PaymentMethodsForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,10 +60,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 @@ -114,10 +118,10 @@ class PaymentMethodsForm extends Component {
this.card.addEventListener('change', this.handleCardValueChange);
// EventListener is the only way to simulate breakpoints with Stripe.
window.addEventListener('resize', () => {
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