Adding Meta Information
You can use the meta:* fields, you can get extra information from your customers.
NOTE: You can have up to 20 meta: fields, with field names up to 40 characters long and values up to 500 characters long.
{exp:charge:form
debug="yes"
form_class="form-horizontal"
form_id="charge-form"
return="{segment_1}/thanks"
required="meta:organization|meta:charity|meta:contact_preference"}
<div class="alert bg-info">Your meta:tag must exist on the page as a parsable tag with curly braces (i.e. {meta:tagname}). Just having <input name="meta:tagname"&rt; won't work.</div>
<fieldset>
{if have_errors}
<div class="alert alert-error">
<h4>We have {error_count} errors</h4>
<ul>
{errors}
<li>{error_message}</li>
{/errors}
</ul>
</div>
{/if}
{exp:charge:error_info}
{if has_error}
{error_message}
{/if}
{/exp:charge:error_info}
<h4>Details</h4>
<div class="form-group">
<div class="row">
<label for="plan_amount" class="col-sm-2 control-label">Customer Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="customer_name" name="customer_name" placeholder="eg. Joe Smith" value="{customer_name}" />
{if error_customer_name}
<div class="alert alert-warning">
{error_customer_name_message}
</div>
{/if}
</div>
</div>
</div>
<div class="col-sm-10">
<input type="text" class="form-control" id="customer_email" name="customer_email" placeholder="eg. joe@smith.org" value="{customer_email}" />
{if error_customer_email}
<div class="alert alert-warning">
{error_customer_email_message}
</div>
</div>
</div>
<hr>
<h4>Plan</h4>
<div class="form-group">
<div class="row">
<label for="plan_amount" class="control-label">Amount</label>
<div class="col-sm-12 input-group">
<input type="text" class="form-control" id="plan_amount" name="plan_amount" placeholder="Enter Amount" value="{plan_amount}" /><span class="input-group-addon">.00</span>
{if error_plan_amount}
<div class="alert alert-warning">
{error_plan_amount_message}
</div>
{/if}
</div>
</div>
</div>
<hr>
<h4>Meta Information</h4>
<div class="alert bg-success text-white">
<div class="form-group">
<label for="meta:organization" class="col-sm-2 control-label">Organization</label>
<div class="col-sm-10 input-group">
<input type="text" class="form-control" id="meta:organization" name="meta:organization" placeholder="Organization Name" value="{meta:organization}" />
{if error_meta:organization}
{error_meta:organization_message}
{/if}
</div>
</div>
<div class="form-group">
<label for="meta:charity" class="col-sm-2 control-label">Charity</label>
<div class="col-sm-10 input-group">
<input type="text" class="form-control" id="meta:charity" name="meta:charity" placeholder="Charity Name" value="{meta:charity}" />
{if error_meta:charity}
{error_meta:charity_message}
{/if}
</div>
</div>
<div class="form-group">
<label for="meta:contact_preference" class="col-sm-2 control-label">Contact Preference</label>
<div>
<label class="radio-inline" id="meta:contact_preference_1">
<input type="radio" name="meta:contact_preference" id="meta:contact_preference_1" value="email" {if meta:contact_preference == 'email' OR meta:contact_preference == ''} checked="checked" {/if} /> Email
</label>
</div>
<div>
<label class="radio-inline" id="meta:contact_preference_2">
<input type="radio" name="meta:contact_preference" id="meta:contact_preference_2" value="post" {if meta:contact_preference == 'post' OR meta:contact_preference == ''} checked="checked" {/if} /> Post
</label>
</div>
<div>
<label class="radio-inline" id="meta:contact_preference_3">
<input type="radio" name="meta:contact_preference" id="meta:contact_preference_3" value="phone" {if meta:contact_preference == 'phone' OR meta:contact_preference == ''} checked="checked" {/if} /> Phone
</label>
</div>
</div>
{if error_meta:contact_preference}
{error_meta:contact_preference_message}
{/if}
</div>
<hr>
<h4>Credit Card Details</h4>
<label for="card-element">Credit or debit card</label>
<div id="card-element">
<!-- a Stripe Element will be inserted here. -->
</div>
<div id="card-errors" class="text-danger" role="alert"></div>
<div id="progress" style="display:none;">
We are processing your payment... please wait.
</div>
<div id="payment-errors" class="text-danger" style="display:none;"></div>
<button id="pay-button" type="button" class="btn btn-xs btn-primary" data-processing="Please Wait...">
Pay Now
</button>
</fieldset>
{/exp:charge:form}
<br />
</div>
</div> <!-- close .row -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="{exp:charge:stripe_js}"></script>
<script src="{exp:charge:js}"></script>
<script>
var elementsOptions = {
fonts: [
{
cssSrc: "https://fonts.googleapis.com/css?family=Lobster",
}
]
};
var cardFormOptions = {
iconStyle: 'solid',
style: {
base: {
iconColor: '#8898AA',
color: 'black',
lineHeight: '36px',
fontWeight: 300,
fontFamily: 'Lobster, "Helvetica Neue", Helvetica, sans-serif',
fontSize: '19px',
padding: '5px',
'::placeholder': {
color: '#8898AA',
},
},
invalid: {
iconColor: '#e85746',
color: '#e85746',
}
},
classes: {
focus: 'is-focused',
empty: 'is-empty',
}
};
$(this).chargeForm({
stripe_key: '{exp:charge:public_key}',
form: '#charge-form',
card: '#card-element',
pay_button: '#pay-button',
pay_button_processing_text: 'Please Wait...',
pay_errors: '#payment-errors',
progress: '#progress',
coupon_form: '#coupon-form',
coupon_field: '#coupon',
coupon_status: '#coupon_status',
card_form_options: cardFormOptions,
});
</script>
