2017-10-29 18 views
2

私のウェブサイトにPayPal支払いオプションが追加されました。私は以下のようにPayPal支払いのコードを統合しました:クライアント側REST APIを使用してLaravelにPayPalボタンが表示されない

<div class="col-md-6 col-xs-12"> 
<script src="https://www.paypalobjects.com/api/checkout.js"></script> 
         <div class="sec_pay_hd"> 
          Payment Method 
         </div> 
         <div id="paypal-button-container"></div> 
         <div id="confirm" class="hidden"> 
            <div>Ship to:</div> 
            <div><span id="recipient"></span>, <span id="line1"></span>, <span id="city"></span></div> 
            <div><span id="state"></span>, <span id="zip"></span>, <span id="country"></span></div> 

            <button id="confirmButton">Complete Payment</button> 
           </div> 
           <div id="thanks" class="hidden"> 
              Thanks, <span id="thanksname"></span>! 
             </div> 
         <!-- <div class="pay_mode_img1 visa_imgsasa"> --> 
         <!-- </div> --> 
         <script> 
            paypal.Button.render({ 

             env: 'sandbox', // sandbox | production 

             client: { 
              sandbox: 'AZDxjDScFpQtjWTOUtWKbyN_bDt4OgqaF4eYXlewfBP4-8aqX3PiV8e1GWU6liB2CUXlkA59kJXE7M6R', 
              production: '<insert production client id>' 
             }, 

             payment: function(data, actions) { 
              return actions.payment.create({ 
               payment: { 
                transactions: [ 
                 { 
                  amount: { total: '0.01', currency: 'USD' } 
                 } 
                ] 
               } 
              }); 
             }, 

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

             onAuthorize: function(data, actions) { 

              // Get the payment details 

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

               // Display the payment details and a confirmation button 

               var shipping = data.payer.payer_info.shipping_address; 

               document.querySelector('#recipient').innerText = shipping.recipient_name; 
               document.querySelector('#line1').innerText  = shipping.line1; 
               document.querySelector('#city').innerText  = shipping.city; 
               document.querySelector('#state').innerText  = shipping.state; 
               document.querySelector('#zip').innerText  = shipping.postal_code; 
               document.querySelector('#country').innerText = shipping.country_code; 

               document.querySelector('#paypal-button-container').style.display = 'none'; 
               document.querySelector('#confirm').style.display = 'block'; 

               // Listen for click on confirm button 

               document.querySelector('#confirmButton').addEventListener('click', function() { 

                // Disable the button and show a loading message 

                document.querySelector('#confirm').innerText = 'Loading...'; 
                document.querySelector('#confirm').disabled = true; 

                // Execute the payment 

                return actions.payment.execute().then(function() { 

                 // Show a thank-you note 

                 document.querySelector('#thanksname').innerText = shipping.recipient_name; 

                 document.querySelector('#confirm').style.display = 'none'; 
                 document.querySelector('#thanks').style.display = 'block'; 
                }); 
               }); 
              }); 
             } 

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

           </script> 

         <div class="visa_imgsasa"> 
          <img src="{{asset('assets/resources/images/visa-image.png')}}" alt=""> 
         </div> 

私はpaypalスクリプトをページの上部に追加しました。しかし、今、私は助けの任意の並べ替えが高く評価され、繰り返し

screenshot for error part-1

enter image description here

をこのエラーを取得しています、私はウェブ上でこのエラーで検索しましたが、いずれも見つけることができませんでした。これはpaypalウェブサイトのデモからのサンプルコードです。しかし、これは私のローカルサーバでも動作していません。あなたのページからこれを削除する

+0

私はデバッグを手伝ってうれしいです(私はcheckout.jsを維持しています) - このエラーを再現できるライブページはありますか? – bluepnume

+0

は、サイトへのリンクを含むコメントを削除しました。 _/\ _ – stackMonk

答えて

2

$('nav#menu').mmenu();

^問題を修正します。私の推測では、DOMからiframeを削除してから、iframeの内部ウィンドウを閉じるために再追加します。

+0

非常にありがとう、今はスムーズに動作します。 mmenuは、右にスライドするモバイルメニューを管理するサードパーティのスクリプトです。どういうわけかこれはpaypalコードを妨害している、私はそれを解決するために取り組んでいます。しかし、これはそのような安堵です。本当にありがとう! – stackMonk

関連する問題