Paypal Checkout Client-Side Integration(Angular)

Hello everyone, In this story, we gonna see about the PayPal integration in your web Application, where you can accept payments to send and receive money from clients

Technologies used:-

• Angular 9

Pre-requisites:-

• Node.js
• Visual Studio Code

Steps Involved

Step 1: Create a PayPal account

Step 2: Log in to developer dashboard and click Accounts under Sandbox

Step 3: Create a Personal and Buyer Account matches your case

Step 4: Go to My Apps and Credentials -> Create Rest API app in Sandbox for mock transactions

Step 5: Give Name of the Application and choose the Business account in Sandbox Business Account DropDown

Step 6: Create an App

Once the App created successfully log in to your sandbox account by entering the following URL: https://www.sandbox.paypal.com/signin

Enter the Username and Password you gave in Step 3.

Note: By default, the amount sent will be transferred to the business account Created.

Go to your Angular Application

In your index.html

Add the script tag as below

<script src=”https://www.paypal.com/sdk/js?client-id=<your_client_id>"></script>

In your Component

• Import ViewChild in your Component
• Define a Property as described in the given snippet below, you can make it dynamic by making an API call based on your condition

Note: You can initialize the Paypal Checkout Button based on your condition

@ViewChild(‘paypal’, { static: true }) paypalElement: ElementRef //html ement Paypal Smart button
product = {
price: ‘1.00’,
description: ‘Check Amount’
}// this property can be make dynamically from your web api
payeeEmail: string = <Merchant Account to credit the charge Amount>
paidFor: boolean = false; //Payment Successful Message handling
paypalConfig = {//Configuration for paypal Smart Button
createOrder: (data, actions) => {
return actions.order.create({
purchase_units: [{
description: 'Manager To Owner Payment',
amount: {
currency_code: 'USD',
value: amt
}, payee: {
email_address: this.payeeEmail // to send amout to corresponding Merchant
},
invoice_id: <You can geneate on your Own Logic>,
}]
});
},
onApprove: async (data, actions) => {
const order = await actions.order.capture();
this.paidFor = true;
console.log(order)
},
onError: err => {
console.log(err)
}
}
constructor() { }
ngOnInit() {
paypal.Buttons(this.paypalConfig).render(this.paypalElement.nativeElement)
}

In your HTML

<div *ngIf=”!paidFor”>
<h1>Buy this for — ${{product.price}} OBO</h1>
<p>{{product.description}}</p>
</div>
<div *ngIf=”paidFor”>
<h1>Amount Transferred Successfully</h1>
</div>
<div #paypal></div>

Start your Angular App

ng serve --o

your app will be listening on http://localhost:4200

Note: Make sure you have replaced the your_client_id in index.html

Thank you :) For reading the story, Let me know here if you have any concerns or discussions about this.

Have a great day!!!…