How to include the new Stripe Checkout in Rails?

Question

This is the Checkout setup (without connect) that I had before and it worked well:

home/charges/new.html.erb

<%= form_tag charges_path do %>
  <div id="error_explanation">
    <% if flash[:error].present? %>
      <p><%= flash[:error] %></p>
    <% end %>
  </div>

  <script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
   data-key="<%= Rails.configuration.stripe[:publishable_key] %>"
   data-description="bishbashbooked payment"
   data-amount="700"
   data-currency="gbp"
   data-locale="auto">
  </script>
<% end %>

charges_controller.rb

class ChargesController < ApplicationController

 def new
    render 'home/charges/new'
  end

def create
    customer = Stripe::Customer.create(
      :email => params[:stripeEmail],
      :source  => params[:stripeToken]
    )

charge = Stripe::Charge.create(
  :customer    => customer.id,
  :amount      => 700,
  :description => 'bishbashbooked',
  :currency    => 'gbp',
)

rescue Stripe::CardError => e
    flash[:error] = e.message
    redirect_to new_charge_path
  end

end

Firstly, how would I change this to be SCA compliant (with the new Checkout), but also so that the payment is sent to the seller’s connected account? I would like a button on the website that says ‘pay now’, which will then redirect you to the new Stripe Checkout page. Once the payment is successful, I need it to redirect me to a specific URL.

I’ve seen from the docs that I need to include this:

session = Stripe::Checkout::Session.create({
  payment_method_types: ['card'],
  line_items: [{
    name: "Cucumber from Roger's Farm",
    amount: 200,
    currency: 'usd',
    quantity: 10,
  }],
  payment_intent_data: {
    application_fee_amount: 200,
  },
  success_url: 'https://example.com/success',
  cancel_url: 'https://example.com/cancel',
}, {stripe_account:  @group.stripe_user_id })

And this:

// Initialize Stripe.js with the same connected account ID used when creating
// the Checkout Session.
var stripe = Stripe('pk_test_xxxxxxxxxxxxxxxxxxxxxxxx', {
  stripeAccount: <%= @group.stripe_user_id %>
});

stripe.redirectToCheckout({
  // Make the id field from the Checkout Session creation API response
  // available to this file, so you can provide it as parameter here
  // instead of the {{CHECKOUT_SESSION_ID}} placeholder.
  sessionId: <%= session.id %>
}).then(function (result) {
  // If `redirectToCheckout` fails due to a browser or network
  // error, display the localized error message to your customer
  // using `result.error.message`.
});

Those two bits of code seem to be all I need. However, I firstly do not know where to put this code and secondly how to get it working as I need it to. Where is the ‘pay now’ button? How are customers directed to Stripe using this?

I know this may be classed as a vague question but I am really stuck with this. I’d appreciate any help with this as I’ve been trying to figure this out for about a week now with no success.

Thanks, and please let me know if you need any more info.

Answer 1

For building a Checkout flow in Rails there are quite a few approaches that will work. Here's one way that I would do it:

1. Create the products that you're selling in your DB
2. Have a button for each product that you'd like to sell or collect products into a basket or similar
3. Create a CheckoutController that will receive product ids or the basket with product ids
4. In your CheckoutContoller, (name the action as you see fit), create a Stripe CheckoutSession [0]
5. For each product add it to the CheckoutSession as a line item [1]
6. Have an erb view which receives the id of the Checkout Session and redirects the user to Stripe Checkout [2]
7. Using the redirection URL, then go back to your site and display some sort of success message [3].
8. Handle any post-payment actions / best practices

[0] https://stripe.com/docs/payments/checkout/one-time#create-checkout-session [1] https://stripe.com/docs/api/checkout/sessions/create#create_checkout_session-line_items [2] https://stripe.com/docs/payments/checkout/one-time#redirect-checkout [3] https://stripe.com/docs/payments/checkout/fulfillment

Hope this helps!