I am implementing paypal adaptive payments chained embedded flow with lightbox. I follow instruction for lightbox described here.
The problem is: when I click 'login' or 'pay as a guest', a new tab in browser opens and a message like 'continue your payment in new window' is shown in paypal lightbox on original page.
Does anyone know how to complete a payment in lightbox without opening new tab?
Here's a React component, that I use for initing payment flow:
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' method is triggered in parent component.