Customer Card Form Reference

Description

Displays a credit card form that adds, updates, or removes a credit card for a customer.

Note: These features are only available on the LemonStand Premium subscription plan.

{{ customerCardForm(string context, array options, array attributes) }}

add

{{ customerCardForm('add') }}

add, with options and attributes

{{ customerCardForm('add', {
    'options': {
      'number': {
        'label': 'Card Number',
        'class': 'another-card-number-class',
        'style':'font-family: arial;',
        'placeholder': 'Card number',
      },
      'cvv': {
        'label': 'CVV',
        'placeholder': 'XXX',
      },
      'full_name': {
        'label': 'Full Name',
        'placeholder': 'Cardholder name',
      },
      'expiry': {
        'placeholder': 'MM/YYYY',
      }
    },
  },{
    'data-ajax-update': '#content=partial-customer'
  })
}}

update

{{ customerCardForm('update', { card: card }) }}

update, with options and attributes

{{ customerCardForm('update', {
    'card': card ,
    'options': {
      'number': {
        'label': 'Card Number',
        'placeholder': 'Card number',
      },
      'cvv': {
        'label': 'CVV',
        'placeholder': 'XXX',
      },
      'full_name': {
        'label': 'Full Name',
        'placeholder': 'Cardholder name',
      },
      'expiry': {
        'placeholder': 'MM/YYYY',
      }
    },
  },{
    'data-ajax-update': '#content=partial-customer'
  })
}}

Configuration Fields

Variable Usage
options.number Configuration for the form's number field.
number: {
    label: 'Card Number',
    class: 'another-card-number-class',
    placeholder: 'Card number',
    style:'font-family: arial;'
}
options.number.placeholder Placeholder configuration for the form's number field.
number: {
     placeholder: 'Credit Card Number'
}
options.number.style Inline style configuration for the form's number field.
number: {
    style: 'font-family: Courier New;'
 }
options.cvv Configuration for the form's cvv field.
cvv: {
    label: 'CVV',
    placeholder: 'XXX',
    style:'font-family: arial;'
}
options.cvv.placeholder Placeholder configuration for the form's cvv field.
cvv: {
     placeholder: '***'
}
options.cvv.style Inline style configuration for the form's cvv field.
cvv: {
    style: 'font-family: Courier New;'
 }
options.full_name Configuration for the form's full_name field.
full_name: {
    label: 'Full Name',
    placeholder: 'Cardholder name'
}
options.full_name.placeholder Placeholder configuration for the form's full_name field.
full_name: {
     placeholder: 'John Q. Public'
}
options.expiry Configuration for the form's expiry field.
expiry: {
    label: 'Expiration Date',
    placeholder: 'MM/YYY'
}
options.expiry.placeholder Placeholder configuration for the form's expiry field.
expiry: {
     placeholder: 'MM/YYYY'
}
options.submit Configuration for the form's submit button.
submit: {
    ​class: 'big-btn',
    value: 'Update a card'
}
options.delete Configuration for the form's delete button.
delete: {
    ​class: 'big-btn',
    value: 'Delete a card'
}
options.is_default Configuration for the form's is_default checkbox.
is_default: {
    label: 'Make card default',
    enabled: true
}
options.is_default.enabled Set to true to for field visibility, false to hide it.
is_default: {
    enabled: true
 }
options.<field>.label Configuration for a field's label.
full_name: {
    label: 'Full Name'
 }
options.<field>.class Associates a field with a string of CSS classes.
submit: {
    class: 'big-btn'
 }