How to integrate PayPal express checkout into angular2 typescript project

后端 未结 4 1434
说谎
说谎 2021-02-19 08:57

Paypal provides an easy way to integrate its express checkout solution but what is the best solution to use this solution in an angular2 project working written in typescript?

4条回答
  •  北海茫月
    2021-02-19 09:36

    By using Remotec's answer I'm able to render the express checkout. It gives some violation warnings though. I've rendered in my function after user selects currency. I've passed 'this' from angular template. I've used Angular 6 and Angular material 2

    Cost {{c.viewValue}}

    In function CurrencyChange I've this is passed and in paypal function I've again called my angular function to complete the payment. I don't know if this is a good practice. But this worked.

        export class PaymentComponent implements OnInit {
    
      cost = '1';
      currency = 'INR';
      selectedCurrency = "0";
      currencies: Currency[] = [
        {
          value: "0",
          viewValue: "Select Currency"
        },
        {
          "value": "INR",
          "viewValue": "Indian Ruppe"
        }, {
          "value": "USD",
          "viewValue": "US Dollar"
        },
        {
          "value": "EUR",
          "viewValue": "EURO"
        }]
    
      private loadExternalScript(scriptUrl: string) {
        return new Promise((resolve, reject) => {
          const scriptElement = document.createElement('script')
          scriptElement.src = scriptUrl
          scriptElement.onload = resolve
          document.body.appendChild(scriptElement)
        })
      }
    
      ngOnInit() {
        this.loadExternalScript("https://www.paypalobjects.com/api/checkout.js");
      }
    
    
      constructor() { }
    
      paymentSuccess(payment) {
        //alert('Payment Success');
      }
      CurrencyChange(cost, selectedCurreny,self): void {
    
        document.getElementById("paypal-button").innerHTML = "";
        if (selectedCurreny == 0) {
          alert('Please select the Country');
          return;
        }
        //reset earlier inserted paypal button
        paypal.Button.render({
          env: 'sandbox',
          client: {
            production: 'AQ9IbOayBJxHmad9DMGoysS4UhzE-usUqfSQ-CLzSn3M96qvZny5vZZ2VkNzn6EBTnE2UU4L8PDkqJJE',
            sandbox: 'AQ9IbOayBJxHmad9DMGoysS4UhzE-usUqfSQ-CLzSn3M96qvZny5vZZ2VkNzn6EBTnE2UU4L8PDkqJJE'
          },
          commit: true,
          payment: function (data, actions) {
            return actions.payment.create({
              payment: {
                transactions: [
                  {
                    amount: { total: cost, currency: selectedCurreny }
                  }
                ]
              }
            })
          },
          onAuthorize: function (data, actions) {
            return actions.payment.execute().then(function (payment) {
    
              alert('Payment Successful')
              self.paymentSuccess(payment);
                console.log(payment)
            })
          }
        }, '#paypal-button');
      }
    }
    

提交回复
热议问题