I know there is the Stripe checkout button that is in the example docs but I would like more control over how things look and work.
I guess this is where it's over to me to look at the Stripe docs:
It's difficult to work out what exactly is required in order to send all the details Stripe requires and then process the response giving Craft Commerce everything it needs. Then send the user to an order complete screen.
I have the custom button sort of working using:
<form method="POST">
<input type="hidden" name="action" value="commerce/cart/updateCart">
<button id="paymentButton" class="button is-primary">Purchase</button>
<script>
var handler = StripeCheckout.configure({
key: '{{ cart.paymentMethod.settings.publishableKey ?? '' }}',
image: '/assets/img/tfa-logo-128.png',
locale: 'auto',
token: function(token) {
// You can access the token ID with `token.id`.
// Get the token ID to your server-side code for use.
}
});
document.getElementById('paymentButton').addEventListener('click', function(evt) {
// Open Checkout with further options:
handler.open({
name: '{{ siteName }}',
email: '{{ cart.email }}',
currency: '{{ cart.paymentCurrency }}',
description: 'Membership',
zipCode: true,
amount: {{ cart.totalPrice|commerceCurrency(cart.paymentCurrency,convert=true,format=false) * 100 }}
});
evt.preventDefault();
});
// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
handler.close();
});
</script>
</form>
This looks to work but doesn't send a charge to Stripe or save in the commerce plugin (it just sits as an active cart). I guess this is down to the token not being set but how do you do that?