Subscribe to credit and debit card field events

1paypal.HostedFields.render({ /* ... */ }).then(function (hostedFieldsInstance) {
2 var cvvLabel = document.querySelector('label[for="cvv"]'); // The label for your CVV field
3
4 hostedFieldsInstance.on('cardTypeChange', function (event) {
5   // This event triggers when a change in card type is detected.
6   // It triggers only from the number field.
7   var cvvText;
8
9   if (event.cards.length === 1) {
10     cvvText = event.cards[0].code.name;
11   } else {
12     cvvText = 'CVV';
13   }
14
15   cvvLabel.innerHTML = cvvText;
16   hostedFieldsInstance.setAttribute({
17     field: 'cvv',
18     attribute: 'placeholder',
19     value: cvvText
20   });
21 });
22});

1var form = document.querySelector('#my-sample-form');
2
3paypal.HostedFields.render({ /* ... */ }).then(function (hostedFieldsInstance) {
4  form.addEventListener('submit', function (event) {
5    var state = hostedFieldsInstance.getState();
6    var formValid = Object.keys(state.fields).every(function (key) {
7      return state.fields[key].isValid;
8    });
9
10    if (formValid) {
11      // Submit Hosted Fields card data
12      hostedFieldsInstance.submit();
13    } else {
14      // Let the customer know their fields are invalid
15    }
16  });
17});

1paypal.HostedFields.render({ /* ... */ }).then(function (hostedFieldsInstance) {
2  hostedFieldsInstance.on('focus', function (event) {
3    // Your actions on focus
4    console.log(event.emittedBy, 'gained focus');
5  });
6});

1paypal.HostedFields.render({ /* ... */ }).then(function (hostedFieldsInstance) {
2  hostedFieldsInstance.on('blur', function (event) {
3    // Your actions on blur
4    console.log(event.emittedBy, 'lost focus');
5  });
6});

1paypal.HostedFields.render({ /* ... */ }).then(function (hostedFieldsInstance) {
2  hostedFieldsInstance.on('empty', function (event) {
3    // Your actions on empty  
4    console.log(event.emittedBy, 'is now empty');
5  });
6});

1paypal.HostedFields.render({ /* ... */ }).then(function (hostedFieldsInstance) {
2  hostedFieldsInstance.on('notEmpty', function (event) {
3    console.log(event.emittedBy, 'has data');
4  });
5});

1paypal.HostedFields.render({ /* ... */ }).then(function (hostedFieldsInstance) {
2  hostedFieldsInstance.on('cardTypeChange', function (event) {
3    if (event.cards.length === 1) {
4      console.log(event.cards[0].type);
5    } else {
6      console.log('Type of card not yet known');
7    }
8  });
9});

1paypal.HostedFields.render({ /* ... */ }).then(function (hostedFieldsInstance) {
2  hostedFieldsInstance.on('validityChange', function (event) {
3    var field = event.fields[event.emittedBy];
4
5    if (field.isValid) {
6      console.log(event.emittedBy, 'is fully valid');
7    } else if (field.isPotentiallyValid) {
8      console.log(event.emittedBy, 'is potentially valid');
9    } else {
10      console.log(event.emittedBy, 'is not valid');
11    }
12  });
13});

1var hostedFields = require('braintree-web/hosted-fields');
2var submitButton = document.querySelector('input[type="submit"]');
3
4paypal.HostedFields.render({ /* ... */ }).then(function (hostedFieldsInstance) {
5  hostedFieldsInstance.on('inputSubmitRequest', function () {
6    // User requested submission, e.g. by pressing Enter or equivalent
7    submitButton.click();
8  });
9});

1render(options) → {Promise|void}

1isEligible() → {boolean}

1addClass(field, classname, callback<sub>opt</sub>) → {Promise|void}

1clear(field, callback<sub>opt</sub>) → {Promise|void}

1focus(field, callback<sub>opt</sub>) → {void}

1getState() → {object}

1on(event, handler) → {void}

1removeAttribute(options, callback<sub>opt</sub>) → {Promise|void}

1setAttribute(options, callback<sub>opt</sub>) → {Promise|void}

1removeClass(field, classname, callback<sub>opt</sub>) → {Promise|void}

1setMessage(options) → {void}