2016-03-28 22 views
14

Stripe Checkout.jsを使用して支払いを作成しています。私はそれが成功したサーバにトークンを送信し、ハンドラを作成しています:ストライプ - JSON循環参照

let handler = StripeCheckout.configure({ 
       key: 'my_key', 
       image: 'image.png', 
       locale: 'auto', 
       token: token => { 

        console.log(token.id); 

        // ... send token to server 
       } 
      }); 

その後、私はトークンを作成するためのハンドラを使用します。

handler.open({ 
    name: 'Test', 
    description: 'test', 
    billingAddress: false, 
    currency: 'eur', 
    amount: '1200', 
}); 

このハンドラは、テストcheckout.jsポップアップをトリガー私が記入してPayをクリックしてください。ボタンが緑色で表示され、正常に終了します。

しかし、一瞬の間ボタンが緑色に表示され、トークンが(ハンドラの成功コールバックで)コンソールに出力された瞬間、エラーがスローされます。

EXCEPTION: TypeError: Converting circular structure to JSON

スタックトレースの主要部分このです:コードを検査することにより

TypeError: Converting circular structure to JSON 
    at Object.stringify (native) 
    at Object.stringify (http://localhost:5000/dist/client/bundle.js:46294:29) 
    at RPC.sendMessage (https://checkout.stripe.com/checkout.js:1:18068) 
    at RPC.sendMessage (https://checkout.stripe.com/checkout.js:1:16180) 
    at https://checkout.stripe.com/checkout.js:1:17137 
    at RPC.ready (https://checkout.stripe.com/checkout.js:1:17416) 
    at RPC.invoke (https://checkout.stripe.com/checkout.js:1:17084) 
    at RPC.invoke (https://checkout.stripe.com/checkout.js:1:16180) 
    at RPC.processMessage (https://checkout.stripe.com/checkout.js:1:18899) 
    at RPC.processMessage (https://checkout.stripe.com/checkout.js:1:16180) 

、我々が見る問題はここにある:

 RPC.prototype.sendMessage = function(method, args) { 
      var err, id, message, _ref; 
      if (args == null) { 
       args = [] 
      } 
      id = ++this.rpcID; 
      if (typeof args[args.length - 1] === "function") { 
       this.callbacks[id] = args.pop() 
      } 
      message = JSON.stringify({ 
       method: method, 
       args: args, 
       id: id 
      }); 

Checkout.jsが循環参照を持つメッセージオブジェクトを作成したように見えるので、JSON.stringifyを呼び出してエラーを発生させようとします。

このエラーは致命的ではなく、お支払いは完了しましたが、これが何であり、どのように修正するのか分かりますか?

また、既知の回避策があります。

これはpostMessageにオブジェクトを渡す前stringifyを呼び出すとMDN docsに応じて必要ではないかもしれないことをfull stack trace

注意です。

postMessageは、thisに従って循環参照をサポートするシリアル化メカニズムを使用します。

+1

したがって、自分自身への参照を持つオブジェクトをストリング化しています。それらの参照なしでそれを文字列化してください。 'args'とは何ですか? – dfsq

+0

stringifyはストライプ・チェックアウト・コードにあり、アプリケーション・コードにはありません。 Stripeに問題を報告しましたが、誰かが回避策を知っているかもしれないので、ここに投稿しました。またAngular 2がベータ版の場合は、わからない –

+1

JSON.stringifyでこのコードをデバッグしようとしましたか? – dfsq

答えて

12

問題は、(デ縮小さファイルの行780で)checkout.jsである:

message = JSON.stringify({ 
    method: method, 
    args: args, 
    id: id 
}); 

Angular2で実行されている、zone.jsゾーン情報とコールバックラップしています。だから基本的にストライプのcheckout.jsを作るの

JSON.stringify(args[1].zone) 
> Uncaught TypeError: Converting circular structure to JSON(…) 

:ZoneTaskは循環参照が含まれているメンバー、.zoneを、持っている、

[5, ZoneTask]

そして:これは、引数のパラメータがどのように見えることを意味しZone.jsが干渉しているときにもはや有効ではない非円形性の仮定。ストライプはこれを修正する必要があります。

それまでの間は、恐ろしいハックを使用することができます。それは非常に恐ろしいので、それは私の目を滲出させるハッキーですが、 それは私がストライプのコードを変更せずに修正するために思い付くことができる最高です。基本的には、JSONをグローバルに置き換えます。いずれかのゾーンを壊すバージョンで文字列化 - > _ zoneDelegate->ゾーン・サイクル、文字列化するように要求されているオブジェクトに:

const _stringify = JSON.stringify; 
JSON.stringify = function (value, ...args) { 
    if (args.length) { 
    return _stringify(value, ...args); 
    } else { 
    return _stringify(value, function (key, value) { 
     if (value && key === 'zone' && value['_zoneDelegate'] 
      && value['_zoneDelegate']['zone'] === value) { 
     return undefined; 
     } 
     return value; 
    }); 
    } 
}; 

謝罪あなたの目が今出血している場合。できます。

+1

あなたのハックは私の魅力のように機能しました。私はそれを支払いコンポーネントのngOnInitに貼り付けただけで、 'return _stringify ...'行の 'Typescriptコンパイラからの'指定されたパラメータが呼び出しターゲットのシグネチャと一致しません 'というエラーを無視しなければなりませんでした。本当にありがとう! –

+3

エラーは、const_stringifyに割り当てられているときにJSON.stringifyの前にを追加することによっても削除できます。 –

+0

このエラーはStripe Checkoutで修正されました。今すぐ動作するはずです。回避策は必要ありません –

関連する問題