1

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?

0

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>
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.