skip to Main Content

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:

  1. shopping-cart-summary.html
<div *ngIf="cart$ | async as cart">
  <input type="number" [(ngModel)]="cart.totalPrice">
  <div id="paypal-checkout-btn"></div> 
</div>
  1. 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??

Here is the screenshot of the total price of products
enter image description here

2

Answers


  1. Instead of totalPrice: number; in your component.ts use cert = {“totalPrice”: 0};
    Else use totalPrice in your component.html instead of cert.totalPrice.

    Login or Signup to reply.
  2. 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:

    cart$: Observable<any>;
    totalPrice: number;
    
    public ngAfterViewChecked(): void {
        const elementExists: boolean = !!document.getElementById('paypal-checkout-btn');
    
        cart$.subscribe((cart: any) => {
            this.totalPrice = cart.totalPrice;
        })
    
      if(elementExists && !this.addScript && this.totalPrice) {
        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;
        });
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search