web-dev-qa-db-fra.com

Comment intégrer Paypal Express Checkout au projet TypeScript angular2

Paypal fournit un moyen simple d’intégrer sa solution de paiement express mais quelle est la meilleure solution pour utiliser cette solution dans un projet angular2 fonctionnant à l’écriture manuscrite?

angulartypescriptpaypal
10
loicb

J'ai utilisé une solution comme celle-ci:

Méthode de chargement de scripts externes

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

Code du composant

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

Crédit

La réponse de Andrei Odri ici: balise script dans angular2 template/hook lorsque template dom est chargé

7
Remotec

vous pouvez implémenter Payout avec angular 4 comme ceci 

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({
             [...]
            })
    [...]

Prendre plaisir :)

3
Mikhaël Gerbet

En utilisant la réponse de Remotec, je peux rendre le paiement express. Il donne cependant quelques avertissements de violation. J'ai rendu dans ma fonction après que l'utilisateur sélectionne la devise. J'ai passé 'this' du modèle angulaire. J'ai utilisé les matériaux Angular 6 et Angular 2

<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>

Dans la fonction CurrencyChange j'ai ceci est passé et dans la fonction Paypal j'ai encore appelé ma fonction angulaire pour compléter le paiement. Je ne sais pas si c'est une bonne pratique. Mais cela a fonctionné.

    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