如何在脚本中将变量传递给总计

Question

我有以下代码要使用，但我不知道如何将保存购物车总数的 [TOTAL] 变量传递给下面贝宝脚本中的总数。否则买家总是可以花 1 美元购买任何东西，这显然是不正确的。

<script>
   var $total = document.getElementById("balancePrice");


    paypal.Button.render({




        env: 'production', // Or 'sandbox'

        client: {
              sandbox:    'AYdNDf4q9a-V8p8kcVe885AytuFfmXcwfAn7--tEkgV4UMK7k_QroOJsktMpp6v_Y9r2bKz9OUi6cSFi',
                production: 'AfNogtQ4SAPFsVEZIA_KUbMnuN0uNR3cALoL5PsJHlpuV5tMDxwnty2-Ceu11d82KiqnRmEi_Ykap6fP'
        },

        commit: true, // Show a 'Pay Now' button

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

        onAuthorize: function(data, actions) {
            return actions.payment.execute().then(function(payment) {

                // The payment is complete!
                // You can now show a confirmation message to the customer
            });
        }

    }, '#paypal-button');
</script>

这是结帐的 html。 [BALANCE] 是显示发货等后订单的总成本以及我希望传递给贝宝代码的内容。

 <div class="divOrderTotal">
          <div class="header">
            <h3 class="checkout-headers">[checkout3_orderTotal]</h3>
            <div class="clear"></div>
          </div>
          <div id="total_div" name="total_div" class="pad10 boxShadow"> 
            <!--START: total_template_noshipping-->
            <div class="totalinstructions pad10 boxShadow">[checkout3_totalinstructions]</div>
            <!--END: total_template_noshipping--> 
            <!--START: total_template-->
            <div class="total_items">[itemCount] Item(s)</div>
            <div class="total_subtotal">[SUBTOTAL]</div>
            <div class="clear"></div>
            <!--START: DISCOUNTS-->
            <div class="total_discount-detail">[shoppingcart_discount]: <a href="javascript:showDiscountDetails();">(details)</a></div>
            <div class="total_discount">- [DISCOUNT]</div>
            <div class="clear"></div>
            <!--START: PROMOTIONS-->
            <div id="divDiscountDetails" name="divDiscountDetails" style="display:none;">
              <div class="total_promotion">Promotion Name</div>
              <div class="clear"></div>
              <!--START: DISPLAY_PROMOS-->
              <div class="total_promotion-name">[promotion_name]</div>
              <div class="button right"><!--START: REMOVE_PROMO--><a href="javascript:removeCoupon('[id]');" class="icon-btn icon-btn-close">Remove</a><!--END: REMOVE_PROMO--></div>
              <!--END: DISPLAY_PROMOS-->
              <div class="clear"></div>
            </div>
            <div class="clear"></div>
            <!--END: PROMOTIONS--> 
            <!--END: DISCOUNTS--> 
            <!--START: BUYSAFE-->
            <div class="total_buysafe-logo"><img src="assets/templates/common/images/buysafe.gif" alt="" /></div>
            <div class="total_buysafe">[buysafe_totalbondcost]</div>
            <div class="clear"></div>
            <!--END: BUYSAFE--> 
            <!--START: HANDLING-->
            <div class="total_handling-item">[handling_itemname]</div>
            <div class="total_handling-price">[handling_price]</div>
            <div class="clear"></div>
            <!--END: HANDLING-->
            <div class="total_cart-shipping">[shoppingcart_shipping]</div>
            <div class="total_shipping">[SHIPPING]</div>
            <div class="clear"></div>
            <div class="total_cart-taxes">[shoppingcart_taxes]</div>
            <div class="total_taxes">[TAX]</div>
            <div class="clear"></div>
            <div class="total_cart-total">[shoppingcart_total]</div>
            <div class="total_total">[TOTAL]</div>
            <div class="clear"></div>
            <!--START: GIFTCERTS-->
            <div class="total_cart-giftcerts">[shoppingcart_giftcertificate]: <a href="javascript:showGiftCertDetails();">(details)</a></div>
            <div class="total_giftcerts">-[GIFTCERTS]</div>
            <div id="divGiftCertDetails" name="divGiftCertDetails" style="display:none;">
              <div class="total_giftcerts-details">
                <div class="giftcerts-name">Gift Code</div>
                <div class="giftcerts-amount">Amount</div>
                <div class="giftcerts-balance">Balance</div>
                <div class="clear"></div>
              </div>
              <!--START: GIFTCERTS_DETAILS_ITEMS-->
              <div class="total_giftcerts-details-items">
                <div class="giftcerts-name">[certificate_name]</div>
                <div class="giftcerts-amount">[discount_amount]</div>
                <div class="giftcerts-balance">[discount_balance]</div>
                <div class="button"><a href="javascript:removeCoupon('[id]');" class="icon-btn icon-btn-close">Remove</a></div>
                <div class="clear"></div>
              </div>
              <!--START: GIFTCERTS_DETAILS_ITEMS--> 
            </div>
            <!--END: GIFTCERTS-->
              <div id="divBalance">
          <div class="total_cart-balance">[shoppingcart_balance]</div>
          <div id="balancePrice">[BALANCE]</div>
          <div class="clear"></div>
        </div>
            <!--START: apply_coupon-->
            <div id="divApplyCoupon">
              <div class="coupon-header">[viewcart_coupon-header]</div>
              <div class="coupon-field">
                <input id="coupon" onchange="clearContent(this);" maxlength="30" size="15" value="" name="coupon_code" class="txtBoxStyle" />
                <input type="button" onclick="applyCoupon(this.form.coupon_code.value);" value="Apply" class="btn" onmouseover="this.className='btn_over'" onmouseout="this.className='btn'" />
              </div>
              <div class="clear"></div>
              <div class="coupon-message">[viewcart_coupon-message]</div>
              <div name="divInvalidCoupon" id="divInvalidCoupon" style="display:[invalidCouponDisplay]; color:#F00;">[viewcart_coupon-invalid]</div>
              <div class="coupon-applied">[divCouponApplied]</div>
            </div>
            <div class="clear"></div>
            <!--END: apply_coupon--> 
            <!--END: total_template--> 
          </div>
        </div>
      </div>
      <div class="clear"></div>

出现以下错误

    ppxo_unhandled_error {stack: "Error: TypeError: Cannot read property 'textConten…://www.paypalobjects.com/api/checkout.js:3080:13)", errtype: "[object Error]", timestamp: 1516799614450, windowID: "f18cf37d7c", pageID: "2f88e8f682", …}
And this

types.js:119 Uncaught Error: TypeError: Cannot read property 'textContent' of null

当我在谷歌控制台中执行以下操作时，我得到了

var a = document.getElementById("balancePrice");
var b = a.textContent;
console.log(b)

结果

$5.64
undefined

Answer 1

用 html 代码更新。总输出来自变量 [BALANCE]，当我使用它时据说它是未定义的

我猜这意味着打电话

//[...]
amount: { total: '[BALANCE]', currency: 'USD' }
//[...]

没用。

---

尝试以下方法：

 var $total = document.querySelector("#balancePrice");     
 var total = $total.textContent.replace(/[^\d.-]/g, "");

 paypal.Button.render({

    env: 'production', // Or 'sandbox'

    client: {
          sandbox:    'test',
            production: 'test'
    },

    commit: true, // Show a 'Pay Now' button

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

    onAuthorize: function(data, actions) {
        return actions.payment.execute().then(function(payment) {

            // The payment is complete!
            // You can now show a confirmation message to the customer
        });
    }

}, '#paypal-button');

我确实在上面的变量中获取了总值，所以我不必在payment() 函数中编写一长行代码。