ajax post and get coldfusion file. Get is failing after setting a value

I am trying to write a stripe checkout component on my site. This uses a 'pay what you like' option so I need a way to send data for the total value via ajax.

const url = '/shop/api/test.cfm';
const sendCheckoutData = () => {
    const data = {};
    data.total = $('.total').val() * 100;
    console.log(data);
    if(!isNaN(data.total)) {
        $.ajax({
            url,
            type: 'POST',
            data: JSON.stringify(data),
            contentType: 'application/json',
            success(data) {
                console.log('checkoutData sent');
                returnCheckoutData();
            },
            error(status) {
                console.log('checkoutData not sent', status.statusText);
            }
        });
    }
}
const returnCheckoutData = () => {
    $.ajax({
        url,
        type: 'GET',
        contentType: 'application/json',
        success(data) {
            console.log('checkoutData returned');
        },
        error(status) {
            console.log('checkoutData not returned', status.statusText);
        }
    });
}

And in my cfm file I have the following:

<cfset requestBody = toString( getHttpRequestData().content ) />
<!--- Double-check to make sure it's a JSON value. --->
<cfif isJSON( requestBody )>
    <cfset VARIABLES.checkoutData = deserializeJSON( requestBody )>
</cfif>

<cfscript>
    secretKey = "MY_SECRET_KEY";
    crlf = chr(13)&chr(10);
    headers = "Content-Type: application/x-www-form-urlencoded"&crlf;
    headers &= "Authorization: Bearer "&secretKey&crlf;
    body = "success_url="&URLEncodedFormat("https://slackwise.org.uk/shop/checkout/complete.cfm")
                &"&cancel_url="&URLEncodedFormat("https://slackwise.org.uk/shop/checkout/fail.cfm")
                &"&payment_method_types[]=card"
                &"&line_items[0][amount]=#VARIABLES.checkoutData.total#"
                &"&line_items[0][currency]=gbp"
                &"&line_items[0][quantity]=1"
                &"&line_items[0][name]=widget";
</cfscript>

<cfx_http5 out="http5" method="post" url="https://api.stripe.com/v1/checkout/sessions" headers="#headers#" body="#body#" ssl="5">

<cfdump var="#deserializeJSON(http5)#">

On the post request it looks as though VARIABLES.checkoutData is being set to the correct amount and it is being passed to the &line_items[0][amount] in the body. On ajax post success I want to do a get request to return the new values and generate a stripe token, and this is failing.

I get the following debug

Message: Element CHECKOUTDATA.TOTAL is undefined in VARIABLES.

I am not sure if the var is being reset.

I've also tried creating a cfc and wrapping my requestBody function inside the component, as well as the whole function (with the cfx_http5 call).

I am not 100% sure if the contentType is correct for the get request, what is the default contentType for a cfm file? I've tried removing it, and setting it to multipart/form-data, but possibly my approach is incorrect.

Any help much appreciated.

EDIT

Post request cfdump

struct
allow_promotion_codes   null
amount_subtotal 2400
amount_total    2400
billing_address_collection  null
cancel_url  https://slackwise.org.uk/shop/checkout/fail.cfm
client_reference_id null
currency    gbp
customer    null
customer_email  null
display_items   
array
1   
struct
amount  2400
currency    gbp
custom  
struct
description null
images  null
name    widget
quantity    1
type    custom
id  cs_test_removed
livemode    NO
locale  null
metadata    
struct [empty]
mode    payment
object  checkout.session
payment_intent  pi_1HSjSJIMlFPwHnRlo3DnfC0N
payment_method_types    
array
1   card
payment_status  unpaid
setup_intent    null
shipping    null
shipping_address_collection null
submit_type null
subscription    null
success_url https://slackwise.org.uk/shop/checkout/complete.cfm
total_details   
struct
amount_discount 0
amount_tax  0