Solidus stripe payment infos still loading

[sebT-max]

Hello everyone,
I'm attempting to use solidus_stripe with the solidus_starter_frontend. When I get to the payment step it just says "loading..." under payment information. I can click save and continue and place order but it ends with the error: NoMethodError (undefined method type' for nil:NilClass

def transition_forward
  if @order.can_complete?
    @order.complete
  else
    @order.next
  end

Which I assume is because I wasn't able to enter payment infos.

Did anyone have the same problem ? I know I need to use the starter_frontend v3.4, but I can’t install it. When I type bundle add solidus and bin/rails g solidus:install or bin/rails g solidus:update, nothing happens.

Any tips how to upgrade the starter frontend to 3.4 ?

THANK YOU VERY MUCH

[jarednorman]

I don't have the answer to your question, but I did update the formatting of your question to make it clearer as some of the code was cut off due to misformatted markdown. I didn't change any words, just the formatting. I hope that's alright. 🙂

[sebT-max]

Thanks Jared, it's clearer !

[sebT-max]

At the bottom of _stripe.html.erb, it s mentioned that " Elements will create form elements here "But there is no form element:

  bill_address = current_order.bill_address
  options = {
    elementsInitialization: {
      mode: 'payment',
      amount: SolidusStripe::MoneyToStripeAmountConverter.to_stripe_amount(
        current_order.display_order_total_after_store_credit.money.fractional,
        current_order.currency,
      ),
      currency: current_order.currency.downcase,
      paymentMethodCreation: 'manual',
      captureMethod: payment_method.auto_capture? ? 'automatic' : 'manual',

      # If you want to allow the display/use of specific payment method types
      # activated from the Stripe Dashboard, you can use this option.
      #
      # For a complete list of payment method types available on Stripe:
      # https://stripe.com/docs/payments/payment-methods/overview
      # https://stripe.com/docs/api/payment_methods/object#payment_method_object-type
      #
      # To activate/deactivate Stripe payment methods:
      # https://dashboard.stripe.com/settings/payment_methods
      # paymentMethodTypes: ['card', 'sepa_debit'],

      # Fully customizable with appearance API.
      # https://stripe.com/docs/elements/appearance-api
      # appearance: {},
    },
    paymentElementCreation: {
      layout: "tabs",
      defaultValues: {
        billingDetails: {
          name: bill_address.name,
          email: current_order.email,
          phone: bill_address.phone,
          address: {
            line1: bill_address.address1,
            line2: bill_address.address2,
            city: bill_address.city,
            state: bill_address.state.abbr,
            country: bill_address.country.iso,
            postal_code: bill_address.zipcode,
          },
        },
      },
    },
  }
 %>

<div class="solidus-stripe-payment"
  data-controller="solidus-stripe-payment"
  data-solidus-stripe-payment-publishable-key-value="<%= payment_method.preferred_publishable_key %>"
  data-solidus-stripe-payment-options-value="<%= options.to_json %>"
  data-solidus-stripe-payment-radio-selector-value="#order_payments_attributes__payment_method_id_<%= payment_method.id %>"
  data-solidus-stripe-payment-submit-selector-value="#checkout_form_payment [type='submit']"
  data-action="submit@window->solidus-stripe-payment#handleSubmit"
>
  <input
    type="hidden"
    name="payment_source[<%= payment_method.id %>][stripe_payment_method_id]"
    value=""
    data-solidus-stripe-payment-target="paymentMethodInput"
  >

  <div data-solidus-stripe-payment-target="paymentElement">
    <!-- Elements will create form elements here -->
    <em><%= t('solidus_stripe.loading') %></em>
  </div>

  <div data-solidus-stripe-payment-target="message">
    <!-- Display error/notification messages to your customers here -->
  </div>
</div>

[rainerdema]

Hey @sebT-max ,
The form you're searching for is generated through Stripe Payment Elements, part of prebuilt UI components in Stripe.js for building a web checkout flow in Stripe.

You can check this process in the following resources:

• Stripe Payments Documentation
• Solidus Stripe Payment Controller in our codebase

The persistent "Loading" display could indicate some configuration issues.
To debug the problem, we suggest you open your dev console in your browser when you're on the payment page to monitor any errors returned by Stripe.js.

As an example, you can look at this issue where another user successfully debugged a similar problem via the Google Chrome console: solidusio/solidus_stripe#307

Let me know if you see any client exceptions so we can better investigate what could be the problem in your case.

[sebT-max]

Hey ! Thank you very much !
It's just that I don't know how to inject the elements in the div in my stripe file (app/views/checkouts/payment/_stripe.html.erb).

I ve followed these instructions here: https://github.com/stripe-samples/accept-a-payment/blob/main/payment-element/README.md. Now I have another part created besides my app with a client and a server folder.
In my client folder,(accept-a-payment/client/index.html) I have more or less the same form as in (app/views/checkouts/payment/_stripe.html.erb).

Do I need to keep the accept-a-payment folder besides my app ?

[rainerdema]

Can you send me the screenshot of your browser dev console in the payment step?

[sebT-max]

[sebT-max]

I think there might be a problem with the compilation of assets