https://solidus.io logo
Join Slack
Powered by
Hi everyone, Can anyone tell me how to get the pay...
# support
s
Hi everyone, Can anyone tell me how to get the payment infos form with solidus_stripe ? I’m stuck with “Loading” under the stripe button. 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. Here is my gemfile : source ‘https://rubygems.org’ git_source(:github) { |repo| “https://github.com/#{repo}.git” } ruby ‘3.0.2’ # Bundle edge Rails instead: gem ‘rails’, github: ‘rails/rails’, branch: ‘main’ gem ‘rails’, ‘~> 7.0.6’ # Use sqlite3 as the database for Active Record gem ‘sqlite3’, ‘~> 1.4’ # Use Puma as the app server gem ‘puma’, ‘~> 5.0’ # Use SCSS for stylesheets gem ‘sass-rails’, ‘>= 6’ # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder gem ‘jbuilder’, ‘~> 2.7’ gem ‘pg’ gem “dotenv-rails” # gem ‘newrelic_rpm’ gem ‘image_processing’, ‘~> 1.2’ gem ‘cloudinary’ gem ‘activestorage-cloudinary-service’ gem “solidus_core”, “~> 3.4" gem “solidus_backend”, “~> 3.4" gem “solidus_api”, “~> 3.4" gem “solidus_sample”, “~> 3.4" gem ‘canonical-rails’ gem ‘solidus_support’, ‘~> 0.8’ gem ‘truncate_html’ gem ‘view_component’, ‘~> 2.46’ gem ‘solidus_auth_devise’ gem ‘solidus_paypal_commerce_platform’ gem ‘stripe’, ‘~> 8.0’ gem “simple_form”, github: “heartcombo/simple_form” # Use Redis adapter to run Action Cable in production # gem ‘redis’, ‘~> 4.0’ # Use Active Model has_secure_password # gem ‘bcrypt’, ‘~> 3.1.7’ # Use Active Storage variant # gem ‘image_processing’, ‘~> 1.2’ # Reduces boot times through caching; required in config/boot.rb gem ‘bootsnap’, ‘>= 1.4.4’, require: false group :development, :test do # Call ‘byebug’ anywhere in the code to stop execution and get a debugger console gem ‘byebug’, platforms: [:mri, :mingw, :x64_mingw] end group :development do # Access an interactive console on exception pages or by calling ‘console’ anywhere in the code. gem ‘web-console’, ‘>= 4.1.0’ # Display performance information such as SQL time and flame graphs for each request in your browser. # Can be configured to work on production as well see: https://github.com/MiniProfiler/rack-mini-profiler/blob/master/README.md gem ‘rack-mini-profiler’, ‘~> 2.0’ gem ‘listen’, ‘~> 3.3’ # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring gem ‘spring’ end group :test do # Adds support for Capybara system testing and selenium driver gem ‘capybara’, ‘>= 3.26’ gem ‘selenium-webdriver’, ‘>= 4.0.0.rc1’ # Easy installation and use of web drivers to run system tests with browsers gem ‘webdrivers’ end # Windows does not include zoneinfo files, so bundle the tzinfo-data gem gem ‘tzinfo-data’, platforms: [:mingw, :mswin, :x64_mingw, :jruby] group :development, :test do gem ‘rspec-rails’ gem ‘apparition’, ‘~> 0.6.0’, github: ‘twalpole/apparition’ gem ‘rails-controller-testing’, ‘~> 1.0.5’ gem ‘rspec-activemodel-mocks’, ‘~> 1.1.0’ gem ‘capybara-screenshot’, ‘~> 1.0’ gem ‘database_cleaner’, ‘~> 1.7’ gem ‘factory_bot’, ‘>= 4.8’ gem ‘factory_bot_rails’ gem ‘ffaker’, ‘~> 2.13’ gem ‘redcarpet’ gem ‘rubocop’, ‘~> 1.0’ gem ‘rubocop-performance’, ‘~> 1.5’ gem ‘rubocop-rails’, ‘~> 2.3’ gem ‘rubocop-rspec’, ‘~> 2.0’ gem ‘yard’ end gem ‘solidus_stripe’, ‘5.0.0.rc.3’
j
You can use three backticks (```) to create code blocks to make your posts easier to read. For longer issues, it might be worth opening the issue on our troubleshooting discussion board.
s
Thank you Jared !
k
Hello, can you post the output of the commands you mentioned, please?
s
Hi Kenny, I don’t have any output, that’s the problem.
That’s where I’m stuck. I think it ’s because I don’t have the fields for the payment infos.
here is my gemfile in a better format (sorry btw):
Copy code
source '<https://rubygems.org>'
git_source(:github) { |repo| "<https://github.com/#{repo}.git>" }

ruby '3.0.2'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails', branch: 'main'
gem 'rails', '~> 7.0.6'
# Use sqlite3 as the database for Active Record
gem 'sqlite3', '~> 1.4'
# Use Puma as the app server
gem 'puma', '~> 5.0'
# Use SCSS for stylesheets
gem 'sass-rails', '>= 6'
# Build JSON APIs with ease. Read more: <https://github.com/rails/jbuilder>
gem 'jbuilder', '~> 2.7'
gem 'pg'
gem "dotenv-rails"
# gem 'newrelic_rpm'
gem 'image_processing', '~> 1.2'
gem 'cloudinary'
gem 'activestorage-cloudinary-service'
gem "solidus_core", "~> 3.4"
gem "solidus_backend", "~> 3.4"
gem "solidus_api", "~> 3.4"
gem "solidus_sample", "~> 3.4"
gem 'canonical-rails'
gem 'solidus_support', '~> 0.8'
gem 'truncate_html'
gem 'view_component', '~> 2.46'
gem 'solidus_auth_devise'
gem 'solidus_paypal_commerce_platform'
gem 'stripe', '~> 8.0'
gem "simple_form", github: "heartcombo/simple_form"

# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Active Storage variant
# gem 'image_processing', '~> 1.2'

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.4', require: false

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console', '>= 4.1.0'
  # Display performance information such as SQL time and flame graphs for each request in your browser.
  # Can be configured to work on production as well see: <https://github.com/MiniProfiler/rack-mini-profiler/blob/master/README.md>
  gem 'rack-mini-profiler', '~> 2.0'
  gem 'listen', '~> 3.3'
  # Spring speeds up development by keeping your application running in the background. Read more: <https://github.com/rails/spring>
  gem 'spring'
end

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 3.26'
  gem 'selenium-webdriver', '>= 4.0.0.rc1'
  # Easy installation and use of web drivers to run system tests with browsers
  gem 'webdrivers'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]


group :development, :test do
  gem 'rspec-rails'
  gem 'apparition', '~> 0.6.0', github: 'twalpole/apparition'
  gem 'rails-controller-testing', '~> 1.0.5'
  gem 'rspec-activemodel-mocks', '~> 1.1.0'
  gem 'capybara-screenshot', '~> 1.0'
  gem 'database_cleaner', '~> 1.7'
  gem 'factory_bot', '>= 4.8'
  gem 'factory_bot_rails'
  gem 'ffaker', '~> 2.13'
  gem 'redcarpet'
  gem 'rubocop', '~> 1.0'
  gem 'rubocop-performance', '~> 1.5'
  gem 'rubocop-rails', '~> 2.3'
  gem 'rubocop-rspec', '~> 2.0'
  gem 'yard'
end
gem 'solidus_stripe', '5.0.0.rc.3'
k
You said you did
When I type “bundle add solidus” and bin/rails g solidus:install or bin/rails g solidus:update, nothing happens.
are you running these commands on a new rails application?
s
No I’m running these commands on an existing app
k
an existing rails app or solidus app?
s
solidus app
k
Ok, to install the starter frontend you can run
Copy code
bin/rails app:template LOCATION=<https://github.com/solidusio/solidus_starter_frontend/raw/v3.4/template.rb>
You can also try to use the latest version with Solidus 3.4 but I’m not sure it works (I’d still try, if doesn’t work you can go back to the other version) with:
Copy code
bin/rails app:template LOCATION=<https://github.com/solidusio/solidus_starter_frontend/raw/v4.1/template.rb>
Once it’s installed you should install solidus_stripe with
Copy code
bundle add solidus_stripe
bin/rails generate solidus_stripe:install
Please see the readme for the full install instructions: https://github.com/solidusio/solidus_stripe
s
Thank you Kenny !
Hi Kenny, Sorry to bother you again with my solidus_stripe problem. I’ve done everything mentioned but the stripe payment elements don’t mount on the interface of checkout/payment. I have this error message: Uncaught TypeError: Failed to resolve module specifier “application”. Relative references must start with eithe” “/”" “”/“, o” “.”/“. I think there might be a problem with the assets which are not compiled correctly.
k
I suspect it’s because on that specific version of Solidus Starter Frontend, there was no stimulus support yet. In fact, I can’t see it in your Gemfile.
The quickest thing you can try is 1. Add the 
stimulus-rails
gem to your Gemfile: 
gem 'stimulus-rails'
2. Run 
./bin/bundle install
. 3. Run 
./bin/rails stimulus:install
Wait before that, you might also want to add 
importmap-rails
, which will make the stimulus installation using importmaps
1. Run 
./bin/bundle add importmap-rails
2. Run 
./bin/rails importmap:install
And be sure your layout has the 
<%= javascript_importmap_tags %>
in the head
s
Hello Kenny, Thank you for your messages. I already had stimulus rails and import rails in my gemfile. I typed everything you mentioned. . i have <%= javascript_importmap_tags %> in the head in application.html.erb file and storefront.html.erb Is there an order for what is inside the head ? Storefront.html.erb
Copy code
<head>
    <meta charset="utf-8">
    <title><%= title %></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <%== meta_data_tags %>
    <%= canonical_tag(current_store.url) %>
    <%= csrf_meta_tags %>
    <%= javascript_importmap_tags %>
    <script src="<https://js.stripe.com/v3/>"></script>
    <%= javascript_include_tag 'solidus_starter_frontend' %>
    <%= stylesheet_link_tag 'solidus_starter_frontend', media: 'screen' %>
    

    <%= favicon_link_tag 'favicon.ico' %>
    <%= yield :head %>
  </head>
application.html.erb
Copy code
<!DOCTYPE html>
<html>
  <head>
    <title>Edb091122</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="preconnect" href="<https://fonts.googleapis.com>">
    <link rel="preconnect" href="<https://fonts.gstatic.com>" crossorigin>
    <link href="<https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200&display=swap>" rel="stylesheet">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <script src="<https://js.stripe.com/v3/>"></script>

    <%= javascript_include_tag '<https://js.stripe.com/v3/>', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_link_tag 'application', media: 'all' %>
    <%= javascript_importmap_tags %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>
k
I suggest to bring these changes to your store: https://github.com/solidusio/solidus_starter_frontend/pull/321
probably the stripe extension’s JS relies on this new payment page structure
s
OK Alberto (sorry for calling you Kenny), I don’t know what to do.
I think I have this page structure already
k
I think you need to debug that error at this point
I suspect it’s some stimulus or importmaps config, it shouldn’t be hard to find what’s wrong using google or stack overflow, but let me know
s
ok thanks
Ok the problem is solved. I just needed to type this command to access the controller. ./bin/importmap pin @stripe/stripe-js.
👍 1
k
Nice! It was probably done on solidus_stripe installation already but you didn’t have importmaps configured at that point
s
I’m a beginner developer, it takes time even for small stuff
Now In order to create a payment element, I must pass a clientSecret or mode when creating the Elements group.
k
Follow the readme to set the env variables and you will find the configuration available in the admin
s
I ’ve my stripe ENV variables in a .env file and I can see my stripe publishable key value in the dom
k
I think that’s enough to accept payments
s
I still have this erro message in the console:
Copy code
solidus_stripe_payment_controller:29 Uncaught (in promise) IntegrationError: In order to create a payment element, you must pass a clientSecret or mode when creating the Elements group.
k
s
Yes I did but it doesn’t work. I still have the error message saying that I need to pass a clientSecret
Hello Alberto btw
👋 1
k
Can you post the html of the payment page please?
I’m particularly interested in how this piece renders:
Copy code
<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"
>
of course feel free to hide sensitive data
s
Yes Of course ! I just hide the stripe publishable key a liitle bit 🙂
k
reading this, seems like it might be a Stripe misconfiguration between the account and the solidus currency used. Sounds familiar to your use case?
also, how many stripe payment methods do you have in solidus?
s
It’s just that i’ve deleted and created many times the solidus stripe payment mlethod. That’s why you have the id 23
🙂
r
Hey @Sébastien Ternest 👋 After running a quick test, I think that the exception should be related to the non-initialization of the elements on this line: https://github.com/solidusio/solidus_stripe/blob/22034357450e7712e9581b28b9658454a[…]app/javascript/controllers/solidus_stripe_payment_controller.js I receive the same exception if I don’t pass the 
this.optionsValue.elementsInitialization
. This might be tied to the fact that, for some reason, the various options (which at first look seem correctly initialized from the screenshot of the rendering that you shared) don’t arrive at the StimulusJS controller. The next step could be setting a debugger before that line to verify if this is the case. (Another minor observation is that your 
pk_test_
key appears to be longer compared to the working one I’m using. However, this could be related to this, so consider this as a potential issue rather than a definitive one - I can’t say for certain)
s
Hello Rainer, thank you very much ! Sorry for replying so late ! You have lead me to the good path. Now I get the stripe elements mounted. But now, I have another problem 🙂 I’m stuck at “checkout/confirm”. I’ve made a payment test following the guidelines (https://stripe.com/docs/testing), but the payment_type is said to be nil. As a matter of fact, the payment form doesn’t have the payment_method(e.g. “card” or “google pay” like here https://stripe.com/docs/payments/payment-element).
Copy code
<%
  stripe_payment_method= payment.source.stripe_payment_method
  # stripe_payment_method = payment.source.payment_method

  # <https://stripe.com/docs/api/payment_methods/object#payment_method_object-type>
  partial_base = "checkouts/existing_payment/stripe"
  payment_type = stripe_payment_method.type

  # Fallback on the default partial if a specialized partial is not available.
  payment_type = 'default' if lookup_context.find_all("#{partial_base}/_#{payment_type}").none?
%>

<%= render(
  "#{partial_base}/#{payment_type}",
  stripe_payment_method: stripe_payment_method,
  partial_base: partial_base,
  payment_type: payment_type
) %>

<% if current_order&.confirm? %>
  <% stripe_intent =
    SolidusStripe::PaymentIntent.prepare_for_payment(payment).stripe_intent %>

  <input
    type="hidden"
    data-controller="solidus-stripe-confirm"
    data-solidus-stripe-confirm-publishable-key-value="<%= payment.payment_method.preferred_publishable_key %>"
    data-solidus-stripe-confirm-client-secret-value="<%= stripe_intent.client_secret %>"
    data-solidus-stripe-confirm-return-url-value="<%= solidus_stripe.after_confirmation_url(payment.payment_method.slug) %>"
    data-solidus-stripe-confirm-error-base-url-value="<%= solidus_stripe.after_confirmation_url(payment.payment_method.slug, payment_intent: stripe_intent.id) %>"
    data-action="submit@window->solidus-stripe-confirm#confirm"
  >
<% end %>
r
You have lead me to the good path. Now I get the stripe elements mounted.
I’m glad to hear that! 🙌 About the mentioned problem, as you can see your 
stripe_payment_method
is a string for some reason 🤔 Have you debugged this line to find out more details?
Copy code
stripe_payment_method = payment.source.stripe_payment_method
Particularly, if 
payment.source
is present and is a 
SolidusStripe::PaymentSource
, it’s unusual that 
stripe_payment_method
returns a string. The method responsible for extracting the stripe payment method from the source is the following: https://github.com/solidusio/solidus_stripe/blob/22034357450e7712e9581b28b9658454a80175b6/app/models/solidus_stripe/payment_source.rb#L7-L13 Unless it’s been modified, you might want to check if your source has a 
stripe_payment_method_id
with:
Copy code
payment.source.stripe_payment_method_id
And if it does, you can try to extract the stripe payment method in the same way it is done in the method I mentioned but starting from the payment:
Copy code
payment.payment_method.gateway.request do
  Stripe::PaymentMethod.retrieve(payment.source.stripe_payment_method_id)
end
From the results of these operations, we could try to figure out why this problem is occurring 🤞
s
Hello Rainer, Thank you so much for your help ! When I leave it like this
Copy code
stripe_payment_method = payment.source.stripe_payment_method
it returns nil
Copy code
>> stripe_payment_method
=> nil
when I modify with this
Copy code
stripe_payment_method = payment.source.stripe_payment_method_id
it returns ” ” I don’t know why
Copy code
>> payment.source.stripe_payment_method_id
=> ""
This what my console looks like when I type “payment”
> payment
Copy code
=> #<Spree::Payment id: 22, amount: 0.1e1, order_id: 14, source_type: "SolidusStripe::PaymentSource", source_id: 13, payment_method_id: 16, state: "processing", response_code: nil, avs_response: nil, created_at: "2023-07-18 14:01:59.069126000 +0000", updated_at: "2023-07-18 14:02:03.752910000 +0000", number: "QQ9FXZ9X", cvv_response_code: nil, cvv_response_message: nil>
Do you have any idea what the problem is ? Thank you
r
Hey Sébastien, apologies for the delayed response 🙏 Based on what you’ve shared, it seems like there’s still an issue with the payment step. If the stripe payment form displays properly, you can enter card details and continue to the next step, I’d expect to see the 
stripe_payment_method_id
(needed to retrieve the payment from Stripe). Check if: • You have this section in your `app/views/checkouts/payment/_stripe.html.erb`: https://github.com/solidusio/solidus_stripe/blob/90894c8d74d14e42907493ea9ee249d75[…]/install/templates/app/views/checkouts/payment/_stripe.html.erb
Copy code
<input
    type="hidden"
    name="payment_source[<%= payment_method.id %>][stripe_payment_method_id]"
    value=""
    data-solidus-stripe-payment-target="paymentMethodInput"
  >
• This input gets correctly initialized before 
this.paymentMethodInputTarget.form.submit()
in your 
solidus_stripe_payment_controller.js
: https://github.com/solidusio/solidus_stripe/blob/90894c8d74d14e42907493ea9ee249d75[…]app/javascript/controllers/solidus_stripe_payment_controller.js If you spot the “stripe_payment_method_id” and everything appears to be configured correctly, I’d check the logs errors indicating an unpermitted parameter like:
Copy code
Unpermitted parameter: :stripe_payment_method_id
I don’t think so, but just to be sure that the issue isn’t with the parameters. Keep me posted 👍
Open in Slack
PreviousNext
Powered by