Stripe checkout.js with coupons

Question

I'm using Stripe's checkout.js because it's so easy to setup and use. Is there a way to add coupons?

<script src="https://checkout.stripe.com/v2/checkout.js"
    class="stripe-button"
    data-key="pk_test_czwzkTp2tactuLOEOqbMTRzG"
    data-amount="2000"
    data-name="Demo Site"
    data-description="2 widgets ($20.00)"
    data-image="/128x128.png">
</script>

Answer 1

Stripe Checkout does not currently support coupons. It's not listed in the documentation, for either the button or the custom integration.

One might wonder if there is some secret feature. However, using undocumented features, especially when it comes to your payment processor is a bad idea. Full stop.

---

This being Stack Overflow - let's keep digging!

Fire up jsfiddle. Paste your code into the html section. Open up developer tools so you can see network requests.

There is a en.json, which is a internationalized strings file. If there is an input for coupons, there ought to be a label saying "Enter Coupon Code" or something similar. There is none. (Sure, there is the possibility that Stripe decided to hard code this particular string, but that seems unlikely).

https://checkout.stripe.com/v3/data/languages/en.json

You can also see that inner.js is used to power the popup. Copy the source into a js beautifier and you find that there is no mention. In fact, you can see the code that parses the options and none of them have to do with coupons.

"lib/optionParser": function(exports, require, module) {     (function() {         var BOOLEAN_OPTIONS, DEFAULTS, STRING_OPTIONS, URL_OPTIONS, extractValue, helpers, toBoolean, _;         _ = require("vendor/lodash");         helpers = require("lib/helpers");         DEFAULTS = {             currency: "usd",             allowRememberMe: true         };         BOOLEAN_OPTIONS = ["billingAddress", "shippingAddress", "notrack", "nostyle", "allowRememberMe", "allowPhoneVerification", "zipCode", "trace", "alipayReusable", "bitcoin"];         STRING_OPTIONS = ["key", "amount", "name", "description", "panelLabel", "currency", "email", "locale", "alipay"];         URL_OPTIONS = ["url", "referrer", "image"]; 

You can see how each of the options here align one to one with the options that available for custom integration, which map to the options for the button (you just need to use hyphens instead of camelcase)

At this point, you can keep digging if you want to convince yourself further, but I'd be reaching out to Stripe Support and making a feature request. Happy digging!

Answer 2

Checkout only creates the token. The coupon is applied to the customer after the token is returned to the server and customer is charged.

stripe.Customer.create(
  source=token,
  plan="basic_monthly",
  email="[email protected]",
  coupon="coupon_ID"
)

Answer 3

Stripe have finally answered our prayers after having discount codes for Stripe checkout/payments on the roadmap for years

Discount codes are now here for Stripe checkout.

See here: https://stripe.com/docs/payments/checkout/discounts

You can also manually create it here: https://dashboard.stripe.com/coupons/create

For customer-facing promo codes, which is probably what we want, check out here: https://stripe.com/docs/billing/subscriptions/discounts/codes

(Technically, coupons are merchant-facing and promo codes are customer-facing)

Answer 4

If you want to pass a coupon code to your back end, you can just add an input field for it within the form. It won't alter the amounts in the pop-up form from stripe however, unless you wanted to get sophisticated and call additional javascript to check the parameters of the entered coupon code and change the stripe script parameters.

You can include any inputs you need within the form tags so long as they are not used by stripe.

<form action="/your-server-side-code" method="POST">
  Coupon Code: <input type="text" name="coupon_code">
  <br>
  <script src="https://checkout.stripe.com/v2/checkout.js" class="stripe-button" data-key="pk_test_czwzkTp2tactuLOEOqbMTRzG" data-amount="2000" data-name="Demo Site" data-description="2 widgets ($20.00)" data-image="/128x128.png">
  </script>
</form>