This article shows how to put the Plauti Verify Phone Input (recordval-rv2-phone-component) on a record page as an inline editor. The wrapper reads the current phone value, lets the user edit and validate it, and saves the corrected number back to the record only when validation passes.

If you have not yet, read Embedding Plauti Verify components on a record page first — it explains the wrapper pattern, the advice value used below, and the Lightning Web Security requirement for using these components in your own LWC.

What the Verify phone component gives you

The phone component accepts these properties:

Property	Type	Description
`api-name`	String	The field API name, echoed back on every event so you know the source.
`label`	String	The field label shown above the input.
`value`	String	The phone number to start with.
`placeholder-text`	String	Placeholder shown when the field is empty.
`default-country`	String	ISO 3166-1 alpha-2 country code (for example `US`, `NL`).
`required`	Boolean	Marks the input as required.
`format`	String	Output format: `NATIONAL`, `INTERNATIONAL`, `E164`, or `RFC3966`.

And it dispatches these events:

Event	Detail
`change`	`value`, `apiName` — fired as the user types.
`validated`	`advice`, `value`, `statusCode`, `message`, `lineType`, `result` — fired once the Verify API responds. The `value` is the formatted number.
`validatestart`	`value`, `apiName` — fired when a validation call begins.
`validateerror`	`error`, `apiName` — fired when the validation call fails.

The component validates automatically when the value changes, so you do not call any method yourself — you listen for validated and read the result.

The wrapper component

Create a Lightning Web Component, for example phoneInlineValidate, with the three files below.

📘
The example markup is unstyled
This wrapper keeps the markup minimal to stay focused on the validation logic. It carries no SLDS layout or spacing — add your own utility classes so it matches the rest of your record page.

phoneInlineValidate.html

<template>
    <template if:false={editing}>
        <span>{fieldLabel}</span>
        <lightning-formatted-phone value={phoneValue}></lightning-formatted-phone>
        <lightning-button-icon icon-name="utility:edit" variant="bare" onclick={handleEdit}></lightning-button-icon>
    </template>

    <template if:true={editing}>
        <recordval-rv2-phone-component
            label={fieldLabel}
            value={phoneValue}
            api-name={fieldApiName}
            default-country={defaultCountry}
            placeholder-text={placeholderText}
            required={required}
            format={format}
            onvalidated={handleValidated}
            onchange={handleChange}>
        </recordval-rv2-phone-component>
        <lightning-button label="Save" onclick={handleSave}></lightning-button>
        <lightning-button label="Cancel" onclick={handleCancel}></lightning-button>
    </template>
</template>

phoneInlineValidate.js

import {LightningElement, api, wire} from 'lwc';
import {getRecord, getFieldValue, updateRecord} from 'lightning/uiRecordApi';

export default class PhoneInlineValidate extends LightningElement {
    @api recordId;
    @api objectApiName;
    @api fieldApiName = 'Phone';
    @api fieldLabel = 'Phone';
    @api placeholderText;
    @api required;
    @api format = '';
    @api defaultCountry = 'US';

    editing = false;
    pendingValue = '';
    lastAdvice = '';

    @wire(getRecord, {recordId: '$recordId', fields: '$wireFields'})
    record;

    get wireFields() {
        return this.objectApiName && this.fieldApiName ? [`${this.objectApiName}.${this.fieldApiName}`] : [];
    }

    get phoneValue() {
        return this.record?.data ? getFieldValue(this.record.data, `${this.objectApiName}.${this.fieldApiName}`) : '';
    }

    handleEdit() {
        this.editing = true;
    }

    handleCancel() {
        this.editing = false;
    }

    handleChange(event) {
        this.pendingValue = event.detail.value;
    }

    handleValidated(event) {
        this.lastAdvice = event.detail.advice;
        this.pendingValue = event.detail.value;
    }

    handleSave() {
        if (this.lastAdvice !== 'GREEN') return;
        const fields = {Id: this.recordId};
        fields[this.fieldApiName] = this.pendingValue;
        updateRecord({fields}).then(() => {
            this.editing = false;
        });
    }
}

The handleValidated handler captures the formatted number and the advice. handleSave writes the value back only when the advice is GREEN, so an invalid number can never overwrite the record. Cancel simply leaves edit mode without saving.

phoneInlineValidate.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>58.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Phone Inline Validate</masterLabel>
    <description>Inline edit wrapper for Plauti Verify phone validation</description>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <property name="fieldApiName" type="String" label="Phone Field API Name" default="Phone" />
            <property name="fieldLabel" type="String" label="Field Label" default="Phone" />
            <property name="defaultCountry" type="String" label="Default Country (alpha-2)" default="US" />
            <property name="placeholderText" type="String" label="Placeholder Text" />
            <property name="required" type="Boolean" label="Required" default="false" />
            <property name="format" type="String" label="Phone Format" description="NATIONAL, INTERNATIONAL, E164, or RFC3966" />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Add it to a record page

Deploy the component to your org.
Open the record page in the Lightning App Builder.
Drag your Phone Inline Validate component onto the page.
Set the Phone Field API Name to the field you want to validate (for example Phone on Contact, or a custom phone field).
Set the default country and format to match your data, then save and activate.

recordId and objectApiName are provided automatically by the record page, so the wrapper always validates against the record being viewed.