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!');
});

Related HOWTOs

Create a donation page

Did this answer your question?