在PayPal Express Checkout按钮之前添加Bootstrap Modal

时间:2016-12-10 20:36:50

标签: javascript html bootstrap-modal paypal

我正在尝试使用PayPal的快速​​支付系统(https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/)在我的网页上添加一个按钮来处理注册付款和结帐。我想弄清楚,如果可能的话,如何添加一个在单击结帐按钮但在结帐窗口出现之前出现的引导模式。我的目标是让这个模式包含用户必须同意的注册条款和条件才能结账。下面是我用于结帐和模态的代码:

HTML

<div id="paypal-button" ></div>

<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
                <h4 class="modal-title" id="myModalLabel">Terms and Conditions for Registration</h4>
                </div>
                <div class="modal-body">
                    <h3>Insert terms and conditions here</h3>
                </div>
                <div class="modal-footer">
                    <center>
                        <button type="button" class="btn btn-primary" data-dismiss="modal">Accept</button>
                        <button type="button" class="btn btn-default">Decline</button>
                    </center>
                </div>
            </div>
        </div>
</div>

的JavaScript

paypal.Button.render({

    env: 'sandbox', // Specify 'sandbox' for the test environment

    style: {
            size: 'small',
            color: 'blue',
            shape: 'rect'
    },

    /*client: {
        sandbox:    'xxxxxxxxx',
        production: 'xxxxxxxxx'
    },*/

    payment: function() {

        var env    = this.props.env;
        var client = this.props.client;

        $("#basicModal").modal();

        return paypal.rest.payment.create(env, client, {
            transactions: [
                {
                    amount: { total: '1.00', currency: 'USD' }
                }
            ]
        });
    },

    commit: true, // Optional: show a 'Pay Now' button in the checkout flow

    onAuthorize: function(data, actions) {

        // Optional: display a confirmation page here

        return actions.payment.execute().then(function() {
            // Show a success page to the buyer
        });
    }

}, '#paypal-button');

0 个答案:

没有答案