Trigger createOrder function (Paypal SDK) via typescript

Question

I am using window.paypal.Buttons() in an Angular 12 page. I created a Paypal component where there is only the Paypal button:
paypal.components.html

<div id="paypal-button-container" #paypalButton></div> 

paypal.components.ts

  @ViewChild('paypalButton') paypalButton: ElementRef;
  ngOnInit(): void {
    window.paypal.Buttons({
      style: {
        layout: 'horizontal',
        color: 'white',
        shape: 'rect',
        label: 'paypal'
      },
      createOrder: async (data, actions) => {
        //create order using Orders API
      },
      onApprove: async (data, actions) => {
        //capture payment using Orders API
      },
      onError: (data, actions) => {
        console.log("do stuff")
      }
    }).render('#paypal-button-container');

I would like to give the user the possibility to start the payment flow by clicking paypal button, or clicking a more generic "PAY" button (since I implemented other payment strategies too).
So I need to access the onApprove() method from the parent component. I tried the following code but it doesn't seem to be activated by click():
parent.components.ts

  //the above component
  @ViewChild('paypal') paypalComponent: PaypalComponent;

  //called when clicking a general "PAY" button in the parent component
  checkout(): void {
    if (this.paymentMethod === "paypal") this.paypalComponent.paypalButton.nativeElement.click();
  }

Answer 1

The PayPal JavaScript SDK (demo here) is only useful to render one or more UI buttons for a user to click on.

If your intention is not to render UI buttons, but rather perform operations... for instance obtain an approval link, then use the rest API from your server, e.g. create an order. A created order will have a link with rel:approve. After approval by a user on some device they will be directed to the provided return_url for you to show a final review step. The order will then need to be captured after which the success or failure can be shown.

---

There is some angular-specific information for the JS SDK buttons here, if rendering payment button(s) is what you want to do. Typically it is, since angular is a front-end framework.