Make HTTP callout from Lightning Component and show data on UI. (Using JS Object)

Posted on March 19, 2020 Post Thumbnail

Hey Trailblazers, In this blog we are going to create a lightning component which going to make an external API  callout to verify email Id and shows result to the UI.

Steps:

1. We have a 3rd party API which requires 2 parameters.

a. Email id.

b. Api key.

2. We provide email Id and api key from our UI as input.

3. After clicking verify email button, We get a result from API and shows that result on UI.

Key-take-aways from this Blog Post:

1. Data binding and Attributes in Lightning Component.

2. How to design a simple and clean UI using SLDS.

3. Static Resource in Lightning Component.

4. Calling client side controller as well as apex controller.

5. Api call out from Apex and Much more.

We'll discuss all the above things in this blog post.

Lets start.

1. First we need to create an account on MillionVerifier  It'll help us to verify email by providing an API key.

   First we need to create an account on MillionVerifier  It'll help us to verify email by providing an API key.  

2. After creating your account copy your API key and APIfrom MillionVerifier , It'll look like this

  After creating your account copy your API key and APIfrom MillionVerifier

API key : NhX3FJkuk4Rf5imvrg4XTCdYA

APIhttps://api.millionverifier.com/api/v3/?

These are my credentials, Create your own.

3. Before creating lightning component, We need to put above API to Remote site.

APIhttps://api.millionverifier.com/api/v3/?

API : https://api.millionverifier.com/api/v3/?

4. Lets Create Lightning component named as MillionVerifier

MillionVerifier.Cmp

<aura:component implements="flexipage:availableForAllPageTypes" access="global" controller="millionVerifierCtrl">
    <aura:attribute name="email" type="String"/>
    <aura:attribute name="apiKey" type="String" default="NhX3FJkuk4Rf5imvrg4XTCdYA"/>
    <aura:attribute name="result" type="String"/>
    <aura:attribute name="credits" type="Integer"/>
    <aura:attribute name="objectToStore" type="Object"/>
    <div class="slds-box">
        <div class="slds-box">
            <img src="{!$Resource.heySfLogo}"/>
            <h1>Email Verifier ( Using JS Object )</h1>
            <lightning:input aura:id="email"
                             type="email"
                             label="Email Id"
                             value="{!v.email}">
            </lightning:input>
            <lightning:input aura:id="apiKey"
                             type="String"
                             label="Api Key"
                             value="{!v.apiKey}">
            </lightning:input>
            <br/>
            <lightning:button variant="brand" 
                              label="Verify Email" 
                              title="Brand action" 
                              onclick="{! c.handleClick }" />
        </div>
        <div class="slds-box">
            <h2 aura:id="color" class="">Result : {!v.result}</h2>
            <h2>Credits Left : {!v.credits}</h2>
        </div>
    </div>
</aura:component>

MillionVerifierController.js

({
    handleClick : function(component, event, helper) {
        var email = component.get("v.email");
        var apiKey = component.get("v.apiKey");
        var url = "https://api.millionverifier.com/api/v3/?" ;
        var apiUrl = url +"api=" +apiKey +"&email="+email+"&timeout=10";
         console.log(apiUrl);
        var action = component.get("c.getCalloutResponse");
        action.setParams({
            "mainUrl":apiUrl
        });
        action.setCallback(this, function(response) {
            var res = response.getReturnValue();
            component.set("v.result",res.result);
            component.set("v.credits",res.credits);
             var cmpColor = component.find('color');
            if(res.result=="ok")
            {
                $A.util.addClass(cmpColor, 'gre');
                $A.util.removeClass(cmpColor, 'red');
            }
                
            if(res.result=="invalid")
            {
                 $A.util.addClass(cmpColor, 'red');
                 $A.util.removeClass(cmpColor, 'gre');
            }
        });
        $A.enqueueAction(action);
    },
}
)

MillionVerifier.css

.THIS {
    margin: 0.5% 0.2%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background-color: #fafdfd;
}
.THIS h1 {
    font-size:150%;
}
.THIS .gre {
    color:green;
    background-color: #defae2 ;
}
.THIS .red {
    color:red;
    background-color: #f7cbd1 ;
}
.THIS img {
    width:60%
}

Apex Controller

millionVerifierCtrl

public class millionVerifierCtrl {
    @AuraEnabled
    public static Object getCalloutResponse(String mainUrl) {
        Http h = new Http();
        HttpRequest req = new HttpRequest();
        req.setEndpoint(mainUrl);
        req.setMethod('GET');
        HttpResponse res = h.send(req);
        Object results = (Object) JSON.deserializeUntyped(res.getBody());
        return results;
    }
}

Let's test this component.

It's Working fine.

Go ahead and create for yourself.

Thank you :)

NOTE : I have also created this component using ( Apex Parser ), Have a look here.

Make HTTP callout from Lightning Component and show data on UI. (Using Apex Parser )


4275
2

Tags: #salesforce #lwc #lightningComponent #httpCallout #jsObject

Comments

  • prakash sau Avatar
    prakash sau - 11 months ago
    hii prakash

  • swapnil Avatar
    swapnil - 5 months ago
    hello sir gm, actually i want to know how to integrate with paypal for payment gateway in lwc. could you please help me out.

Your message is required.

Get notified of new posts