Skip to content

Instantly share code, notes, and snippets.

@matthewarkin
Created July 23, 2014 23:52
Show Gist options
  • Save matthewarkin/eef2c7943f496a85c24c to your computer and use it in GitHub Desktop.
Save matthewarkin/eef2c7943f496a85c24c to your computer and use it in GitHub Desktop.
Stripe Add Subscription Modal
<div class="modal" style="opacity: 1; -webkit-transform: none; top: 130px; display: block;"><div class="subscription-add-or-edit-view standard modal-dialog-form-content-view"><div class="modal-inner">
<div class="modal-header">
<h2>Add subscription</h2>
</div>
<div class="modal-sheet-inner">
<div class="modal-content">
<span class="modal-error">
</span>
<div class="content"><div class="subscription-form-view"><div class="create-form">
<form class="form">
<div class="error form_error form_message">
</div>
<div class="container">
<div class="dropdown-container"><div class="placeholder full_field" name="plan"><div class="dropdown-search-field-view form-row plan">
<div class="dropdown-search-widget-view plan">
<a href="#" class="select2-choice field" tabindex="-1" id="s2id_kqi84cvkm0m86w29" style="width: auto;"> <span class="select2-chosen">&nbsp;</span><abbr class="select2-search-choice-close"></abbr> <span class="select2-arrow" role="presentation"><b role="presentation"></b></span></a><input id="kqi84cvkm0m86w29" class="field select2-offscreen" type="hidden" name="plan" placeholder="Choose a plan..." tabindex="-1" title="">
</div>
<span class="tooltip_placeholder"></span>
<span id="plan_error" class="field_error "></span>
<span id="plan_success" class="field_success"></span>
</div></div></div>
<!-- Plan list -->
<!-- Loading state -->
<div class="loading" style="display: none;">
Loading plans...
</div>
<!-- Has subscriptions -->
<div class="plans">
<div class="empty hidden">
<p>You have no plans yet. <a class="create_plan">Create one.</a></p>
</div>
</div>
<div class="prorate-option checkbox-field-view form-row" style="display: none;">
<div class="placeholder full_field" name="prorate"><div class="checkbox-field-view form-row prorate"><label class="default-label" for="prorate"><div class="checkbox-widget-view prorate"><input class="edit_mode field" type="checkbox" name="prorate" id="prorate" value="" style="display: none;">
</div>Prorate fee<span class="tooltip_placeholder"></span></label>
<span id="prorate_error" class="field_error "></span>
<span id="prorate_success" class="field_success"></span></div></div>
<div class="prorate-option-explanation">
<em class="prorate-explanation">
Prorating means we'll automatically adjust for the exact time spent on each plan. <a class="arrow" target="_blank" href="https://stripe.com/docs/api#update_subscription">Learn more</a>
</em>
<p class="prorate-forced-off-explanation">
<em>This change keeps your trialing subscription still in trialing mode, so there's nothing to prorate.</em>
</p>
<p class="prorate-forced-on-explanation">
<em>We'll immediately end the old subscription, restart the billing cycle, and credit the customer for unused time on the old subscription when you switch billing intervals (or vice versa) or add a trial period when the subscription wasn't trialing (or vice versa).</em>
</p>
</div>
</div>
</div>
<div class="show-advanced-options-control" style="display: block;"><div class="disclosure-triangle-view open"><a><span></span> More options</a></div></div>
<!-- extra options -->
<div class="container advanced-options" style="display: block;">
<div class="placeholder full_field" name="quantity"><div class="form-field-view form-row quantity"><label for="quantity" class="default-label">Quantity:</label>
<div class="text-widget-view quantity">
<input id="kxp30vd38tmrhpvi" class="field" type="text" name="quantity">
</div>
<span class="tooltip_placeholder"></span>
<span id="quantity_error" class="field_error "></span>
<span id="quantity_success" class="field_success"></span>
</div></div>
<div class="placeholder full_field" name="trial_end"><div class="date-to-timestamp-field-view form-row trial_end"><label for="trial_end" class="default-label">Trial end:</label>
<div class="date-to-timestamp-widget-view trial_end">
<input id="0puqhr4gbpjve7b9" class="field hasDatepicker" type="text" name="trial_end">
</div>
<span class="tooltip_placeholder"></span>
<span id="trial_end_error" class="field_error "></span>
<span id="trial_end_success" class="field_success"></span>
</div></div>
<div class="placeholder full_field" name="coupon"><div class="dropdown-search-field-view form-row coupon"><label for="coupon" class="default-label">Coupon:</label>
<div class="dropdown-search-widget-view coupon">
<a href="#" class="select2-choice field" tabindex="-1" id="s2id_c24bhkn6jxhnz5mi" style="width: auto;"> <span class="select2-chosen">&nbsp;</span><abbr class="select2-search-choice-close"></abbr> <span class="select2-arrow" role="presentation"><b role="presentation"></b></span></a><input id="c24bhkn6jxhnz5mi" class="field select2-offscreen" type="hidden" name="coupon" placeholder="Select a coupon..." tabindex="-1" title="">
</div>
<span class="tooltip_placeholder"></span>
<span id="coupon_error" class="field_error "></span>
<span id="coupon_success" class="field_success"></span>
</div></div>
</div>
<div id="projection" class="hidden"></div>
</form></div>
</div></div>
</div>
<div class="modal-footer">
<div class="content"></div>
<div class="spinner"><div class="spinner-view" style="display: none;"></div></div>
<button name="close_modal" class="button medium grey"><span>Cancel</span></button>
<button name="confirm" class="button medium blue"><span>Add subscription</span></button>
</div>
</div>
</div>
</div></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment