Purpose of Integration
The main purpose of this blog is to integrate the Paypal Payment Gateway with Salesforce. Paypal is useful to make the payment from e-com community or sites.In this blog, we are going to implement Paypal integration with Salesforce for a basic payment for Merchant Type account, the payments would be from Customers using Credit Cards like Visa etc. where customer enters the payment details on lightning component which will complete the payment on click of submit button.Firstly,we need to set up a paypal account.So let’s get started.
Integration Steps:
1) Set up Paypal Account:
1.Create a Personal or Business Paypal Account.
(i).To create business Paypal Account visit developer.paypal.com
(ii).To create Personal/Individual Account visit https://www.paypal.com/in/signup/account
For this blog,I have created a Business Paypal Account.
2.Login with your credentials and you will be landed in Dashboard Page.
3.Select Sandbox under Accounts from left side.You will find one default Business and one Personal account.
Click on Create Account and Create one Business account and Personal Account.You can also create custom Account.
Select the Business Account you created now and click View/Edit Account and click Upgrade to Pro beside Account Type Business.Because Business Pro Account is required for Business(Merchant)Â Account to process transactions.
4.Copy the API Credentials(username,password and signature) generated for the Business Pro Account.This credentials will be used in the Salesforce Apex Class.
2) Set up Salesforce:
(i).Create a lightning component with a button Paypal Integration, onclick of a button a modal with a payment detail form opens up where the customer needs to fill the payment details. On Submitting the details the amount will be debited from the payee account and will be credited in the paypal account.
<aura:component controller="PaypalProcessorLightning" implements="force:appHostable,flexipage:availableForAllPageTypes, flexipage:availableForRecordHome,force:hasRecordId, forceCommunity:availableForAllPageTypes, force:lightningQuickAction" access="global" >
<aura:attribute name="inp1" type="string" default="aslam"/>
<aura:attribute name="inp2" type="string" default="bari"/>
<aura:attribute name="inp3" type="string" default="US"/>
<aura:attribute name="inp4" type="string" default="44"/>
<aura:attribute name="inp5" type="string" default="433"/>
<aura:attribute name="inp6" type="string" default="ajm"/>
<aura:attribute name="inp7" type="string" default="CA"/>
<aura:attribute name="inp8" type="string" default="4534"/>
<aura:attribute name="inp9" type="string" default="4028398122647025"/>
<aura:attribute name="inp10" type="string" default="Visa"/>
<aura:attribute name="inp11" type="string" default=""/>
<aura:attribute name="inp12" type="string" default="01"/>
<aura:attribute name="inp13" type="string" default="2020"/>
<aura:attribute name="inp14" type="string" default="abuy_1294681533_per@gmail.com"/>
<aura:attribute name="inp15" type="string" default="100"/>
<lightning:button aura:id="show" label="Paypal Integration" class="slds-button slds-button--brand buttontype" onclick="{!c.showModal}" />
<div aria-hidden="false" aura:id="popUpId" role="dialog" class="slds-modal slds-fade-in-open hideContent" style="padding-top:7rem">
<div class="slds-modal__container">
<div class="slds-modal__header">
<div class="slds-button slds-button--icon-inverse slds-modal__close" onclick="{!c.hidePopup}">
<lightning:icon iconName="utility:close" size="medium" alternativeText="Indicates approval"/>
<span class="slds-assistive-text">Close</span>
</div>
<h2 style="font-weight:bolder;font-size:1rem">Complete Your Payment Details</h2>
</div>
<div class="slds-modal__content " style="padding:40px">
<div class="row">
<h2 class="header"></h2>
<lightning:input type="text" name="input1" label="First Name" value="{!v.inp1}" />
<lightning:input type="text" name="input2" label="Last Name" value="{!v.inp2}"/>
<lightning:input type="text" name="input3" label="Country" value="{!v.inp3}"/>
<lightning:input type="text" name="input4" label="Shipping Address1" value="{!v.inp4}"/>
<lightning:input type="text" name="input5" label="Shipping Address2" value="{!v.inp5}"/>
<lightning:input type="text" name="input6" label="Shipping City" value="{!v.inp6}"/>
<lightning:input type="text" name="input7" label="Shipping State" value="{!v.inp7}"/>
<lightning:input type="text" name="input8" label="Zip Code" value="{!v.inp8}"/>
<lightning:input type="text" name="input9" label="Card Number" value="{!v.inp9}"/>
<lightning:input type="text" name="input10" label="Card Type" value="{!v.inp10}"/>
<lightning:input type="text" name="input11" label="CVV" value="{!v.inp11}"/>
<lightning:input type="text" name="input12" label="Expiry Month" value="{!v.inp12}"/>
<lightning:input type="text" name="input13" label="Expiry Year" value="{!v.inp13}"/>
<lightning:input type="text" name="input14" label="Payer" value="{!v.inp14}"/>
<lightning:input type="text" name="input15" label="Amount" value="{!v.inp15}"/>
</div>
</div>
<div class="slds-modal__footer" style="padding-top: 20px">
<lightning:button variant="brand" label="Submit" title="Brand action" onclick="{! c.handleClick }" />
<lightning:button aura:id="Cancel" label="Cancel" class="slds-button slds-button--brand buttontype" onclick="{!c.hidePopup}" />
</div>
</div>
</div>
<div class="slds-backdrop slds-backdrop--open hideContent" aura:id="popUpBackgroundId"></div>
</aura:component>({
showModal : function(component, event, helper) {
$A.util.removeClass(component.find('popUpId'), 'hideContent');
$A.util.removeClass(component.find('popUpBackgroundId'), 'hideContent');
},
hidePopup : function(component){
$A.util.addClass(component.find('popUpId'), 'hideContent');
$A.util.addClass(component.find('popUpBackgroundId'), 'hideContent');
},
handleClick : function(component, event, helper) {
var Firstname=component.get("v.inp1");
var Lastname=component.get("v.inp2");
var Country=component.get("v.inp3");
var Address1=component.get("v.inp4");
var Address2=component.get("v.inp5");
var City=component.get("v.inp6");
var State=component.get("v.inp7");
var Zipcode=component.get("v.inp8");
var Cardno=component.get("v.inp9");
var Cardtype=component.get("v.inp10");
var Cvv=component.get("v.inp11");
var Expirymonth=component.get("v.inp12");
var Expiryyear=component.get("v.inp13");
var Payer=component.get("v.inp14");
var Amount=component.get("v.inp15");
var action = component.get("c.doDirectPayment");
action.setParams({
'fname':Firstname,
'lastname':Lastname,
'contry':Country,
'add1':Address1,
'add2':Address2,
'shippingcity':City,
'shippingstate':State,
'zip':Zipcode,
'cardnumber':Cardno,
'cardtype':Cardtype,
'cvvno':Cvv,
'expmonth':Expirymonth,
'expyear':Expiryyear,
'pay':Payer,
'amt':Amount
});
action.setCallback(this, function(a) {
var state = a.getState();
if (state === "SUCCESS") {
alert(a.getReturnValue());
}
});
$A.enqueueAction(action);
}
})
Paypal Integration Button on Lightning Component:
3) Run and Test
You can test the payment process by doing a sample payment providing payer bank details.Onclick of submit apex class will be called which will process the payment.
Log into your Paypal Account and check the balance from the Funding tab of Business Pro Account , it might be increased.
You will also be receiving a notification that the payment is completed successfully.
