Hello folks, today we will discuss Verify Phone HTTP Request in LWC Salesforce. Verify Phone number helps Clients to identify real data. Clients require verified phones for their business use cases. By verifying phone numbers, businesses are able to provide services to valid clients. We will create an LWC component that verifies the Phone numbers and also shows the essential details.
Also check this: Useful JavaScript methods in LWC Part -2
Key Highlights :
- Help in removing fake data.
- HTTP call-out request in LWC.
- No need for Apex.
- We use Veriphone for verifying phone numbers.
Process & Code :
Step 1: In this step, we will create Veriphone account. Click the Veriphone link to create an account by using a Gmail login. After successful signup, go to Settings > Copy the API key for further use in HTTP callout request.
Step 2: Set up the CSP Trusted Sites of this Endpoint URL GO Setup > CSP Trusted Sites > Click New Trusted Site and create new records by filling in Endpoint and name. EndPoint ==> https://api.veriphone.io
Step 3: In this step, We will create an LWC component for input and output the details and also the HTTP callout request. We will create a input field which is tel type and also the details card, that show entered phone number details. Here we have fetch the method to submit our HTTP Callout and get data.
veriphoneLWC.HTML :
<template>
<!-- loader -->
<div if:true={showSpinner}>
<lightning-spinner alternative-text="Loading..." variant="brand" class="slds-is-fixed">
</lightning-spinner>
</div>
<!------------->
<div class="slds-tabs_card">
<div class="slds-page-header">
<div class="slds-page-header__row">
<div class="slds-page-header__col-title">
<div class="slds-media">
<div class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-opportunity">
<lightning-icon icon-name="standard:recipe" alternative-text="recipe" title="recipe"></lightning-icon>
</span>
</div>
<div class="slds-media__body">
<div class="slds-page-header__name">
<div class="slds-page-header__name-title">
<h1>
<span>Verify Phone Number in LWC</span>
<span class="slds-page-header__title slds-truncate" title="Recently Viewed">TechDicer</span>
</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <br/>
<!-- create folder card -->
<lightning-card variant="Narrow" title="Verify Phone Number in LWC" icon-name="action:call">
<div class="slds-var-p-around_small">
<lightning-layout multiple-rows>
<lightning-layout-item padding="around-small" size="12" medium-device-size="12" large-device-size="12">
<lightning-input name="newFolderName" class="fieldvalidate" type="tel" label="Mobile Phone Number"
onchange={handlePhoneNumberChange}>
</lightning-input>
</lightning-layout-item>
<lightning-layout-item size="12" class="slds-var-p-top_small">
<lightning-button class="slds-align_absolute-center" variant="brand" label="Verify Phone Number"
onclick={handlePhoneVerfiy}>
</lightning-button>
</lightning-layout-item>
</lightning-layout>
</div>
</lightning-card><br/>
<lightning-card title="Phone Number Info" icon-name="utility:salesforce1">
<div class="slds-var-p-around_small">
<div class="slds-p-horizontal_small">
<div class="slds-form" role="list">
<div class="slds-form__row">
<div class="slds-form__item" role="listitem">
<div
class="slds-form-element slds-form-element_edit slds-form-element_readonly slds-form-element_stacked slds-hint-parent">
<span class="slds-form-element__label">Phone Number</span>
<div class="slds-form-element__control">
<div class="slds-form-element__static">
{result.phone}
</div>
</div>
</div>
</div>
<div class="slds-form__item" role="listitem">
<div
class="slds-form-element slds-form-element_edit slds-form-element_readonly slds-form-element_stacked slds-hint-parent">
<span class="slds-form-element__label">Phone Region</span>
<div class="slds-form-element__control">
<div class="slds-form-element__static">
{result.phone_region} celsius
</div>
</div>
</div>
</div>
</div>
<div class="slds-form__row">
<div class="slds-form__item" role="listitem">
<div
class="slds-form-element slds-form-element_edit slds-form-element_readonly slds-form-element_stacked slds-hint-parent">
<span class="slds-form-element__label">Country</span>
<div class="slds-form-element__control">
<div class="slds-form-element__static">
{result.country}
</div>
</div>
</div>
</div>
<div class="slds-form__item" role="listitem">
<div
class="slds-form-element slds-form-element_edit slds-form-element_readonly slds-form-element_stacked slds-hint-parent">
<span class="slds-form-element__label">Carrier</span>
<div class="slds-form-element__control">
<div class="slds-form-element__static">
{result.carrier}
</div>
</div>
</div>
</div>
</div>
<div class="slds-form__row">
<div class="slds-form__item" role="listitem">
<div
class="slds-form-element slds-form-element_edit slds-form-element_readonly slds-form-element_stacked slds-hint-parent">
<span class="slds-form-element__label">Country Prefix</span>
<div class="slds-form-element__control">
<div class="slds-form-element__static">
{result.country_prefix}
</div>
</div>
</div>
</div>
<div class="slds-form__item" role="listitem">
<div
class="slds-form-element slds-form-element_edit slds-form-element_readonly slds-form-element_stacked slds-hint-parent">
<span class="slds-form-element__label">Phone Valid</span>
<div class="slds-form-element__control">
<div class="slds-form-element__static">
{result.phone_valid}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</lightning-card>
</template>
veriphoneLWC.JS:
import { LightningElement, track } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class VeriphoneLWC extends LightningElement {
showSpinner = false;
phoneNumber = '';
@track result = {};
handlePhoneVerfiy() {
this.handleSpinner();
let APIKey = '4B6ED6BADA8648E0Bxxxxxxxxxxxx';
//https://api.veriphone.io/v2/verify?phone=mobile&key=apikey
var endPoint = 'https://api.veriphone.io/v2/verify?phone=' + this.phoneNumber + '&key=' + APIKey;
//get request
fetch(endPoint)
.then((response) => {
if (!response.ok) {
this.error = response;
}
return response.json();
})
.then((jsonResponse) => {
console.log(jsonResponse);
this.result = jsonResponse;
this.handleSpinner();
})
.catch((error) => {
console.log(error);
this.error = error;
this.handleSpinner();
});
}
handlePhoneNumberChange(event) {
this.phoneNumber = event.target.value;
}
handleSpinner() {
this.showSpinner = !this.showSpinner;
}
showToast(title, message, variant, mode) {
const evt = new ShowToastEvent({
title: title,
message: message,
variant: variant,
mode: mode
});
this.dispatchEvent(evt);
}
}
veriphoneLWC.js-meta.xml :
<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>54.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
Output :
Reference :
What’s your Reaction?
+1
+1
+1
+1
+1
+1
Total views : 960138