web-dev-qa-db-ja.com

Paypalチェックアウトボタンのクリックをトリガー

Paypal Checkoutボタンのクリックをトリガーするにはどうすればよいですか？ Paypalの支払いも受け入れるクレジットカードの横にWebサイトがあり、顧客が支払う方法とPaypal Checkoutボタンを選択するためのラジオボタンを配置することにしました： enter image description here

Paypal Checkoutボタン自体をクリックすると、Paypalのセキュアウィンドウが開き、残りは正常に機能します。顧客が最初のラジオボタンをクリックすると、Paypalの安全なウィンドウをもう一度開きます。つまり、Paypalチェックアウトボタンをクリックします。ボタン自体がiframeに表示されていて、そのボタンのクリックイベントをドメイン間でトリガーできない場合、どうすればよいですか？チェックアウトボタンのクリックをトリガーする方法はありますか？

HTMLコードは次のとおりです。

<html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="https://www.paypalobjects.com/api/checkout.js"></script>
    <script type="text/javascript" src="Paypal.js">

    </script>
    <body>
        <div>
        <span style="vertical-align: 50%"><input id="rd" name="aaa" type="radio"/></span>
        <div id="Paypal-button-container" style="display: inline-block"></div><hr/>
        <input id="rd1" name="aaa" type="radio"/>
        </div>
    </body>
</html>

JavaScriptコード：

// Paypal.js
// Render the Paypal button
$(function(){
    Paypal.Button.render({

        // Set your environment

        //TODO: Dynamically provide sandbox or production
        env: 'sandbox', // sandbox | production

        // Paypal Client IDs - replace with your own
        // Create a Paypal app: https://developer.Paypal.com/developer/applications/create

        //TODO: Dynamically provide clientID
        client: {
            sandbox:    'ZZZZZZ',
            production: '//TODO: Provide this later'
        },

        // Wait for the Paypal button to be clicked

        payment: function() {

            // Make a client-side call to the REST api to create the payment

            return Paypal.rest.payment.create(this.props.env, this.props.client, {
                transactions: [
                    {
                        amount: { total: '13.10', currency: 'USD' }
                    }
                ]
            });
        },

        // Wait for the payment to be authorized by the customer

        onAuthorize: function(data, actions) {

            return actions.payment.get().then(function(paymentData) {

                $('#Paypal-button-container').style.display = 'none'; //hide button

                //TODO: Show user payment details
                //TODO: Create input hidden fields and set payerID, paymentID, etc..for later authoriza/capture
            });
        },

        onClick: function(){
            $('#rd').trigger('click');
        },

    }, '#Paypal-button-container');
});

編集：作業例としてこのサイトを提案しますが、これは私が必要とするものとは少し異なります https://developer.Paypal.com/demo/checkout/#/pattern/mark

paypalpaypal-sandbox
15
Arsen Alexanyan

これは、現在Paypalボタンでサポートされているものではありません。公式のポリシーでは、ボタン自体をクリックするだけでチェックアウトウィンドウが開きます。

8
bluepnume

私は少し遅れていると思いますが、これが私のようにこの問題に直面した人々を助けることを願っています。

Paypalのボタンの不透明度を0に設定して、独自のチェックアウトボタンの上に置くことができます。次に、ラジオボタンの値に応じて、表示を「なし」または「ブロック」に設定できます。

4
Danil

私の場合、スペース上の理由から完全にカスタマイズされたボタンを使用したかっただけです。最後に、マウスオーバーでoverflow：hidden divにラップされるまでPaypalボタンを隠しました。それは大丈夫に見えます-左/右のパディングのない正方形のPaypalボタンのように..

背景：Paypalの現在のエクスプレスチェックアウトのドキュメントでは、最小サイズが80pxのボタンのみがサポートされていますが、CSSで遊ぶと、デスクトップ上の実際の最小サイズは約120px幅になります。

1
Mario Olivio Flores