Skip to content
Snippets Groups Projects
Commit a13db653 authored by laryn's avatar laryn
Browse files

4.3 BillingBlock 

Need to do further testing but this is the Stripe section pasted into the BillingBlock.tpl from 4.3.
parent c5c564df
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
com.drastikbydesign.stripe/templates/CRM/Core/BillingBlock.tpl
+ 172
− 115
View file @ a13db653
{*
+--------------------------------------------------------------------+
| CiviCRM version 4.2 |
| CiviCRM version 4.3 |
+--------------------------------------------------------------------+
| Copyright CiviCRM LLC (c) 2004-2012 |
| Copyright CiviCRM LLC (c) 2004-2013 |
+--------------------------------------------------------------------+
| This file is a part of CiviCRM. |
| |
......@@ -24,7 +24,15 @@
+--------------------------------------------------------------------+
*}
{crmRegion name="billing-block"}
{* Add 'required' marker to billing fields in this template for front-end / online contribution and event registration forms only. *}
{if $context EQ 'front-end'}
{assign var=reqMark value=' <span class="crm-marker" title="This field is required.">*</span>'}
{else}
{assign var=reqMark value=''}
{/if}
{if $form.credit_card_number or $form.bank_account_number}
<!-- START Stripe -->
{if $paymentProcessor.payment_processor_type == 'Stripe'}
<script type="text/javascript">
......@@ -120,129 +128,117 @@
</legend>
{if $paymentProcessor.billing_mode & 2 and !$hidePayPalExpress }
<div class="crm-section no-label paypal_button_info-section">
<div class="content description">
<div class="content description">
{ts}If you have a PayPal account, you can click the PayPal button to continue. Otherwise, fill in the credit card and billing information on this form and click <strong>Continue</strong> at the bottom of the page.{/ts}
</div>
</div>
<div class="crm-section no-label {$form.$expressButtonName.name}-section">
<div class="content description">
{$form.$expressButtonName.html}
<div class="description">Save time. Checkout securely. Pay without sharing your financial information. </div>
</div>
</div>
</div>
</div>
<div class="crm-section no-label {$form.$expressButtonName.name}-section">
<div class="content description">
{$form.$expressButtonName.html}
<div class="description">Save time. Checkout securely. Pay without sharing your financial information. </div>
</div>
</div>
{/if}
{if $paymentProcessor.billing_mode & 1}
<div class="crm-section billing_mode-section {if $paymentProcessor.payment_type & 2}direct_debit_info-section{else}credit_card_info-section{/if}">
{if $paymentProcessor.payment_type & 2}
{if $paymentProcessor.payment_type & 2}
<div class="crm-section {$form.account_holder.name}-section">
<div class="label">{$form.account_holder.label}</div>
<div class="label">{$form.account_holder.label}</div>
<div class="content">{$form.account_holder.html}</div>
<div class="clear"></div>
</div>
<div class="crm-section {$form.bank_account_number.name}-section">
<div class="label">{$form.bank_account_number.label}</div>
<div class="label">{$form.bank_account_number.label}</div>
<div class="content">{$form.bank_account_number.html}</div>
<div class="clear"></div>
</div>
<div class="crm-section {$form.bank_identification_number.name}-section">
<div class="label">{$form.bank_identification_number.label}</div>
<div class="label">{$form.bank_identification_number.label}</div>
<div class="content">{$form.bank_identification_number.html}</div>
<div class="clear"></div>
</div>
<div class="crm-section {$form.bank_name.name}-section">
<div class="label">{$form.bank_name.label}</div>
<div class="label">{$form.bank_name.label}</div>
<div class="content">{$form.bank_name.html}</div>
<div class="clear"></div>
</div>
{else}
<div class="crm-section {$form.credit_card_type.name}-section">
<div class="label">{$form.credit_card_type.label}</div>
<div class="content">{$form.credit_card_type.html}</div>
<div class="clear"></div>
</div>
<div class="crm-section {$form.credit_card_number.name}-section">
<div class="label">{$form.credit_card_number.label}</div>
<div class="content">{$form.credit_card_number.html}
<div class="description">{ts}Enter numbers only, no spaces or dashes.{/ts}</div>
</div>
<div class="clear"></div>
</div>
<div class="crm-section {$form.cvv2.name}-section">
<div class="label">{$form.cvv2.label}</div>
<div class="content">
{$form.cvv2.html}
<img src="{$config->resourceBase}i/mini_cvv2.gif" alt="{ts}Security Code Location on Credit Card{/ts}" style="vertical-align: text-bottom;" />
<div class="description">{ts}Usually the last 3-4 digits in the signature area on the back of the card.{/ts}</div>
</div>
<div class="clear"></div>
</div>
<div class="crm-section {$form.credit_card_exp_date.name}-section">
<div class="label">{$form.credit_card_exp_date.label}</div>
<div class="content">{$form.credit_card_exp_date.html}</div>
<div class="clear"></div>
</div>
{else}
<div class="crm-section {$form.credit_card_type.name}-section">
<div class="label">{$form.credit_card_type.label} {$reqMark}</div>
<div class="content">{$form.credit_card_type.html}</div>
<div class="clear"></div>
</div>
<div class="crm-section {$form.credit_card_number.name}-section">
<div class="label">{$form.credit_card_number.label} {$reqMark}</div>
<div class="content">{$form.credit_card_number.html|crmAddClass:creditcard}</div>
<div class="clear"></div>
</div>
<div class="crm-section {$form.cvv2.name}-section">
<div class="label">{$form.cvv2.label} {$reqMark}</div>
<div class="content">
{$form.cvv2.html}
<img src="{$config->resourceBase}i/mini_cvv2.gif" alt="{ts}Usually the last 3-4 digits in the signature area on the back of the card.{/ts}" title="{ts}Usually the last 3-4 digits in the signature area on the back of the card.{/ts}" style="vertical-align: text-bottom;" />
</div>
<div class="clear"></div>
</div>
<div class="crm-section {$form.credit_card_exp_date.name}-section">
<div class="label">{$form.credit_card_exp_date.label} {$reqMark}</div>
<div class="content">{$form.credit_card_exp_date.html}</div>
<div class="clear"></div>
</div>
{/if}
</div>
</fieldset>
{if $profileAddressFields}
<input type="checkbox" id="billingcheckbox" value="0"> <label for="billingcheckbox">{ts}My billing address is the same as above{/ts}</label>
{/if}
<fieldset class="billing_name_address-group">
<legend>{ts}Billing Name and Address{/ts}</legend>
{if $profileAddressFields}
<input type="checkbox" id="billingcheckbox" value=0> <label for="billingcheckbox">{ts}Billing Address is same as above{/ts}</label>
{/if}
<div class="crm-section billing_name_address-section">
<div class="crm-section billingNameInfo-section">
<div class="content description">
{if $paymentProcessor.payment_type & 2}
{ts}Enter the name of the account holder, and the corresponding billing address.{/ts}
{else}
{ts}Enter the name as shown on your credit or debit card, and the billing address for this card.{/ts}
{/if}
</div>
</div>
<div class="crm-section {$form.billing_first_name.name}-section">
<div class="label">{$form.billing_first_name.label}</div>
<div class="label">{$form.billing_first_name.label} {$reqMark}</div>
<div class="content">{$form.billing_first_name.html}</div>
<div class="clear"></div>
</div>
<div class="crm-section {$form.billing_middle_name.name}-section">
<div class="label">{$form.billing_middle_name.label}</div>
<div class="label">{$form.billing_middle_name.label}</div>
<div class="content">{$form.billing_middle_name.html}</div>
<div class="clear"></div>
</div>
<div class="crm-section {$form.billing_last_name.name}-section">
<div class="label">{$form.billing_last_name.label}</div>
<div class="label">{$form.billing_last_name.label} {$reqMark}</div>
<div class="content">{$form.billing_last_name.html}</div>
<div class="clear"></div>
</div>
{assign var=n value=billing_street_address-$bltID}
<div class="crm-section {$form.$n.name}-section">
<div class="label">{$form.$n.label}</div>
<div class="label">{$form.$n.label} {$reqMark}</div>
<div class="content">{$form.$n.html}</div>
<div class="clear"></div>
</div>
{assign var=n value=billing_city-$bltID}
<div class="crm-section {$form.$n.name}-section">
<div class="label">{$form.$n.label}</div>
<div class="label">{$form.$n.label} {$reqMark}</div>
<div class="content">{$form.$n.html}</div>
<div class="clear"></div>
</div>
{assign var=n value=billing_country_id-$bltID}
<div class="crm-section {$form.$n.name}-section">
<div class="label">{$form.$n.label}</div>
<div class="content">{$form.$n.html|crmReplace:class:big}</div>
<div class="label">{$form.$n.label} {$reqMark}</div>
<div class="content">{$form.$n.html|crmAddClass:big}</div>
<div class="clear"></div>
</div>
{assign var=n value=billing_state_province_id-$bltID}
<div class="crm-section {$form.$n.name}-section">
<div class="label">{$form.$n.label}</div>
<div class="content">{$form.$n.html|crmReplace:class:big}</div>
<div class="label">{$form.$n.label} {$reqMark}</div>
<div class="content">{$form.$n.html|crmAddClass:big}</div>
<div class="clear"></div>
</div>
{assign var=n value=billing_postal_code-$bltID}
<div class="crm-section {$form.$n.name}-section">
<div class="label">{$form.$n.label}</div>
<div class="label">{$form.$n.label} {$reqMark}</div>
<div class="content">{$form.$n.html}</div>
<div class="clear"></div>
</div>
......@@ -253,67 +249,128 @@
{/if}
</div>
{if $profileAddressFields}
<script type="text/javascript">
{literal}
{if $profileAddressFields}
<script type="text/javascript">
{literal}
cj( function( ) {
cj('#billingcheckbox').click( function( ) {
sameAddress( this.checked ); // need to only action when check not when toggled, can't assume desired behaviour
// build list of ids to track changes on
var address_fields = {/literal}{$profileAddressFields|@json_encode}{literal};
var input_ids = {};
var select_ids = {};
var orig_id = field = field_name = null;
// build input ids
cj('.billing_name_address-section input').each(function(i){
orig_id = cj(this).attr('id');
field = orig_id.split('-');
field_name = field[0].replace('billing_', '');
if(field[1]) {
if(address_fields[field_name]) {
input_ids['#'+field_name+'-'+address_fields[field_name]] = '#'+orig_id;
}
}
});
});
if(cj('#first_name').length)
input_ids['#first_name'] = '#billing_first_name';
if(cj('#middle_name').length)
input_ids['#middle_name'] = '#billing_middle_name';
if(cj('#last_name').length)
input_ids['#last_name'] = '#billing_last_name';
function sameAddress( setValue ) {
{/literal}
var addressFields = {$profileAddressFields|@json_encode};
{literal}
var locationTypeInProfile = 'Primary';
var orgID = field = fieldName = null;
if ( setValue ) {
cj('.billing_name_address-section input').each( function( i ){
orgID = cj(this).attr('id');
field = orgID.split('-');
fieldName = field[0].replace('billing_', '');
if ( field[1] ) { // ie. there is something after the '-' like billing_street_address-5
// this means it is an address field
if ( addressFields[fieldName] ) {
fieldName = fieldName + '-' + addressFields[fieldName];
}
// build select ids
cj('.billing_name_address-section select').each(function(i){
orig_id = cj(this).attr('id');
field = orig_id.split('-');
field_name = field[0].replace('billing_', '').replace('_id', '');
if(field[1]) {
if(address_fields[field_name]) {
select_ids['#'+field_name+'-'+address_fields[field_name]] = '#'+orig_id;
}
cj(this).val( cj('#' + fieldName ).val() );
}
});
// detect if billing checkbox should default to checked
var checked = true;
for(var id in input_ids) {
var orig_id = input_ids[id];
if(cj(id).val() != cj(orig_id).val()) {
checked = false;
break;
}
}
for(var id in select_ids) {
var orig_id = select_ids[id];
if(cj(id).val() != cj(orig_id).val()) {
checked = false;
break;
}
}
if(checked) {
cj('#billingcheckbox').attr('checked', 'checked');
cj('.billing_name_address-group').hide();
}
// onchange handlers for non-billing fields
for(var id in input_ids) {
var orig_id = input_ids[id];
cj(id).change(function(){
var id = '#'+cj(this).attr('id');
var orig_id = input_ids[id];
// if billing checkbox is active, copy other field into billing field
if(cj('#billingcheckbox').attr('checked')) {
cj(orig_id).val( cj(id).val() );
};
});
};
for(var id in select_ids) {
var orig_id = select_ids[id];
cj(id).change(function(){
var id = '#'+cj(this).attr('id');
var orig_id = select_ids[id];
var stateId;
cj('.billing_name_address-section select').each( function( i ){
orgID = cj(this).attr('id');
field = orgID.split('-');
fieldName = field[0].replace('billing_', '');
fieldNameBase = fieldName.replace('_id', '');
if ( field[1] ) {
// this means it is an address field
if ( addressFields[fieldNameBase] ) {
fieldName = fieldNameBase + '-' + addressFields[fieldNameBase];
}
}
// if billing checkbox is active, copy other field into billing field
if(cj('#billingcheckbox').attr('checked')) {
cj(orig_id+' option').removeAttr('selected');
cj(orig_id+' option[value="'+cj(id).val()+'"]').attr('selected', 'selected');
};
// don't set value for state-province, since
// if need reload state depending on country
if ( fieldNameBase == 'state_province' ) {
stateId = cj('#' + fieldName ).val();
}
else {
cj(this).val( cj('#' + fieldName ).val() ).change( );
if(orig_id == '#billing_country_id-5') {
cj(orig_id).change();
}
});
};
// now set the state province
// after ajax call loads all the states
if ( stateId ) {
cj('select[id^="billing_state_province_id"]').ajaxStop(function() {
cj( 'select[id^="billing_state_province_id"]').val( stateId );
});
// toggle show/hide
cj('#billingcheckbox').click(function(){
if(this.checked) {
cj('.billing_name_address-group').hide(200);
// copy all values
for(var id in input_ids) {
var orig_id = input_ids[id];
cj(orig_id).val( cj(id).val() );
};
for(var id in select_ids) {
var orig_id = select_ids[id];
cj(orig_id+' option').removeAttr('selected');
cj(orig_id+' option[value="'+cj(id).val()+'"]').attr('selected', 'selected');
};
} else {
cj('.billing_name_address-group').show(200);
}
}
}
});
// remove spaces, dashes from credit card number
cj('#credit_card_number').change(function(){
var cc = cj('#credit_card_number').val()
.replace(/ /g, '')
.replace(/-/g, '');
cj('#credit_card_number').val(cc);
});
});
{/literal}
</script>
{/if}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment