Rails 应用程序中的 Stripe Checkout 和刺激控制器问题

Question

我在 Rails 应用程序中渲染 Stripe Checkout 和连接 Stimulus 控制器时遇到问题。我概述了以下详细信息：

• Stripe Checkout 组件未渲染。
• 与Stripe相关的客户端日志和控制台日志不 显示任何信息。

刺激控制器：

• Stimulus 控制器未正确连接。
• 刺激控制器内的console.log语句没有输出任何内容。

相关代码：

stripe_controller.js

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static values = { publicKey: String, clientSecret: String }
  stripe = Stripe(this.publicKeyValue, { betas: ["embedded_checkout_beta_1"] });

  connect() {
    console.log("Stimulus controller connected");
  }

  async connect() {
    console.log("Connect method is called");
    console.log("Public Key:", this.publicKeyValue);
    console.log("Client Secret:", this.clientSecretValue);

    this.checkout = await this.stripe.initEmbeddedCheckout({
      clientSecret: this.clientSecretValue
    });

    console.log("Checkout Object:", this.checkout);

    this.checkout.mount(this.element);
  }

  disconnect() {
    this.checkout.destroy();
  }
}

导入地图.rb

# Pin npm packages by running ./bin/importmap

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"

show.html.erb

<h1>Checkout Page</h1>
<%# <script type="module" src="/javascript/controllers/stripe_controller.js"></script> %>
<div data-controller="stripe"
  data-stripe-public-key-value="<%= Rails.application.credentials.dig(:stripe, :publishable_key)%>"
  data-stripe-client-secret-value="<%= @session.client_secret %>">
</div>

采取的步骤：

我已经检查了导入映射配置并确保路径正确。 修改导入映射后，资源已预编译。 javascript_importmap_tags 放置在我的布局文件的头部。

---

更新

在 application.js 文件中，我进行了 console.logged，但没有记录任何内容。

---

遇到的错误：

在浏览器控制台中，我看到如下错误：

未捕获的类型错误：无法解析模块说明符“应用程序”。相对引用必须以“/”、“./”或“../”开头。 未捕获的类型错误：无法解析模块说明符“@hotwired/turbo-rails”。相对引用必须以“/”、“./”或“../”开头。

版本：

Rails 版本：Rails 7.0.8 Turbo 版本：@hotwired/turbo-rails：8.0.0-beta.2

应用程序在本地主机上运行。 我尝试将 Stripe 键更改为测试键，但问题仍然存在。

任何关于可能导致这些问题的原因以及如何解决这些问题的见解或建议将不胜感激。

谢谢你。

Answer 1

我通过删除 application.html.erb 头部中应用程序的 javascript include 标签解决了这个问题，因为 <%= javascript_importmap_tags %> 处理了所有事情。然后添加了这一行： 从“./stripe_controller”导入{StripeController}；像这样到我的 application.js 文件：

应用程序/javascript/controllers/application.js

import { Application } from "@hotwired/stimulus";
import { StripeController } from "./stripe_controller";

const application = Application.start();
application.register("stripe", StripeController);
application.debug = false;
window.Stimulus = application;

export { application };

在条纹控制器中我对此进行了更改：

export class extends Controller {

对此：

export class StripeController extends Controller {