Styling and Customization

Form Styles

Customize the card form appearance using the styles object in the form configuration:

await revup.init({
  containerId: 'revup-container',
  form: {
    styles: {
      input: {
        color: '#333333',
        fontSize: 16,
        border: '1px solid #cccccc',
        borderRadius: 4,
        height: 40,
        backgroundColor: '#ffffff'
      },
      inputFocus: {
        borderColor: '#0066cc',
        boxShadow: '0 0 0 2px rgba(0,102,204,0.2)',
        backgroundColor: '#ffffff'
      },
      inputHover: {
        borderColor: '#666666',
        backgroundColor: '#f9f9f9'
      },
      inputError: {
        borderColor: '#dc3545',
        color: '#dc3545'
      },
      inputLabel: {
        color: '#666666',
        fontSize: 14,
        fontWeight: 500
      },
      inputValidation: {
        borderColor: '#28a745',
        color: '#28a745'
      },
      tooltip: {
        iconColor: '#666666',
        backgroundColor: '#333333',
        textColor: '#ffffff',
        fontSize: 12,
        padding: 8
      }
    },
    showZipCode: true
  }
});

Available Style Properties

ELEMENT	CSS PROPERTIES
input	color, fontSize, border, borderRadius, height, backgroundColor
inputFocus	borderColor, boxShadow, backgroundColor
inputHover	borderColor, backgroundColor
inputError	color, borderColor
inputLabel	color, fontSize, fontWeight
inputValidation	color, borderColor
tooltip	iconColor, backgroundColor, textColor, fontSize, padding

Language Configuration

Set the display language for form placeholders and APM buttons:

await revup.init({
  containerId: 'revup-container',
  language: 'es_ES' // Spanish
});

The SDK supports multiple languages including English, Spanish, French, German, Italian, Dutch, Portuguese, Polish, Czech, Japanese, Korean, Chinese (Simplified and Traditional), Arabic, Russian, Turkish, Ukrainian, and Thai.