Table of Contents
Where to start
Donation (v2) pages use pre-built UI components to securely collect payment information. These inputs are loaded within an iframe hosted by our payment service provider Stripe, and styles must be applied using JavaScript. We attempt to match the styles of other form inputs, but we also give you full control to customize the styles.
📌 You must use a font that is available in the Google Fonts library.
Payment_field variables
{% payment_field "card" %}A unified input that collects card number, expiration date, CVC, and zip/postal code (internationalized for the country of the provided card). Do not use with other variables.
{% payment_field "card_number" %}A discrete input that collects card number. Use with other discrete variables.
{% payment_field "card_expiry" %}A discrete input that collects card expiration date. Use with other discrete variables.
{% payment_field "card_cvc" %}A discrete input that collects CVC. Use with other discrete variables.
{% payment_field "postal_code" %}A discrete input that collects zip/postal code (internationalized for the country of the provided card). Use with other discrete variables.
An error container can be specified by adding an error-container variable to the tag. If no error container is defined, errors will appear in the default location underneath the input.
{% payment "card", error-container:".card-error" %}Styling payment input fields
The input element can be target as .StripeElement.
Pseudo classes can be targeted as:
.StripeElement--complete
.StripeElement--empty
.StripeElement--focus
.StripeElement--invalid
.StripeElement--webkit-autofill
Styling the elements must be done by attaching styles to the elements object. Here is the full list of available options.
In NationBuilder, styles can be added to the NB object via the paymentsOptions property.
Example, you can paste the following code at the bottom of your Donation V2 template:
<script>
NB.payments.elementOptions = {
style: {
base: {
lineHeight: '42px',
'::placeholder': {
color: '#999999',
fontSize: '15px'
}
},
invalid: {
color: '#999'
}
}
};
</script>
Event handlers
To set up event handlers for the input element, you can access it from the NB object:
NB.payments.elements.cardNumber
NB.payments.elements.cardExpiry
NB.payments.elements.cardCvc
NB.payments.elements.postalCode
Example:
NB.payments.elements.card.on( 'focus', function(event){
console.log('focused!');
});