Передать переменную элементу в PayPal-Checkout

Question

Я начал работать с angular почти целую неделю go. И чтобы упростить задачу, я пытаюсь реализовать PayPal-checkout.

Checkout работает нормально, пока я передаю только общую сумму. Но я хотел бы передать несколько пунктов в PayPal.

Я пробовал вот так:

    import {
      Component,
      OnInit,
      ViewChild,
      Input,
      ElementRef,
      Output,
      EventEmitter
    } from "@angular/core";

    declare var paypal;

    @Component({
      selector: "app-payme",
      templateUrl: "./payme.component.html",
      styleUrls: ["./payme.component.scss"]
    })
    export class PaymeComponent implements OnInit {
      @ViewChild("paypal", { static: true }) paypalElement: ElementRef;
      @Input() total: number;
      @Input() cart: [];

      //payCart: [];

      @Output() isPaidFor: EventEmitter<boolean> = new EventEmitter();

      paidFor = false;

      constructor() {}

      cartInConsole() {
        console.log("PayPalTotal", this.total);
      }

      declareItem() {
        let paypalItem = [];
        for (let i =0 ; i< this.cart.length; i++) {
            let currency = "EUR";
            let quantity = this.cart[i].selectedSize;
            let name = this.cart[i].name;
            let amount = this.cart[i].selectedPrice;
            console.log("DeclareFunction rennt");
            //let pushItem = {"quantity": quantity};  
            paypalItem.push({"unit_amount": {"currency_code": "EUR","value": currency, "amount": amount},"quantity": quantity,"name": name});
           console.log("Declare", paypalItem) 
            return paypalItem
          }

         console.log("StackOverFow", paypalItem )
      };


      ngOnInit() {
        console.log("PayPalCart", this.cart);
        this.declareItem();
        paypal
          .Buttons({
            createOrder: (data, actions) => {
              return actions.order.create(

                {
              purchase_units: [{
                amount: {
                    currency_code: 'EUR',
                    value: this.total,

                    }
                },
              items: this.paypalItem
            }]
            },
            onApprove: async (data, actions) => {
              const order = await actions.order.capture();
              this.paidFor = true;
              this.isPaidFor.emit(this.paidFor);
              console.log("Order", order);
            }
          })
          .render(this.paypalElement.nativeElement);
      }

    }

Но все, что я получаю в качестве ответа: items is not defined.

console.log моего paypalItem выглядит нормально - похоже, это массив объектов, как и должно быть.

Но как мне заставить его передать этот объект элементу или элементу?

Кстати: какой именно? Товар или предметы? Несколько часов поиска в Google и получение разных ответов заставят вас сомневаться ни в чем: -)

Заранее большое спасибо!

ОБНОВЛЕНИЕ

I попробовал объявить paypalItem, а затем установить в функции declareItem. К сожалению, с тем же результатом ...

Теперь код выглядит так:

 import {
  Component,
  OnInit,
  ViewChild,
  Input,
  ElementRef,
  Output,
  EventEmitter
} from "@angular/core";

declare var paypal;

@Component({
  selector: "app-payme",
  templateUrl: "./payme.component.html",
  styleUrls: ["./payme.component.scss"]
})
export class PaymeComponent implements OnInit {
  @ViewChild("paypal", { static: true }) paypalElement: ElementRef;
  @Input() total: number;
  @Input() cart: [];
paypalItem: [];
  //payCart: [];

  @Output() isPaidFor: EventEmitter<boolean> = new EventEmitter();

  paidFor = false;

  constructor() {}

  cartInConsole() {
    console.log("PayPalTotal", this.total);
  }

  declareItem() {
    let paypalItem = [];
    for (let i =0 ; i< this.cart.length; i++) {
        let currency = "EUR";
        let quantity = this.cart[i].selectedSize;
        let name = this.cart[i].name;
        let amount = this.cart[i].selectedPrice;
        console.log("DeclareFunction rennt");
        //let pushItem = {"quantity": quantity};  
        paypalItem.push({"unit_amount": {"currency_code": "EUR","value": currency, "amount": amount},"quantity": quantity,"name": name});
       console.log("Declare", paypalItem) 
        this.paypalItem = paypalItem;
      }

     console.log("StackOverFow", paypalItem )
  };


  ngOnInit() {
    console.log("PayPalCart", this.cart);
    this.declareItem();
    paypal
      .Buttons({
        createOrder: (data, actions) => {
          return actions.order.create(

            {
          purchase_units: [{
            amount: {
                currency_code: 'EUR',
                value: this.total,

                }
            },
          items: this.paypalItem
        }]
        },
        onApprove: async (data, actions) => {
          const order = await actions.order.capture();
          this.paidFor = true;
          this.isPaidFor.emit(this.paidFor);
          console.log("Order", order);
        }
      })
      .render(this.paypalElement.nativeElement);
  }

}

Есть другие идеи?

Еще одно обновление:

Полный код на коды и ящик

Answer 1

Не вижу переменную, объявленную как paypalItem в классе. Объявите переменную с именем paypalItem, затем внутри метода declareItem() назначьте массив paypalItem на уровень класса paypalItem, который вы объявили ранее.

declareItem() {
...
this.paypalItem = paypalItem;
}

Обновить

Это была ошибка привязки вашей модели. При добавлении элементов в заказ Paypal на создание требуется модель с разными необходимыми свойствами. Я добавил в код образец модели. Вы можете сопоставить свои значения с вашей моделью и заменить ее там.

Для тестирования замените этот фрагмент кода своим в песочнице. Будет работать нормально.

Обратитесь сюда. документация api для create (items array)

 paypal
      .Buttons({
        createOrder: (data, actions) => {
          // This function sets up the details of the transaction, including the amount and line item details.
          return actions.order.create({
            intent: "CAPTURE",
            purchase_units: [
              {
                amount: {
                  currency_code: "EUR",
                  value: "0.02",
                  breakdown: {
                    item_total: {
                      currency_code: "EUR",
                      value: "0.02"
                    }
                  }
                },
                items: [
                  {
                    name: "item1",
                    unit_amount: {
                      currency_code: "EUR",
                      value: "0.01"
                    },
                    quantity: "1"
                  },
                  {
                    name: "item2",
                    unit_amount: {
                      currency_code: "EUR",
                      value: "0.01"
                    },
                    quantity: "1"
                  }
                ]
              }
            ]
          });
        },
        onApprove: function(data, actions) {
          // This function captures the funds from the transaction.
          return actions.order.capture().then(function(details) {
            // This function shows a transaction success message to your buyer.
            alert("Transaction completed by " + details.payer.name.given_name);
          });
        }
      })
      .render(this.paypalElement.nativeElement);