Stripe - JSON Circular reference

Question

Im using Stripe Checkout.js to create a payment. I\'m creating a handler, that on success sends a token to the server:

let handler = StripeCheckout.configure({
          


        

Answer 1

The problem is in checkout.js (at line 780 in the de-minified file):

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

When running in Angular2, zone.js has wrapped the callback with zone information. This means that the args parameter looks like:

[5, ZoneTask]

And, ZoneTask has a member, .zone, which contains a circular reference: zone -> _zoneDelegate -> zone

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

So, fundamentally Stripe's checkout.js makes a non-circularity assumption which is no longer valid when Zone.js has been meddling. Stripe are going to have to fix this.

In the meantime you can use the following horrendous hack. It's so horrendous and so hacky that it makes my eyes bleed, but it's the best I could come up with to fix it without modifying Stripe's code. Essentially, you globally replace JSON.stringify with a version that breaks any zone->_zoneDelegate->zone cycles in the object it is being asked to stringify:

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;
    });
  }
};  

Apologies if your eyes are now bleeding. It works.