Paypal Express结帐稍后付款

时间:2019-07-25 09:58:39

标签: angular paypal

如何自定义贝宝以登录页面并在结帐页面中使用该会话来完成付款,以便可以将运输成本添加到付款中。

在这里,我使用了贝宝快速结帐方法,可以登录并立即付款。它可以正常工作,但我的要求是登录页面,并且必须在结帐页面中使用该会话来完成付款。

// HTML //

<input type="number" [(ngModel)]="finalAmount" style="padding-bottom: 10px;">
<h2 *ngIf="paypalLoad">Paypal button is loading</h2>
<div id="paypal-checkout-btn"></div>

//发起人//

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

declare let paypal: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewChecked {

  addScript: boolean = false;
  paypalLoad: boolean = true;

  finalAmount: number = 1;

  paypalConfig = {
    env: 'sandbox',
    client: {
      sandbox: '<your-sandbox-key-here>',
      production: '<your-production-key here>'
    },
// commit : false can be used to change pay now to continue option.
    commit: true,
    payment: (data, actions) => {
      return actions.payment.create({
        payment: {
          transactions: [
            { amount: { total: this.finalAmount, currency: 'INR' } }
          ]
        }
      });
    },
    onAuthorize: (data, actions) => {
      return actions.payment.execute().then((payment) => {
        //Do something when payment is successful.
      })
    }
  };

  ngAfterViewChecked(): void {
    if (!this.addScript) {
      this.addPaypalScript().then(() => {
        paypal.Button.render(this.paypalConfig, '#paypal-checkout-btn');
        this.paypalLoad = false;
      })
    }
  }

  addPaypalScript() {
    this.addScript = true;
    return new Promise((resolve, reject) => {
      let scripttagElement = document.createElement('script');    
      scripttagElement.src = 'https://www.paypalobjects.com/api/checkout.js';
      scripttagElement.onload = resolve;
      document.body.appendChild(scripttagElement);
    })
  }

}

将提交更改为false可以稍后付款。选择“付款人”后,将导致继续选项。如何做剩余的过程。 (即完成付款)

0 个答案:

没有答案