Forum

Thread tagged as: Question, Shop

Stripe Checkout Custom Integration

Hi! Has anyone attempted a custom integration with "Stripe Checkout" ?

I like the "Stripe Checkout" modal but I'm not satisfied with the blue button and styling.

I'm wondering if there is anything to note before attempting this customization, as it relates to Perch..? It was SO easy to plug Stripe into Perch--I'd hate to have to double back on the amazing work that Perch is already doing for us. Do we know of a straightforward way to customize the look of the Checkout modal?

Thank you!

Olympia Kyriakides

Olympia Kyriakides 1 points

  • 5 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

I'm not aware of anyone doing so yet, but people only speak to me when they have problems.

There's an amount of customisation you can do of the Stripe modal via the options in the form that opens it. That form is a template in Shop which you can update.

templates/shop/gateways/stripe_payment_form.html

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>
Drew McLellan

Drew McLellan 2638 points
Perch Support

Do you get the Stripe token back?

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...

Drew McLellan

Drew McLellan 2638 points
Perch Support

The server side portion is there - you pass that token in to perch_shop_checkout().

You need to pass the token back to the server, though:

token: function(token) {
      // You can access the token ID with `token.id`.
      // Get the token ID to your server-side code for use.
    }

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>