LWC中Stripe.createPaymentMethod无响应，无法生成支付方式ID

问题描述 #

在Salesforce的LWC组件中，通过renderedCallback钩子从静态资源加载Stripe JS并挂载Card Element后，调用tsCreateCardOnStripe方法中的stripe.createPaymentMethod无效果，无法生成预期的支付方式ID，且相关console.log无输出。

加载Stripe JS的代码 #

async renderedCallback() {
  if (this.stripeJsLoaded) {
    return;
  }

  this.stripeJsLoaded = true;

  await Promise.all([loadScript(this, StripeJS)]);
  this.stripe = Stripe("pk......");

  this.stripeElements = this.stripe.elements();

  var style = {
    base: {
      color: "#32325d",
      fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
      fontSmoothing: "antialiased",
      fontSize: "16px",
      "::placeholder": {
        color: "#aab7c4"
      }
    },
    invalid: {
      color: "#fa755a",
      iconColor: "#fa755a"
    }
  };

  const cardElementContainer = this.template.querySelector('.card-element');
  if (cardElementContainer) {
    this.cardElement = this.stripeElements.create('card', { style: style, hidePostalCode: true });
    this.cardElement.mount(cardElementContainer);
  } else {
    console.error('Element with class "card-element" not found in the template.');
  }
}

创建支付方式的代码 #

async tsCreateCardOnStripe() {
  if (this.isStripeCardFound) {
    this.stripeDataCardId = this.paymentMethod.Stripe_Id__c;
    if (this.oneTimePay || this.defaultPay) {
      this.tsCreatePaymentOnStripe();
    } else if (this.subscriptionPay) {
      this.tsCreateProductsOnStripe();
    }
  } else {
    const billingDetails = {
      name: 'Jenny Rosen',
    };

    const payload = await this.stripe.createPaymentMethod({
      type: "card",
      card: this.stripeElements.getElement('card'),
      billing_details: billingDetails
    });

    console.log('payload : ' + JSON.stringify(payload));
  }
}

问题原因与解决方案 #

1. 未进入创建支付方式的分支 #

先确认isStripeCardFound的取值是否符合预期。如果该值错误为true，代码会直接跳过else分支，自然不会执行console.log。

• 解决：在else分支开头添加console.log('进入创建支付方式分支')，确认是否进入该逻辑；同时检查isStripeCardFound的赋值逻辑，确保无已绑定卡片时该值为false。

2. Stripe或Card Element未正确初始化 #

LWC中如果未将stripe、stripeElements、cardElement声明为响应式属性，可能导致这些属性在组件方法中无法获取最新值，调用stripe.createPaymentMethod时会因实例为undefined静默失败。

• 解决：在组件类中添加响应式属性声明：

  import { LightningElement, track } from 'lwc';
  
  export default class YourComponentName extends LightningElement {
    @track stripe;
    @track stripeElements;
    @track stripeJsLoaded = false;
    @track cardElement;
    // 其他属性...
  }
  

3. Card Element获取方式错误 #

代码中用this.stripeElements.getElement('card')获取卡片实例，但之前已将创建好的实例保存到this.cardElement中。如果getElement('card')返回null，Stripe方法会静默失败。

• 解决：直接使用已保存的this.cardElement作为参数：

  const payload = await this.stripe.createPaymentMethod({
    type: "card",
    card: this.cardElement,
    billing_details: billingDetails
  });
  

4. 未捕获异步错误 #

tsCreateCardOnStripe是异步函数，但未添加try/catch块，一旦stripe.createPaymentMethod抛出错误（如网络问题、密钥错误、卡片信息无效），函数会静默终止，不会执行后续console.log。

• 解决：添加错误捕获逻辑，打印错误信息：

  async tsCreateCardOnStripe() {
    try {
      if (this.isStripeCardFound) {
        this.stripeDataCardId = this.paymentMethod.Stripe_Id__c;
        if (this.oneTimePay || this.defaultPay) {
          this.tsCreatePaymentOnStripe();
        } else if (this.subscriptionPay) {
          this.tsCreateProductsOnStripe();
        }
      } else {
        console.log('进入创建支付方式分支');
        const billingDetails = {
          name: 'Jenny Rosen',
        };
  
        if (!this.stripe || !this.cardElement) {
          console.error('Stripe或Card Element未初始化');
          return;
        }
  
        const payload = await this.stripe.createPaymentMethod({
          type: "card",
          card: this.cardElement,
          billing_details: billingDetails
        });
  
        console.log('payload : ', payload); // 使用逗号避免JSON.stringify可能的报错
      }
    } catch (error) {
      console.error('创建支付方式失败:', error);
    }
  }
  

5. Stripe密钥或环境不匹配 #

确保使用的Stripe公钥（pk......）与当前环境匹配（测试环境用测试密钥，生产环境用生产密钥），密钥错误会导致API调用失败。

内容的提问来源于stack exchange，提问作者isara didulantha