Subscribe to Hosted Field events

1. Set up event listener

Set up an event listener using the advanced credit and debit card payments on() function. Use the event object to get information about your fields and update your UI.

1<ContentAccordion>
2    <AccordionRow heading="cardTypeChange Example">
3      <p
4        style="margin-top: 3rem;"
5        data-testid="dcac-cfe-acc1-p0"
6      >
7        Here is an example of how to use <code>cardTypeChange</code> to update your CVV label and placeholder:
8      </p>
9      <NewCodeBlockWrapper>
10        <NewCodeBlock
11          className="language-javascript"
12          children={`
13            paypal.HostedFields.render({ /* ... */ }).then(function (hostedFieldsInstance) {
14              var cvvLabel = document.querySelector('label[for="cvv"]'); // The label for your CVV field
15            
16              hostedFieldsInstance.on('cardTypeChange', function (event) {
17                // This event triggers when a change in card type is detected.
18                // It triggers only from the number field.
19                var cvvText;
20            
21                if (event.cards.length === 1) {
22                  cvvText = event.cards[0].code.name;
23                } else {
24                  cvvText = 'CVV';
25                }
26            
27                cvvLabel.innerHTML = cvvText;
28            
29                hostedFieldsInstance.setAttribute({
30                  field: 'cvv',
31                  attribute: 'placeholder',
32                  value: cvvText
33                });
34              });
35            });
36          `}
37        />
38      </NewCodeBlockWrapper>
39    </AccordionRow>
40  </ContentAccordion>

2. Get the state of your form

Use the getState function to get the state of your form without using events.

getState Example

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

Methods

The following methods are supported on parent and individual card fields:

• render()
• isEligible()
• addClass()
• clear()
• focus()
• getstate()
• on()
• removeAttribute()
• setAttribute()
• removeClass()
• setMessage()

render()

1render(options) → {Promise|void}

The render() method creates an instance of advanced credit and debit card payments and renders the card fields for checkout based on the mapping and styles provided by options.

The options object maps the HTML element to each of the advanced credit and debit card payment inputs, style, and properties.

The options object contains the following fields:

• createOrder: A callback field that returns the order-id value. The order-id is a required reference ID for each order created. The order-id also associates the payer's card details with the order created.
• styles: A styleOptions parameter that defines the styling applied on each of the advanced credit and debit card payments inputs.
• fields: A fieldOptions parameter that defines the mapping of the HTML element to the advanced credit and debit card payments inputs and their properties.

isEligible()

1isEligible() → {boolean}

The isEligible() method checks if advanced credit and debit card payments are eligible to render based on configuration and business rules.

addClass()

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

The addClass1() method adds a class to a field. Use this method to update field styles when events occur elsewhere in your checkout integration. Includes the following parameters:

clear()

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

The clear() method clears the value of a field. Includes the following parameters:

focus()

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

The focus() method places focus on a field. Includes the following parameters:

getState()

1getState() → {object}

The getState() method returns an object that includes the state of all fields and possible card types.

on()

1on(event, handler) → {void}

The on() method subscribes a handler function to a named event. Events include:

• blur
• focus
• empty
• notEmpty
• cardTypeChange
• validityChange

Events trigger a stateObject, which includes the following parameters:

removeAttribute()

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

The removeAttribute() method removes a supported attribute from a field. Includes the following parameters:

setAttribute()

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

The setAttribute() method sets an attribute of a field. Supported attributes are aria-invalid, aria-required, disabled, and placeholder. Includes the following parameters:

removeClass()

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

The removeClass() method removes a class from a field. Use this class to update field styles when events occur elsewhere in your checkout integration. Includes the following parameters:

setMessage()

1setMessage(options) → {void}

The setMessage() method sets a visually hidden message for screen readers on a field.

Includes the following options parameter, which contains the following:

• field: A string field from which you want to add an attribute. Must be a valid fieldOption.
• message: The message to set.