Stripe Checkout Custom Integration

Thank you Drew! I'll see what I can accomplish in the template...and let you know if I run into anything interesting.

Hi Drew,

I've not been able to style the checkout button with CSS.

I went ahead and tried the "custom integration" of Stripe Checkout (apparently this allows me to customize the button but not the pop-up payment form. [https://stripe.com/docs/checkout#integration-custom]

I passed some Perch template tags into the form and they come through fine but I can't get the payment to process. Am I missing something as far as the tokens are concerned? I have everything set up per the Docs and the default stripe_paymet_form.html processes payments no problem.

This is my new stripe_paymet_form.html (basically copied over from Stipe), but it's not processing the payments. Apologies if this is not in scope--I can direct the question at Stripe.

<form action="" method="post">
<script src="https://checkout.stripe.com/checkout.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<button id="customButton">Purchase</button>

<script>
  var handler = StripeCheckout.configure({
    key: '<perch:shop id="publishable_key" escape="true" />',
    image: '/images/OMlogo282.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.
    }
  });

  $('#customButton').on('click', function(e) {
    // Open Checkout with further options:
    handler.open({

      email: '<perch:member id="email" escape="true" />',
      zipCode: true,
      amount: '<perch:shop id="amount" escape="true" class="alt-font" />',

    });
    e.preventDefault();
  });

  // Close Checkout on page navigation:
  $(window).on('popstate', function() {
    handler.close();
  });
</script>
</form>

No I don't think so. From the Stripe docs:

Custom: The custom integration lets you create a custom button and passes a Stripe token to a JavaScript callback. Your JavaScript callback will need to send the token to your server for use.

I thought maybe the server side portion was already contained in Perch. I'm not sure how or where to link up with Perch to get the token back in this case...

Thank you Drew--all set!

These both work nicely when replacing the existing stripe_payment_form.html.

For custom button leading to Stripe pop-up payment modal:

<script src="https://checkout.stripe.com/checkout.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<form id="paymentForm" action="" method="POST">
    <input type="hidden" id="stripeToken" name="stripeToken" />
    <input type="hidden" id="stripeEmail" name="stripeEmail" />
    <button id="customButton" class="button btn-black tiny full-width alt-font uppercase size-12 strong">Purchase</button>
</form>

<script>
var handler = StripeCheckout.configure({
    key: '<perch:shop id="publishable_key" escape="true" />',
    image: '/images/image.png',
    locale: 'auto',
    token: function (token) {
        // Use the token to create the charge with a server-side script.
        // You can access the token ID with `token.id`
        $("#stripeToken").val(token.id);
        $("#stripeEmail").val(token.email);
        $("#myForm").submit();
    }
});

$('#customButton').on('click', function (e) {
    // Open Checkout with further options
    handler.open({
        name: '',
        description: '',
        amount: "<perch:shop id="amount" escape="true" />",
        email: "<perch:member id="email" escape="true" />",
        zipCode: "true"
    });
    e.preventDefault();
});

// Close Checkout on page navigation
$(window).on('popstate', function () {
    handler.close();
});
</script>

For fully custom imbedded form (still need to add jquery.payments library for credit card friendly form):

<form action="" method="POST" id="payment-form">
  <span class="payment-errors"></span>

  <div class="form-row">
    <label>
      <span>Card Number</span>
      <input type="text" size="20" data-stripe="number">
    </label>
  </div>

  <div class="form-row">
    <label>
      <span>Expiration (MM/YY)</span>
      <input type="text" size="2" data-stripe="exp_month">
    </label>
    <span> / </span>
    <input type="text" size="2" data-stripe="exp_year">
  </div>

  <div class="form-row">
    <label>
      <span>CVC</span>
      <input type="text" size="4" data-stripe="cvc">
    </label>
  </div>

  <div class="form-row">
    <label>
      <span>Billing Zip</span>
      <input type="text" size="6" data-stripe="address_zip">
    </label>
  </div>

  <input type="submit" class="submit" value="Submit Payment">
 </form> 

 <script type="text/javascript" src="https://js.stripe.com/v2/"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>


 <script type="text/javascript">
  Stripe.setPublishableKey('pk_test_hEuL9gHPcPRgveUtq6tlx70S');
</script>

<script>
$(function() {
  var $form = $('#payment-form');
  $form.submit(function(event) {
    // Disable the submit button to prevent repeated clicks:
    $form.find('.submit').prop('disabled', true);

    // Request a token from Stripe:
    Stripe.card.createToken($form, stripeResponseHandler);

    // Prevent the form from being submitted:
    return false;
  });
});
</script>

<script>
function stripeResponseHandler(status, response) {
  // Grab the form:
  var $form = $('#payment-form');

  if (response.error) { // Problem!

    // Show the errors on the form:
    $form.find('.payment-errors').text(response.error.message);
    $form.find('.submit').prop('disabled', false); // Re-enable submission

  } else { // Token was created!

    // Get the token ID:
    var token = response.id;

    // Insert the token ID into the form so it gets submitted to the server:
    $form.append($('<input type="hidden" name="stripeToken">').val(token));

    // Submit the form:
    $form.get(0).submit();
  }
};
</script>