I’am working on Angular 6 E-Commerce project and integrating PayPal payment to it. I’ve added the paypal button in html where I’am getting amount in [(ngModel)], but, I’ve to pass it in component file so that it can be read in paypal config. Any better or alternative solution is highly praised
Following are the files:
- shopping-cart-summary.html
<div *ngIf="cart$ | async as cart">
<input type="number" [(ngModel)]="cart.totalPrice">
<div id="paypal-checkout-btn"></div>
</div>
- shopping-cart-summary.ts
totalPrice: number;
public ngAfterViewChecked(): void {
const elementExists: boolean = !!document.getElementById('paypal-checkout-btn');
if(elementExists && !this.addScript) {
this.addPaypalScript().then(() => {
paypal.Button.render({
client: {
sandbox: 'My sandbox API',
},
payment: (data, actions) => {
return actions.payment.create({
payment: {
transactions: [
{
amount: {
total: this.totalPrice,
currency: 'USD'
},
payee:{email:'My Email ID'},
}
]
}
});
},
commit: true,
locale: 'en_US',
style: {
size: 'medium', // tiny, small, medium
color: 'blue', // orange, blue, silver
shape: 'pill' // pill, rect
},
env: 'sandbox', // Optional: specify 'sandbox' or 'production'
onAuthorize: (data, actions) => {
return actions.payment.execute().then((payment) => {
console.log('payment 1 completed!');
});
},
onCancel: (data) => {
console.log('payment 1 was cancelled!');
}
}, '#paypal-checkout-btn');
this.paypalLoad = false;
});
}
}
Here I’am getting value in [(ngModel)] as $182 which I want to pass it in component file, so how to do it? Any suggestions??
2
Answers
Instead of totalPrice: number; in your component.ts use cert = {“totalPrice”: 0};
Else use totalPrice in your component.html instead of cert.totalPrice.
As
cart$
is an observable, you will either need to subscribe to it to get the value or use it in a pipeable operator.Try this: