<commit_before><polymer-element name="ceci-paypal-express" extends="ceci-element" attributes="amount currency readonly paymentproxy checkouturl">
  <template>
    <style>
      :host {
        display: block;
        min-height: 50px;
        width: 100%;
        font-family: sans-serif;
        font-size: 12pt;
        background: white;
        padding: 1em 0;
      }

      :host #view[data-mode*="ready"] > *:not([data-mode*="ready"]) { display: none; }
      :host #view[data-mode*="ready"] > *[data-mode*="ready"] { display: block; }
      :host #view[data-mode*="loading"] > *:not([data-mode*="loading"]) { display: none; }
      :host #view[data-mode*="loading"] > *[data-mode*="loading"] { display: block; }
      :host #view[data-mode*="error"] > *:not([data-mode*="error"]) { display: none; }
      :host #view[data-mode*="error"] > *[data-mode*="error"] { display: block; }
      :host #view[data-mode*="paying"] > *:not([data-mode*="paying"]) { display: none; }
      :host #view[data-mode*="paying"] > *[data-mode*="paying"] { display: block; }
      :host #view[data-mode*="thanks"] > *:not([data-mode*="thanks"]) { display: none; }
      :host #view[data-mode*="thanks"] > *[data-mode*="thanks"] { display: block; }

      :host #view img {
        margin: 1em auto;
      }

      :host iframe {
        width: 100%;
        border: 0;
        padding: 0;
        margin: 0;
        height: 400px;
      }

      :host #errorMessage {
        color: red;
      }

      :host #paymentAmount {
        border: none;
        background: rgba(255, 255, 255, 0.2);
        width: 3em;
        font-family: sans-serif;
        line-height: 1em;
        font-size: 1em;
        text-align: right;
      }
    </style>
    <div id="view" data-mode="ready">
      <div id="errorMessage" data-mode="error">
        <template repeat="{{e in _errorMessages}}">
          <p>{{e}}</p>
        </template>
      </div>
      <div data-mode="loading">Connecting to PayPal...</div>
      <div data-mode="thanks">Thank you for your contribution!</div>
      <div data-mode="ready error">
        Current Donation Amount: <input id="paymentAmount" type="number" value="{{amount}}" readonly?="{{readonly == 'true'}}">
        <select value="{{currency}}" hidden?="{{readonly == 'true'}}">
          <template repeat="{{c in _currencyCodes}}">
            <option value="{{c}}">{{c}}</option>
          </template>
        </select>
        <span hidden?="{{readonly == 'false'}}">{{currency}}</span>
      </div>
      <img data-mode="ready error thanks" src="https://www.paypalobjects.com/webstatic/checkout/hermes/logo.png">
      <iframe id="paymentIframe" data-mode="paying" width="400" height="550"></iframe>
    </div>
    <content></content>
    <shadow></shadow>
  </template>
  <ceci-definition>
    {
      "name": "<NAME>",
      "description": "PayPal Express Mobile Payments",
      "attributes": {
        "currency": {
          "description": "Currency code for donation.",
          "label": "Currency Code",
          "editable": "text",
          "listener": true
        },
        "amount": {
          "description": "Amount to donate.",
          "label": "Amount",
          "editable": "number",
          "min" : 1,
          "listener": true
        },
        "readonly": {
          "description": "Disables ability to edit donation and currency in component UI.",
          "label": "Read-Only",
          "editable": "boolean"
        },
        "paymentproxy" : {
          "description": "(Advanced) PayPal SDK Proxy URL.",
          "label": "Payment Proxy",
          "editable": "text"
        }
      },
      "listeners": {
        "submit": {
          "label": "Submit",
          "description": "Starts PayPal donation submission.",
          "default": "orange"
        }
      },
      "broadcasts": {
        "paymentAccepted": {
          "label": "Payment Accepted",
          "description": "Payment was accepted.",
          "default": "green"
        },
        "paymentCanceled": {
          "label": "Payment Canceled",
          "description": "Payment was canceled by the user.",
          "default": "red"
        },
        "paymentError": {
          "label": "Payment Error",
          "description": "There was an error processing the payment."
        },
        "amountChanged": {
          "label": "Amount Changed",
          "description": "Donation amount changed."
        },
        "currencyChanged": {
          "label": "Currency Changed",
          "description": "Donation currency changed."
        }
      }
    }
  </ceci-definition>
  <script>
    function checkAmount (amount) {
      return amount !== NaN && amount > 1;
    }

    function checkCurrency (currency, currencyCodes) {
      return currencyCodes.indexOf(currency) > -1;
    }

    function validate (element) {
      var failures = [];
      element._errorMessages = [];

      if (!checkAmount(+element.amount)) {
        element._errorMessages.push('Amount must be a number greater than 1.');
        failures.push('amount');
      }

      if (!checkCurrency(element.currency, element._currencyCodes)) {
        element._errorMessages.push('Please choose a valid currency code.');
        failures.push('currency');
      }

      if (element._errorMessages.length > 0) {
        element.setViewMode('error');
        return failures;
      }
      else {
        element.setViewMode('ready');
        return null;
      }
    }

    Polymer('ceci-paypal-express', {
      _proxyParams: {},
      _errorMessages: [],
      _currencyCodes: ['USD', 'GBP'],
      _hashCheckInterval: -1,
      paymentproxy: 'http://appmaker-paypal-proxy.herokuapp.com',
      checkouturl: 'https://www.sandbox.paypal.com/checkoutnow',
      amount: 10,
      currency: 'USD',
      readonly: 'false',
      ready: function () {
        this._proxyParams = {
          PAYMENTREQUEST_0_AMT: '10',
          PAYMENTREQUEST_0_PAYMENTACTION: 'Sale',
          PAYMENTREQUEST_0_CURRENCYCODE: 'USD',
          PAYMENTREQUEST_0_ITEMAMT: '10',
          L_PAYMENTREQUEST_0_NAME0: 'Donation to UNICEF',
          L_PAYMENTREQUEST_0_DESC0: 'Donation to UNICEF for SoccerAID',
          L_PAYMENTREQUEST_0_AMT0: '10',
          L_PAYMENTREQUEST_0_QTY0: '1',
          METHOD: 'SetExpressCheckout'
        };
        this.super();
      },
      startHashCheck: function (callback) {
        if (this._hashCheckInterval) {
          this.stopHashCheck();
        }

        var that = this;
        this._hashCheckInterval = setInterval(function () {
          var match = window.location.hash.match(/#paypal(return|cancel)[^\w]/);
          if (match && match[1]) {
            that.stopHashCheck();
            callback(match[1]);
          }
        }, 100);
      },
      stopHashCheck: function () {
        clearInterval(this._hashCheckInterval);
      },
      removePaypalHash: function () {
        var match = window.location.hash.match(/#paypal(return|cancel)[^\w]/);
        if (match) {
          window.location.hash = window.location.hash.substring(0, match.index) +
            window.location.hash.substring(match.index + match[0].length);
        }
      },
      setViewMode: function (mode) {
        this.$.view.setAttribute('data-mode', mode);
      },
      onPaymentReturn: function () {
        this.setViewMode('thanks');
        this.broadcast('paymentAccepted');
      },
      onPaymentCancel: function () {
        this._errorMessages.push('Payment was canceled.');
        this.setViewMode('error');
        this.broadcast('paymentCanceled');
      },
      amountChanged: function () {
        var validation = validate(this);
        if (!validation || (validation && validation.indexOf('amount') === -1)) {
          this.broadcast('amountChanged');
        }
      },
      currencyChanged: function () {
        var validation = validate(this);
        if (!validation || (validation && validation.indexOf('currency') === -1)) {
          this.broadcast('currencyChanged');
        }
      },
      submit: function () {
        this._errorMessages = [];
        if (!validate(this)) {
          this._proxyParams.PAYMENTREQUEST_0_AMT = this._proxyParams.PAYMENTREQUEST_0_ITEMAMT = this._proxyParams.L_PAYMENTREQUEST_0_AMT0 = +this.amount;
          this._proxyParams.PAYMENTREQUEST_0_CURRENCYCODE = this.currency;
        }
        else {
          return;
        }

        var that = this;
        var xhr = new XMLHttpRequest();
        xhr.open('POST', this.paymentproxy + '/pay/expresscheckout/setexpresscheckout', true);

        this._proxyParams.RETURNURL = window.location.href + '#paypalreturn';
        this._proxyParams.CANCELURL =  window.location.href + '#paypalcancel';
        this.removePaypalHash();

        xhr.onload = function (e) {
          if (xhr.status > 400) {
            try {console.error(JSON.parse(xhr.response).error);}
            catch(e) {}
            that._errorMessages.push('Problem submitting payment request. Please try again.');
            that.setViewMode('error');
          }
          else {
            that.setViewMode('loading');
            var data = JSON.parse(xhr.response);
            that.$.paymentIframe.onload = function () {
              that.setViewMode('paying');
              that.startHashCheck(function (returnType) {
                that['onPayment' + returnType[0].toUpperCase() + returnType.substr(1)]();
              });
            };
            that.$.paymentIframe.src = that.checkouturl + '?token=' + data.response.decoded.TOKEN;
          }
        };
        var data = Object.keys(this._proxyParams).map(function (k) {return escape(k) + '=' + escape(that._proxyParams[k])}).join('&');
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
        xhr.send(data);
      }
    });
  </script>
</polymer-element><commit_msg>more height to accommodate for big iframe<commit_after><polymer-element name="ceci-paypal-express" extends="ceci-element" attributes="amount currency readonly paymentproxy checkouturl">
  <template>
    <style>
      :host {
        display: block;
        min-height: 50px;
        width: 100%;
        font-family: sans-serif;
        font-size: 12pt;
        background: white;
        padding: 1em 0;
      }

      :host #view[data-mode*="ready"] > *:not([data-mode*="ready"]) { display: none; }
      :host #view[data-mode*="ready"] > *[data-mode*="ready"] { display: block; }
      :host #view[data-mode*="loading"] > *:not([data-mode*="loading"]) { display: none; }
      :host #view[data-mode*="loading"] > *[data-mode*="loading"] { display: block; }
      :host #view[data-mode*="error"] > *:not([data-mode*="error"]) { display: none; }
      :host #view[data-mode*="error"] > *[data-mode*="error"] { display: block; }
      :host #view[data-mode*="paying"] > *:not([data-mode*="paying"]) { display: none; }
      :host #view[data-mode*="paying"] > *[data-mode*="paying"] { display: block; }
      :host #view[data-mode*="thanks"] > *:not([data-mode*="thanks"]) { display: none; }
      :host #view[data-mode*="thanks"] > *[data-mode*="thanks"] { display: block; }

      :host #view img {
        margin: 1em auto;
      }

      :host iframe {
        width: 100%;
        border: 0;
        padding: 0;
        margin: 0;
        height: 550px;
      }

      :host #errorMessage {
        color: red;
      }

      :host #paymentAmount {
        border: none;
        background: rgba(255, 255, 255, 0.2);
        width: 3em;
        font-family: sans-serif;
        line-height: 1em;
        font-size: 1em;
        text-align: right;
      }
    </style>
    <div id="view" data-mode="ready">
      <div id="errorMessage" data-mode="error">
        <template repeat="{{e in _errorMessages}}">
          <p>{{e}}</p>
        </template>
      </div>
      <div data-mode="loading">Connecting to PayPal...</div>
      <div data-mode="thanks">Thank you for your contribution!</div>
      <div data-mode="ready error">
        Current Donation Amount: <input id="paymentAmount" type="number" value="{{amount}}" readonly?="{{readonly == 'true'}}">
        <select value="{{currency}}" hidden?="{{readonly == 'true'}}">
          <template repeat="{{c in _currencyCodes}}">
            <option value="{{c}}">{{c}}</option>
          </template>
        </select>
        <span hidden?="{{readonly == 'false'}}">{{currency}}</span>
      </div>
      <img data-mode="ready error thanks" src="https://www.paypalobjects.com/webstatic/checkout/hermes/logo.png">
      <iframe id="paymentIframe" data-mode="paying" width="400" height="550"></iframe>
    </div>
    <content></content>
    <shadow></shadow>
  </template>
  <ceci-definition>
    {
      "name": "PayPal Express",
      "description": "PayPal Express Mobile Payments",
      "attributes": {
        "currency": {
          "description": "Currency code for donation.",
          "label": "Currency Code",
          "editable": "text",
          "listener": true
        },
        "amount": {
          "description": "Amount to donate.",
          "label": "Amount",
          "editable": "number",
          "min" : 1,
          "listener": true
        },
        "readonly": {
          "description": "Disables ability to edit donation and currency in component UI.",
          "label": "Read-Only",
          "editable": "boolean"
        },
        "paymentproxy" : {
          "description": "(Advanced) PayPal SDK Proxy URL.",
          "label": "Payment Proxy",
          "editable": "text"
        }
      },
      "listeners": {
        "submit": {
          "label": "Submit",
          "description": "Starts PayPal donation submission.",
          "default": "orange"
        }
      },
      "broadcasts": {
        "paymentAccepted": {
          "label": "Payment Accepted",
          "description": "Payment was accepted.",
          "default": "green"
        },
        "paymentCanceled": {
          "label": "Payment Canceled",
          "description": "Payment was canceled by the user.",
          "default": "red"
        },
        "paymentError": {
          "label": "Payment Error",
          "description": "There was an error processing the payment."
        },
        "amountChanged": {
          "label": "Amount Changed",
          "description": "Donation amount changed."
        },
        "currencyChanged": {
          "label": "Currency Changed",
          "description": "Donation currency changed."
        }
      }
    }
  </ceci-definition>
  <script>
    function checkAmount (amount) {
      return amount !== NaN && amount > 1;
    }

    function checkCurrency (currency, currencyCodes) {
      return currencyCodes.indexOf(currency) > -1;
    }

    function validate (element) {
      var failures = [];
      element._errorMessages = [];

      if (!checkAmount(+element.amount)) {
        element._errorMessages.push('Amount must be a number greater than 1.');
        failures.push('amount');
      }

      if (!checkCurrency(element.currency, element._currencyCodes)) {
        element._errorMessages.push('Please choose a valid currency code.');
        failures.push('currency');
      }

      if (element._errorMessages.length > 0) {
        element.setViewMode('error');
        return failures;
      }
      else {
        element.setViewMode('ready');
        return null;
      }
    }

    Polymer('ceci-paypal-express', {
      _proxyParams: {},
      _errorMessages: [],
      _currencyCodes: ['USD', 'GBP'],
      _hashCheckInterval: -1,
      paymentproxy: 'http://appmaker-paypal-proxy.herokuapp.com',
      checkouturl: 'https://www.sandbox.paypal.com/checkoutnow',
      amount: 10,
      currency: 'USD',
      readonly: 'false',
      ready: function () {
        this._proxyParams = {
          PAYMENTREQUEST_0_AMT: '10',
          PAYMENTREQUEST_0_PAYMENTACTION: 'Sale',
          PAYMENTREQUEST_0_CURRENCYCODE: 'USD',
          PAYMENTREQUEST_0_ITEMAMT: '10',
          L_PAYMENTREQUEST_0_NAME0: 'Donation to UNICEF',
          L_PAYMENTREQUEST_0_DESC0: 'Donation to UNICEF for SoccerAID',
          L_PAYMENTREQUEST_0_AMT0: '10',
          L_PAYMENTREQUEST_0_QTY0: '1',
          METHOD: 'SetExpressCheckout'
        };
        this.super();
      },
      startHashCheck: function (callback) {
        if (this._hashCheckInterval) {
          this.stopHashCheck();
        }

        var that = this;
        this._hashCheckInterval = setInterval(function () {
          var match = window.location.hash.match(/#paypal(return|cancel)[^\w]/);
          if (match && match[1]) {
            that.stopHashCheck();
            callback(match[1]);
          }
        }, 100);
      },
      stopHashCheck: function () {
        clearInterval(this._hashCheckInterval);
      },
      removePaypalHash: function () {
        var match = window.location.hash.match(/#paypal(return|cancel)[^\w]/);
        if (match) {
          window.location.hash = window.location.hash.substring(0, match.index) +
            window.location.hash.substring(match.index + match[0].length);
        }
      },
      setViewMode: function (mode) {
        this.$.view.setAttribute('data-mode', mode);
      },
      onPaymentReturn: function () {
        this.setViewMode('thanks');
        this.broadcast('paymentAccepted');
      },
      onPaymentCancel: function () {
        this._errorMessages.push('Payment was canceled.');
        this.setViewMode('error');
        this.broadcast('paymentCanceled');
      },
      amountChanged: function () {
        var validation = validate(this);
        if (!validation || (validation && validation.indexOf('amount') === -1)) {
          this.broadcast('amountChanged');
        }
      },
      currencyChanged: function () {
        var validation = validate(this);
        if (!validation || (validation && validation.indexOf('currency') === -1)) {
          this.broadcast('currencyChanged');
        }
      },
      submit: function () {
        this._errorMessages = [];
        if (!validate(this)) {
          this._proxyParams.PAYMENTREQUEST_0_AMT = this._proxyParams.PAYMENTREQUEST_0_ITEMAMT = this._proxyParams.L_PAYMENTREQUEST_0_AMT0 = +this.amount;
          this._proxyParams.PAYMENTREQUEST_0_CURRENCYCODE = this.currency;
        }
        else {
          return;
        }

        var that = this;
        var xhr = new XMLHttpRequest();
        xhr.open('POST', this.paymentproxy + '/pay/expresscheckout/setexpresscheckout', true);

        this._proxyParams.RETURNURL = window.location.href + '#paypalreturn';
        this._proxyParams.CANCELURL =  window.location.href + '#paypalcancel';
        this.removePaypalHash();

        xhr.onload = function (e) {
          if (xhr.status > 400) {
            try {console.error(JSON.parse(xhr.response).error);}
            catch(e) {}
            that._errorMessages.push('Problem submitting payment request. Please try again.');
            that.setViewMode('error');
          }
          else {
            that.setViewMode('loading');
            var data = JSON.parse(xhr.response);
            that.$.paymentIframe.onload = function () {
              that.setViewMode('paying');
              that.startHashCheck(function (returnType) {
                that['onPayment' + returnType[0].toUpperCase() + returnType.substr(1)]();
              });
            };
            that.$.paymentIframe.src = that.checkouturl + '?token=' + data.response.decoded.TOKEN;
          }
        };
        var data = Object.keys(this._proxyParams).map(function (k) {return escape(k) + '=' + escape(that._proxyParams[k])}).join('&');
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
        xhr.send(data);
      }
    });
  </script>
</polymer-element>
{'fraction_non_alphanumeric': 0.15767718520012097, 'fraction_numerical': 0.008670228853715092, 'mean_word_length': 2.2153970826580225, 'pattern_counts': {'":': 86, '<': 84, '<?xml version=': 0, '>': 112, 'https://': 4, 'lorem ipsum': 0, 'www.': 6, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '730894', 'n_tokens_mistral': 5982, 'n_tokens_neox': 5784, 'n_words': 1126}