CODEWITHSUNDEEP
ruby-on-railsrubystripe-payments
jtlwell
jtlwell

Reputation: 21

Issue with Stripe Checkout and Stimulus Controller in Rails Application

I'm encountering issues with rendering the Stripe Checkout and connecting a Stimulus controller in my Rails application. I've outlined the details below:

Stimulus Controller:

Relevant Code:

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();
  }
}

importmap.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>

Steps Taken:

I've checked the import map configuration and ensured correct paths. Assets have been precompiled after modifying the import map. The javascript_importmap_tags are placed in the head of my layout file.

UPDATE

In the application.js file I console.logged and this did not log anything.

Errors Encountered:

In the browser console, I'm seeing errors like:

Uncaught TypeError: Failed to resolve module specifier "application". Relative references must start with either "/", "./", or "../". Uncaught TypeError: Failed to resolve module specifier "@hotwired/turbo-rails". Relative references must start with either "/", "./", or "../".

Versions:

Rails version: Rails 7.0.8 Turbo version: @hotwired/turbo-rails: 8.0.0-beta.2

The application runs on localhost. I've tried changing Stripe keys to test keys, but the issue persists.

Any insights or suggestions on what might be causing these issues and how to resolve them would be greatly appreciated.

Thank you.

Upvotes: 1

Views: 277

Answers (1)

jtlwell
jtlwell

Reputation: 21

I solved the problem by removing the javascript include tag for application in the head of my application.html.erb, as the <%= javascript_importmap_tags %> handles everything. Then added this line: import { StripeController } from "./stripe_controller"; to my application.js file like so:

app/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 };

and in the stripe controller i changed from this:

export class extends Controller {

to this:

export class StripeController extends Controller {

I also had imports that weren't pinned in my importmap, I have commented them out too like so:

app/javascript/application.js

import "@hotwired/turbo-rails"
import "controllers"
// import "bootstrap"
// import "jquery"
// import "popper.js"

Upvotes: 0

Related Questions