Wilma-checkout-cors

[buoyant stump]

How are you hitting /create-checkout-session? Is it via a form submit action or an AJAX request (e.g. using fetch)?

If it's the latter, that won't work as the redirect then appears to come from the browser session rather than the server. If you amend your frontend code to use a form instead then it should work. See this example (it uses node on the backend but it's the same principle): https://stripe-tinydemos-checkout-server-redirect.glitch.me/

[glossy stream]

Hey.

<form action="/create-checkout-session" method="POST">
<button type="submit">Checkout</button>
</form>

  def home
    @time = Time.now
  end

  def create_checkout_session
    Stripe.api_key = "secret-key
"

    session = Stripe::Checkout::Session.create({
      line_items: [{
        price_data: {
          currency: 'usd',
          product_data: {
            name: 'KYC services',
          },
          unit_amount: 1000,
        },
        quantity: 1,
      }],
      mode: 'payment',
      # These placeholder URLs will be replaced in a following step.
      success_url: 'https://example.com/success',
      cancel_url: 'https://example.com/cancel'
    })

    redirect_to session.url, status: 303, allow_other_host: true
  end

end```

[buoyant stump]

You might want to edit your message to not have your secret key in there

[glossy stream]

It's the test key 🙂

[buoyant stump]

Doesn't matter, it's still sensitive

[glossy stream]

Done 🙂

Does that give you more info?

require "rails/all"

module Untitled
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 7.0

    Bundler.require(*Rails.groups)

    class Application < Rails::Application
      config.middleware.use Rack::Cors do
        allow do
          origins '*'
          resource %r{/users/\d+.json},
          :headers => ['Origin', 'Accept', 'Content-Type'],
          :methods => [:post, :get]
        end
      end
    end

  end
end```

That's been added to application.rb with the rack-cors gem.

[buoyant stump]

I'm not sure why you're getting that cors error, I'm unfortunately not familiar enough with ruby on rails to know exactly what's going on. As an alternative you could do the redirect from the client by using stripe.js' redirectToCheckout: https://stripe.com/docs/js/checkout/redirect_to_checkout

This person seems to have had the same issue as you, but didn't specify what they did to make it work 😦 https://discuss.rubyonrails.org/t/checkout-stripe-problem/79678

[glossy stream]

Okay, what would the button look like to hit this snippet?

fetch('/create-checkout-session', {
  method: 'POST',
})
.then(function(response) {
  return response.json();
})
.then(function(session) {
  return stripe.redirectToCheckout({ sessionId: session.id });
})
.then(function(result) {
  // If `redirectToCheckout` fails due to a browser or network
  // error, you should display the localized error message to your
  // customer using `error.message`.
  if (result.error) {
    alert(result.error.message);
  }
});```

[buoyant stump]

You'd attach an event listener to the submit button, and on click you'd want to call that snippet. Here's an example: https://glitch.com/edit/#!/stripe-tinydemos-checkout-setup-card?path=src%2Findex.hbs%3A32%3A8

[glossy stream]

Thanks, let me take a stab at that. Will message you back if it doesn't work 🙂

[buoyant stump]

👍 I'm going to archive this thread for now, ask again in the main channel if you need follow up help and they'll reopen the thread

[glossy stream]

Okay

Thanks

[glossy stream]

This was a sore one, but adding data-turbo="false" to the form submit solved it. lol