在Angular中使用Stripe动态公钥遇到问题求助

问题根源 #

你遇到的Cannot read properties of undefined (reading 'elements')错误，是因为Stripe指令的初始化时机早于injectStripe的执行时机：组件构造函数调用injectStripe时，ngxStripeCardGroup指令已经触发ngOnChanges钩子尝试获取Stripe实例，但此时实例还未初始化，导致报错。

解决方案一：应用启动时全局注入公钥（推荐） #

使用Angular的APP_INITIALIZER，在应用所有服务、组件、指令初始化前完成Stripe公钥注入，确保全局可用。

1. 配置AppModule #

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { NgxStripeModule, injectStripe } from 'ngx-stripe';
import { environment } from '../environments/environment';

// 定义Stripe初始化函数
export function initializeStripe() {
  return () => {
    // 注入静态公钥
    injectStripe(environment.stripePublishableKey);
    
    // 如果需要从后端异步获取公钥，可改为：
    // return fetch('/api/get-stripe-key')
    //   .then(res => res.json())
    //   .then(data => injectStripe(data.publishableKey));
  };
}

@NgModule({
  imports: [
    // 其他模块
    NgxStripeModule.forRoot() // 不传入固定公钥
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeStripe,
      multi: true
    }
  ]
})
export class AppModule { }

2. 组件中正常使用指令 #

无需在组件构造函数中额外调用injectStripe，直接使用指令即可：

<div ngxStripeCardGroup class="card-container"></div>

import { Component } from '@angular/core';
import { StripeService } from 'ngx-stripe';

@Component({
  selector: 'app-payment',
  templateUrl: './payment.component.html'
})
export class PaymentComponent {
  constructor(private stripeService: StripeService) {
    // 可正常调用stripeService方法
  }
}

解决方案二：组件级动态注入（多租户/动态切换场景） #

如果需要在组件级别动态切换Stripe公钥，可通过*ngIf控制指令渲染时机，确保injectStripe执行完成后再初始化指令：

组件代码 #

import { Component, OnInit } from '@angular/core';
import { injectStripe } from 'ngx-stripe';
import { environment } from '../../environments/environment';

@Component({
  selector: 'app-dynamic-payment',
  templateUrl: './dynamic-payment.component.html'
})
export class DynamicPaymentComponent implements OnInit {
  isStripeReady = false;

  ngOnInit(): void {
    // 先注入目标公钥
    injectStripe(environment.stripePublishableKey);
    // 标记初始化完成，触发指令渲染
    this.isStripeReady = true;
  }
}

组件模板 #

<!-- 仅在Stripe初始化完成后渲染指令 -->
<div *ngIf="isStripeReady" ngxStripeCardGroup class="card-container"></div>

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