Mark Reeves
803bba7938
- Adds the following fields to the subscription payment form: - Cardholder Name - Country - Postal Code - Address Line 1 - City - State or Province - Stripe recommends Cardholder Name & Country for verification; Cardholder Name, Country, and State/Province for US/Canada selections are required fields - All fields are passed to Stripe for verification on submit - Fields are also captured on the customer record in Stripe, under Billing Details
78 lines
1.3 KiB
SCSS
78 lines
1.3 KiB
SCSS
.subscribe-buttons {
|
|
align-items: stretch;
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: left;
|
|
|
|
.btn-discourse-subscriptions-subscribe {
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
margin: 0.25em;
|
|
padding: 1em;
|
|
width: 6em;
|
|
}
|
|
}
|
|
|
|
.btn-payment {
|
|
width: 100%;
|
|
}
|
|
|
|
.anon #card-element {
|
|
display: none;
|
|
}
|
|
|
|
.StripeElement {
|
|
box-sizing: border-box;
|
|
|
|
padding: 10px;
|
|
height: 40px;
|
|
margin-bottom: 9px;
|
|
|
|
border: 1px solid var(--primary-medium);
|
|
background-color: var(--secondary);
|
|
|
|
font-size: $base-font-size;
|
|
font-family: $base-font-family;
|
|
}
|
|
|
|
.StripeElement--focus {
|
|
border-color: var(--tertiary);
|
|
box-shadow: shadow("focus");
|
|
outline: 1px solid var(--tertiary);
|
|
}
|
|
|
|
.StripeElement--invalid {
|
|
border-color: var(--danger);
|
|
}
|
|
|
|
.StripeElement--webkit-autofill {
|
|
color: var(--quaternary);
|
|
}
|
|
|
|
.subscribe-promo-code,
|
|
.subscribe-name,
|
|
.subscribe-address-line1,
|
|
.subscribe-address-city,
|
|
.subscribe-address-state,
|
|
.subscribe-address-country-select,
|
|
.subscribe-address-state-select,
|
|
.subscribe-address-postal-code {
|
|
width: 100%;
|
|
}
|
|
|
|
.subscribe-address-country-select,
|
|
.subscribe-address-state-select {
|
|
margin-bottom: 9px;
|
|
}
|
|
|
|
@media all and (min-width: 1350px) {
|
|
.address-fields {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
& > input,
|
|
& > .select-kit {
|
|
width: calc(50% - 4.5px);
|
|
}
|
|
}
|
|
}
|