Laravel Blade页面集成Stripe时card-element元素无法正常显示问题

核心问题：脚本标签用法错误 #

你将Stripe SDK引入和自定义初始化逻辑写在了同一个script标签内，只要script标签设置了src属性，标签内部的JS代码会被浏览器完全忽略，所以你的初始化逻辑根本没有运行，自然不会渲染card元素，这也是控制台无报错的原因。

修复后的脚本写法如下：

<!-- 先单独引入Stripe SDK -->
<script src="https://js.stripe.com/v3/"></script>
<!-- 再单独编写自定义初始化逻辑 -->
<script>
(function(){
    // 创建Stripe客户端
    var stripe = Stripe('{{config('stripe.key')}}');

    // 创建Elements实例
    var elements = stripe.elements();

    // 卡片组件自定义样式
    var style = {
      base: {
        color: '#32325d',
        lineHeight: '18px',
        fontFamily: '"Roboto", "Helvetica Neue", Helvetica, sans-serif',
        fontSmoothing: 'antialiased',
        fontSize: '16px',
        '::placeholder': {
          color: '#aab7c4'
        }
      },
      invalid: {
        color: '#fa755a',
        iconColor: '#fa755a'
      }
    };

    // 创建卡片Element实例
    var card = elements.create('card', {
        style: style,
        hidePostalCode: true
    });

    // 把卡片组件挂载到card-element节点
    card.mount('#card-element');

    // 监听卡片组件实时校验错误
    card.addEventListener('change', function(event) {
      var displayError = document.getElementById('card-errors');
      if (event.error) {
        displayError.textContent = event.error.message;
      } else {
        displayError.textContent = '';
      }
    });

    // 监听表单提交
    var form = document.getElementById('payment-form');
    form.addEventListener('submit', function(event) {
      event.preventDefault();

      // 禁用提交按钮避免重复提交
      document.getElementById('complete-order').disabled = true;

      var options = {
        name: document.getElementById('name_on_card').value,
        address_line1: document.getElementById('address').value,
        address_city: document.getElementById('city').value,
        address_state: document.getElementById('province').value,
        address_zip: document.getElementById('postalcode').value
      }

      stripe.createToken(card, options).then(function(result) {
        if (result.error) {
          // 展示提交错误
          var errorElement = document.getElementById('card-errors');
          errorElement.textContent = result.error.message;
          // 恢复提交按钮可用
          document.getElementById('complete-order').disabled = false;
        } else {
          // 把token传递给服务端
          stripeTokenHandler(result.token);
        }
      });
    });

    function stripeTokenHandler(token) {
      // 把stripe token插入表单提交给服务端
      var form = document.getElementById('payment-form');
      var hiddenInput = document.createElement('input');
      hiddenInput.setAttribute('type', 'hidden');
      hiddenInput.setAttribute('name', 'stripeToken');
      hiddenInput.setAttribute('value', token.id);
      form.appendChild(hiddenInput);
      // 提交表单
      form.submit();
    }
})();
</script>

同步修复的细节问题 #

• 原代码{{config('stripe.key)}}语法错误，右括号位置不对，修正为{{config('stripe.key')}}
• Stripe构造函数参数需要是字符串类型，给配置输出加引号包裹，改为Stripe('{{config('stripe.key')}}')
• 原fontFamily配置里Roboto前缺少双引号，修正为fontFamily: '"Roboto", "Helvetica Neue", Helvetica, sans-serif'

若仍未渲染可排查以下项 #

• 确认#card-element没有被CSS设置为不可见，可手动添加基础样式保证容器可展示：

#card-element {
  border: 1px solid #e0e0e0;
  padding: 12px;
  min-height: 44px;
  border-radius: 4px;
}

• 确认你使用的是Stripe公钥（pk_开头），前端不可使用sk_开头的私钥

内容的提问来源于stack exchange，提问作者Austin Sharp