Developer docs
/
FramePay
/
Element
Last updated
These docs are intended for a developer audience.Dismiss

Element instance

When an element is mounted you can cache its instance into a variable and use it to listen for additional events as the customer interacts the element. This applies only to payment card and bank account fields.

// mount a combined card element on a container `div`
var card = Framepay.card.mount('#card');

element.on()

Use the on() method to attach specific handlers to events. These handlers will be triggered when the customer interacts with the card element.

The method accepts two arguments:

  • eventName: a string that defines the event name to which the handler will be attached to
  • handler: a function to run when the event is triggered by the customer interaction
element.on('ready', function() {
    console.log('Card element is ready to use!');
});
element.on('error', function() {
    // element automatically unmounted and destroyed
    console.log('Card mount error!');
});

Events

Event nameDescription
readyTriggered after the element is mounted and the field has fully loaded into view.
errorTriggered in case if the element can't to mount see Framepay.on.
changeTriggered when the element has changed after the customer's input. Use this event to detect validation errors in the element. The change event handler is the only one to receive an argument from the element. The argument passed to the handler function will expose these properties:
- valid: A boolean that is present if the element contains valid data (or potentially valid data while the field is focused).
- completed: A boolean that is present if the element has valid and completed data See disabled submit button example.
- source: A string indicating the source of the event. Returns the type of the element used.
- error: An object that is present if the element has invalid data. Exposes the error.code, error.message, and error.type properties.
focusTriggered when the element gains focus.
blurTriggered when the element loses focus.

Example

In this example we enable the submit button only when the combined card field is ready and display the error messages whenever the input becomes invalid.

// the form submit button is disabled by default
var submitButton = document.querySelector('#submit-button');
var card = Framepay.card.mount('#card');

card.on('change', function(data) {
    if (data.error) {
        document.querySelector('#errors').innerText = error.message;
    }
    if(data.completed){
        // ready to submit
        submitButton.removeAttribute('disabled');
    }
});

element.focus()

Use the focus() method to focus the element. This is useful to programmatically focus the element on page load, or when the user clicks a button.

var element = Framepay.card.mount('#cvv', 'cardCvv');
element.focus();

For combined card fields, you may specify which field to focus on with the second parameter. The target can be cardNumber, cardExpiry or cardCvv.

var element = Framepay.card.mount('#card');
element.focus({ target: 'cardCvv' });

element.destroy()

Use the destroy() method to remove the element from the DOM.

var element = Framepay.card.mount('#mounting-point'); // or any other element
element.destroy();

To re-mount the element you must create a new element.

var element = Framepay.card.mount('#mounting-point'); // or any other element
element.destroy();

// Mount the element again.
element = Framepay.card.mount('#mounting-point');

/* * * * * * * * * * * * * * *
 * Do not use the following   *
 * * * * * * * * * * * * * * */
// element.mount();

element.unmount()

Use the unmount() method to remove the element from the DOM. You can not use the mount() method to re-attach the element to the DOM from the reference.

var element = Framepay.card.mount('#mounting-point'); // or any other element
element.unmount();

Prefer to use element.destroy().

Previous page
Next page