Using the custom styled Stripe button with Craft Commerce

Question

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:

• Styled Custom Button

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?

Answer 1

Here is my working solution, basically all you need to do is grab the token from stripe and then submit it with the form.

<script src="https://checkout.stripe.com/checkout.js"></script>

<form method="POST" id="payment-form">
  <input type="hidden" name="action" value="commerce/payments/pay">
  <input type="hidden" name="cancelUrl" value="/checkout/payment">
  <input type="hidden" name="redirect" value="/orders/order?number={number}">
  <input type="hidden" name="token" id="stripe-token" value="">
  {{ getCsrfInput() }}

  <button id="paymentButton" class="button is-primary">
      <span class="icon">
        <i class="fa fa-check" aria-hidden="true"></i>
      </span>
      <span>
        Purchase
      </span>
  </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`.
        var stripeToken = token.id;
        // Get the token ID to your server-side code for use.
        document.getElementById('stripe-token').value = stripeToken;
        document.getElementById('payment-form').submit();
      }
    });

    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>