Main content for the message can be defined in here
', title: 'Hooray!', }); ``` To clear the message entirely: ```js loader.clearContent(); ``` ### Password ```js const password = new Password(document); ``` This utility's sole purpose (currently) is to enable the functionality behind the `Show password` checkbox that toggles whether the password is masked or not. ### PaymentTerm ```js const paymentTerm = new PaymentTerm(document); // Return the currently selected payment term paymentTerm.getSelected(); // Update the payment term options displayed const options = [ { name: 'Name of term', value: 'Value to send', description: 'Can contain HTML', }, ]; paymentTerm.updateOptions(options); ``` Update and get the currently selected payment term on the form ### PaymentType ```js const paymentType = new PaymentType(document); // Show payment type paymentType.show(PaymentType.APPLEPAY); // Hide payment type paymentType.hide(PaymentType.CREDITCARD); ``` Allows the control of which payment types are shown to the user. It relies on the `{{> payment-type }}` partial being used and has `show` and `hide` methods. The following payment types are allowed: ```js PaymentType.CREDITCARD; PaymentType.DIRECTDEBIT; PaymentType.PAYPAL; PaymentType.APPLEPAY; ``` ### Salesforce Utility for converting salesforce country names to ISO country codes. ```js // isoCode will equal GBR const isoCode = salesforceNameToIsoCode('United Kingdom'); // salesfoceName will equal United Kingdom const salesforceName = isoCodeToSalesforceName('GBR'); ``` ### Submit ```js const submit = new Submit(document); // Update the button text submit.updateText('Pay with Apple Pay'); // Enable the button submit.enable(); // Disable the button submit.disable(); // Whether or not the button is disabled. submit.isDisabled(); ``` ### Tracking ```js const tracking = new Tracking(window, document.body); ``` TBD ### Validation ```js const validation = new Validation(); validation.init(); ``` This utility will set up the form for client side validation using [`o-forms`](https://github.com/Financial-Times/o-forms#javascript). **NB:** By default, using this utility will prompt the user with a dialog before leaving the page if there have been changes on the form. It can be disabled as follows: `new Validation({mutePromptBeforeLeaving: true})` One useful property made available is the main form DOM element via `validation.$form`. Use this for scoping `querySelector` calls to find elements within your form. #### Custom Validation You can add some custom validation functionality as follows: ```js validation.addCustomValidation({ errorMessage: 'Custom error message here.', field: domElementToValidate, validator: () => { // Custom validation code here. *Must* return truthy or falsey. }, }); ``` If the validation fails, the field will look like it usually does when validation fails with your specified message displayed underneath. ### Zuora The Zuora utility aims to wrap the Zuora client side library to make it more user friendly. Requirements: - `{{> n-conversion-forms/partials/zuora }}` - Place this where you want the form to render. This partial also includes the Zuora client side library. ```js const zuora = new Zuora(window); // Will render the 3rd party Zuora iframe with client side validation and custom error messages. // Returns a Promise that resolves ONLY once the form has loaded. zuora.render({ params, prePopulatedFields, renderCallback }); // Will attempt to submit the 3rd party Zuora iframe form and reject if there are client side // validation errors or if the user refuses the Direct Debit mandate confirmation. zuora.submit(paymentType); // Call a provided function upon the value of the direct debit agreement checkbox changing // (inside the 3rd party Zuora iframe). // @param {boolean} checked - whether the box was checked or not zuora.onAgreementCheckboxChange((checked) => {}); // Call a provided function upon the confirmation or cancellation of the direct debit mandate // (inside the 3rd party Zuora iframe). // @param {boolean} confirmed - whether confirmed or not zuora.onDirectDebitConfirmation((confirmed) => {}); // Sets necessary static parameters for credential user profile // Makes a call to Zuora supplying those parameters for agreement validation zuora.setAgreement(); // Example implementation on form submission try { await this.zuora.submit('directdebit'); } catch (error) { if (error instanceof Zuora.ZuoraErrorValidation) { // Validation messages will be shown on HPM fields // Put other functionality on validation failure here } else if (error instanceof Zuora.ZuoraErrorMandateCancel) { // Fail silently, the direct debit mandate has been cancelled } else if (error instanceof Zuora.ZuoraErrorInvalidPaymentType) { // Invalid payment type } else { // General payment failure } } ``` ### Additional Notes #### Autocomplete attributes Autocomplete fields documentation is available here: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute