Create PaymentUIComponent

JavaScript

const cardComponent = componentsManager.create('card', {
   classes: {
       base: 'DemoElement',
       complete: 'DemoElement--complete',
       empty: 'DemoElement--empty',
       focus: 'DemoELement--focus'
   }
});

create(componentType, options?)
This method creates an instance of a PaymentUIComponent with the specified component type, and the options object.

Method Params

componentType required string
can be any of: card cardholderName cardNumber cardExpiry cardCvc cardPostalCode applePay googlePay paypal
options optional object
can have properties:

• classes - Set custom class names on the container DOM element when the PaymentUIComponent is in a particular state. It can have properties:
  • base string - The base class applied to the container. Defaults to ElementsComponent.
  • complete string - The class name to apply when the PaymentUIComponent is complete. Defaults to ElementsComponent--complete.
  • empty string - The class name to apply when the PaymentUIComponent is empty. Defaults to ElementsComponent--empty.
  • focus string - The class name to apply when the PaymentUIComponent is focused. Defaults to ElementsComponent--focus.
  • invalid string - The class name to apply when the PaymentUIComponent is invalid. Defaults to ElementsComponent--invalid.
• prefillValue optional string | object
  The value you want the PaymentUICompoent to be prefilled. For card component, it will take an object with key to be the specific input type and value to be the string you want to prefill. For other card input components, it will take the prefill string directly.
  • prefillValue: { ‘cardholderName’: ‘John Doe’ } // for card component, or
  • prefillValue: ‘John Doe’ for cardholderName component
  • Note that sensitive card information (card number, CVC, and expiration date) cannot be pre-filled
• styles optional coming soon