为什么paypal lightbox打开新标签

时间:2016-01-15 14:44:13

标签: javascript paypal paypal-sandbox paypal-adaptive-payments

我正在用lightbox实现paypal自适应支付链式嵌入式流程。 我按照here描述的灯箱说明。

问题是:当我点击“登录”或“以访客身份付款”时,浏览器中的新标签会打开,并且会在原始页面上的paypal灯箱中显示“在新窗口中继续付款”等消息。

有人知道如何在不打开新标签的情况下在灯箱中完成付款吗?

这是一个React组件,我用它来启动付款流程:

import React from 'react/addons';
import $ from 'jquery';

import PaymentFlow from '../PaymentFlow.js';
import PaymentActions from '../../../actions/payment';
import PAYMENT from '../../../constants/payments';

const SRC = 'https://www.paypalobjects.com/js/external/dg.js';

class PaypalEmbeddedFlow extends PaymentFlow {

  //...

  componentDidMount() {
    this.init();
  }

  shouldComponentUpdate() {
    return true;
  }

  init() {
    if (!window.PAYPAL || !window.PAYPAL.apps || !window.PAYPAL.apps.DGFlow) {
      (()=> {
        const ppembed = document.createElement('script');
        ppembed.async = true;
        ppembed.type = 'text/javascript';
        ppembed.src = SRC;
        ppembed.onload = ()=> {
          window.dgFlow = new window.PAYPAL.apps.DGFlow({
            trigger: PaypalEmbeddedFlow.submitBtnId
          })
        };

        const head = document.getElementsByTagName('head')[0];
        head.appendChild(ppembed);
      })();
    }

  }

  initPayment(orderId) {
    PaymentActions.request(orderId, PAYMENT.METHOD.PAYPAL, PAYMENT.STAGE.INIT, (data)=> {
      if (!data.body || !data.body.payKey) {
        throw new Error ('Paypal payment key is missing');
      }
      this.setState({
        payKey: data.body.payKey
      }, ()=> {
        $('#' + PaypalEmbeddedFlow.submitBtnId)[0].click();
      });
    });
  }

  render() {
    var preapprovalKey = this.state.preapprovalKey ? (<input id="preapprovalkey" type="hidden" name="preapprovalkey" value={this.state.preapprovalKey}/>) : null;


    return (
      <div className="hidden">
        <form action="https://www.sandbox.paypal.com/webapps/adaptivepayment/flow/pay" target="PPDGFrame" className="standard">
          <input id="type" type="hidden" name="expType" value="light"/>
          <input id="paykey" type="hidden" name="paykey" value={this.state.payKey}/>
          {preapprovalKey}
          <input type="submit" id={PaypalEmbeddedFlow.submitBtnId} value="Pay with PayPal"/>
        </form>
      </div>
    )
  }

}

/**
 * Paypal trigger button element id
 * @type {string}
 */
PaypalEmbeddedFlow.submitBtnId = 'paypalCheckoutBtn';

export default PaypalEmbeddedFlow;
在父组件中触发了

'initPayment'方法。

0 个答案:

没有答案