it-swarm.com.de

So integrieren Sie den Paypal Express Checkout in das TypeScript-Projekt "angle2"

Paypal bietet eine einfache Möglichkeit, die Express-Checkout-Lösung zu integrieren , aber was ist die beste Lösung, um diese Lösung in einem in Typoscript geschriebenen angle2-Projekt zu verwenden?

10
loicb

Ich habe eine Lösung wie diese verwendet:

Methode zum Laden externer Skripte

  private loadExternalScript(scriptUrl: string) {
    return new Promise((resolve, reject) => {
      const scriptElement = document.createElement('script')
      scriptElement.src = scriptUrl
      scriptElement.onload = resolve
      document.body.appendChild(scriptElement)
  })

Komponentencode

  ngAfterViewInit(): void {
    this.loadExternalScript("https://www.paypalobjects.com/api/checkout.js").then(() => {
      Paypal.Button.render({
        env: 'sandbox',
        client: {
          production: '',
          sandbox: ''
        },
        commit: true,
        payment: function (data, actions) {
          return actions.payment.create({
            payment: {
              transactions: [
                {
                  amount: { total: '1.00', currency: 'USD' }
                }
              ]
            }
          })
        },
        onAuthorize: function(data, actions) {
          return actions.payment.execute().then(function(payment) {
            // TODO
          })
        }
      }, '#Paypal-button');
    });
  }

Kredit

Antwort von Andrei Odri hier: Skripttag in angle2 template/hook, wenn template dom geladen wird

7
Remotec

sie können Paypal Checkout mit dem Winkel 4 folgendermaßen implementieren: 

import { Component, OnInit } from '@angular/core';

declare let Paypal: any;

@Component({
    selector: 'app-page-offers',
    templateUrl: './page-offers.component.html',
    styleUrls: ['./page-offers.component.sass']
})

export class PageOffersComponent implements OnInit {

    constructor() {}

    ngOnInit() {
        $.getScript( 'https://www.paypalobjects.com/api/checkout.js', function() {
            Paypal.Button.render({
             [...]
            })
    [...]

Genießen :)

3
Mikhaël Gerbet

Durch die Verwendung von Remotecs Antwort kann ich die Expresskasse rendern. Es gibt jedoch einige Warnmeldungen. Ich habe in meiner Funktion gerendert, nachdem der Benutzer die Währung ausgewählt hat. Ich habe 'das' von der Winkelvorlage übergeben. Ich habe Angular 6 und Angular Material 2 verwendet

<div class="container">
  <div *ngFor="let currency of currencies">
  </div>

  <div class="row">
    <form >
      <mat-form-field appearance="standard" class="col-sm-12 col-md-6">
        <mat-label>Cost</mat-label>
        <input matInput placeholder="Amount" [(ngModel)]="cost" required disabled="true" name="amount" id="amount">
      </mat-form-field>

      <mat-form-field appearance="standard" class="col-sm-12 col-md-6">
        <mat-select placeholder="Select Currency" [(ngModel)]="selectedCurrency" name="curr" id="curr" (selectionChange)="CurrencyChange(cost,selectedCurrency,this)" >
          <mat-option *ngFor="let c of currencies" [value]="c.value" >
            {{c.viewValue}}
          </mat-option>
        </mat-select>

      </mat-form-field>
    </form>

  </div>
  <div id="Paypal-button" class="align-content-between align-content-center"></div>
</div>

In der Funktion CurrencyChange habe ich dies bestanden und in der Paypal-Funktion habe ich wieder meine Winkelfunktion aufgerufen, um die Zahlung abzuschließen. Ich weiß nicht, ob dies eine gute Praxis ist. Aber das hat funktioniert.

    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');
  }
}
0
Shatayu Darbhe