Submit form without page load - Stripe

Kirby 2 Solved ✅
1

I’ve slightly customised the Kirby Stripe SDK to work with Stripe Elements so I have control over the look of the form, it’s working well with a Kirby Route that gets hit through the form’s action when submitted. However, now I want to try to send the POST request without changing/loading a page. Which I presume is best done through AJAX. I have attempted this but I cannot get a 200 response with the JSON. Below I have included snippets of the code, any help as to where i’m going wrong would be greatly appreciated.

index.js

//code snippet
const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
    event.preventDefault();
    const {token, error} = await stripe.createToken(card);
    if (error) {
        const errorElement = document.getElementById('card-errors');
        errorElement.textContent = error.message;
     } else {
        stripeTokenHandler(token);
    }
});

const stripeTokenHandler = (token) => {
const form = document.getElementById('payment-form');
const hiddenInput = document.createElement('input');
const submitButton = document.querySelector('.submit-form');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);

// form.submit();

//new AJAX code
const submitForm = (e) => {
    e.preventDefault();
    const request = new XMLHttpRequest();
    request.open('POST', e.target.action);
    if (e.target.status === 200) {
        console.log('successs:' + e.target.response)
    } else {
       console.log('fail')
    }
};
form.addEventListener('submit', submitForm);

sck.charge.php

  //code snippet
  $POST = filter_var_array($_POST, FILTER_SANITIZE_STRING);

  $name = $POST['name'];
  $email = $POST['email'];
  $token = $POST['stripeToken'];
  $currency = c::get('stripe_currency');
  $amount = s::get('stripeAmount');
  $description = s::get('stripeDescription');

  $customer = \Stripe\Customer::create(array(
    'email' => $email,
    'source' => $token
  ));

  // Charge the user's card:
  $charge = \Stripe\Charge::create(array(
    'amount' => $amount,
    'currency' => $currency,
    'description' => $description,
    'customer' => $customer->id,
    )
  ));

  $charge_json = $charge->__toJSON();

product.php

<form action="<?= $page->url() ?>/charge" method="POST" id="payment-form">
    <input type="text" name="name" class="StripeElement StripeElement--empty" placeholder="First Name">
    <input type="email" name="email" class="StripeElement StripeElement--empty" placeholder="Email Address">
   <div id="card-element">
      <!-- A Stripe Element will be inserted here. -->
   </div>
       <!-- Used to display Element errors. -->
   <div id="card-errors" role="alert"></div>
   <button class="submit-form stripe-button">Pay <?= $symbol ?><?= $page->amount()->html() ?></button>
</form>

config.php

c::set('routes', array(
    array(
        'pattern' => 'products/(:any)/charge',
        'method' => 'POST',
        'action'  => function() {
            stripeCheckout();
        }
    )
));
2

For anyone that is interested, I wasn’t sending .send() the request in my JS.

const form = document.getElementById('payment-form');
    form.addEventListener('submit', async (event) => {
    event.preventDefault();
    const {token, error} = await stripe.createToken(card);
    if (error) {
        const errorElement = document.getElementById('card-errors');
        errorElement.textContent = error.message;
    } else {
        stripeTokenHandler(token, event);
    }
});

const stripeTokenHandler = (token, event) => {
    const form = document.getElementById('payment-form');
    const fields = {};
    form.querySelectorAll('[name]').forEach(function (field) {
        fields[field.name] = field;
    });

    const hiddenInput = document.createElement('input');
    const submitButton = document.querySelector('.submit-form');
    hiddenInput.setAttribute('type', 'hidden');
    hiddenInput.setAttribute('name', 'stripeToken');
    hiddenInput.setAttribute('value', token.id);
    form.appendChild(hiddenInput);
    
    submitForm(event) 
}

const submitForm = (event) => {
    const request = new XMLHttpRequest();
    request.open('POST', event.target.action);
    request.onreadystatechange = () => {
        if(request.readyState == XMLHttpRequest.DONE && request.status == 200) {
            console.log('success!')
        }
    }
    request.send(new FormData(event.target));
};
1 Like