Tee

I'm having a confusing issue with a checkout process I've created for an online shop (Rails 7.2.0, MYSQL database). I'm using the Stripe Gem to process payments. It is working fine but I need to use the card_brand and card_last4 it produces as parameters upon form submission to add to the order record in the database.

The problem I'm having is that I can not access those parameters in the order create action of the orders controller that is handling the checkout process. The strange thing is this code all works in 4 previous shopping carts I've built. The only difference were that those 4 are Rails 6 and this one is Rails 7.

When a user submits and order, it first goes to a stripe function in the orders controller and submits the payment to Stripe. When it's successful, it creates the order in the database:

This is the code that is failing in the controller: Undefined method '[]' for nil:NilClass
@order.card_brand = params[:user][:card_brand]
@order.card_last4 = params[:user][:card_last4]

The Stripe gem uses Stripe Elements to present the CC fields. In order for it to work, I have a shop_stripe.js form that does the work. I'm not a Javascript developer and the code to make this work was provided at some point on github, etc. But it does the job in my 4 other Rails apps but something seems amiss in this one.

There is a section of code that submits the card data that has one line that appears to dictate how the params are submitted.

This is the Javascript that submits the card details:
function addCardField(form, token, field) {
let hiddenInput = document.createElement('input');
hiddenInput.setAttribute('brand', 'hidden');
hiddenInput.setAttribute('name', "user[card_" + field + "]");
hiddenInput.setAttribute('value', token.card[field]);
form.appendChild(hiddenInput);
}

The line below appears to be how the paramters will be submitted:
hiddenInput.setAttribute('name', "user[card_" + field + "]");

I have tried the following changes to this line:
hiddenInput.setAttribute('name', "[user][card_" + field + "]");
hiddenInput.setAttribute('name', "card_" + field +);
hiddenInput.setAttribute('name', "card_" + field);

The parameters are submitted this way:
{"authenticity_token"=>"[FILTERED]", "order"=>{"create_order"=>"1", "user"=>{"card_brand"=>"Visa", "card_last4"=>"4242", "card_exp_month"=>"4", "card_exp_year"=>"2028"}}, "stripeToken"=>"[FILTERED]"}

I'm looking for some ideas and understanding on why this wouldn't be working correctly. I've been working on it for a while so I could be missing something and need another set of eyes.