Dependencies
This layout uses the following components as "atoms" to create the full UI.
Uses: Layouts: Components: Objects:Vehicle Finance Options
Give users/customers a way to change and adjust purchasing options with finance on the vehicle detail page.
Your Details:
Enter your details to calculate how much you could pay each month for this vehicle.
Your Term:
Finance available subject to status. Indemnities may be required. Other finance offers may be available but cannot be used in conjunction with this offer.
While we endeavour to provide as accurate figures as possible, the final quotation and terms of the agreement may differ depending on the finance company used and the specification of the individual car they relate to. If you would like a bespoke quotation, please use the ‘Ask A Question’ button at the top of the page and one of our team will be in touch to discuss your specific requirements.
Personal Contract Purchase
Personal Contract Purchase Illustrative Example provided by Volkswagen Financial Services (UK) Limited
36 Monthly Payments of £1,965.98
Total Deposit £5,500.00
Customer Deposit + £2,500.00
Manufacturer Deposit Contribution + £1,5000.00
Retailer Deposit Contribution + £1,500.00
Balance to Finance £87,500.00
Total Charge for Credit £16,228.44
Total Amount Payable £106,228.44
Optional Final Payment of £33,518.00
Notes:
A contribution of £250.00 towards the finance deposit has been made.
Duration of Agreement 37 Months
Vehicle Price £90,000
Contract Length 37 Months
Mileage per Annum 10,000
Excess Mileage Charge 14.40 ppm
Representative APR 8.9%
Interest Rate (Fixed) 8.55%
Hire Purchase
Hire Purchase Representative Example provided by Volkswagen Financial Services (UK) Limited.
36 Monthly Payments of £343.45
Total Deposit £5,000.00
Customer Deposit + £5,000.00
Balance to Finance £13,795.00
Total Charge for Credit £2,796.00
Total Amount Payable £21,591.60
Duration of Agreement 48 Months
Vehicle Price £18,795.00
Representative APR 9.8%
Interest Rate (Fixed) 9.74%
<section class="c-vehicle-panels | o-section o-collapse">
<div class="o-wrapper">
<section class="c-vehicle__panel | o-collapse__section" id="vehicle_finance" x-data="{open: false}">
<button class="c-vehicle-panels__title c-sub-header | o-collapse__title u-flex u-flex-row u-flex-no-wrap" id="vehicle_finance_btn" type="button" aria-controls="vehicle_finance_panel"
@click="open = ! open"
:aria-expanded="open"
:class="open ? 'is-active' : 'is-inactive'"
>
<span class="c-sub-header__heading | u-mr-auto">
<h2 class="u-heading u-beta">How to Reserve and Finance Your Car</h2>
</span>
<span class="c-sub-header__right | u-ml-sm">
<svg class="c-icon c-icon--md c-icon--lg-@bp3" viewBox="0 0 16 16" aria-hidden="true" width="24" height="24">
<g fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10">
<path d="M2 2l12 12"></path>
<path d="M14 2L2 14"></path>
</g>
</svg>
</span>
</button>
<div class="c-vehicle-panels__content | o-collapse__panel" id="vehicle_finance_panel" role="region" aria-labelledby="vehicle_finance_btn" style="display: none;"
x-show="open" x-collapse
:class="open ? 'u-overflow-visible' : ''"
>
<div class="o-collapse__content | u-mb-lg" :class="open ? 'is-active' : 'is-inactive'">
<div class="o-grid | u-gap-lg">
<div class="o-grid__item o-flow | u-col-12 u-flex-fill-@bp4">
<h3 class="u-heading u-epsilon">Your Details:</h3>
<p>Enter your details to calculate how much you could pay each month for this vehicle.</p>
<label class="c-label">
<span class="c-label__text | u-w-14">Your Deposit?</span>
<span class="c-label__input c-field | u-w-14">
<span class="c-field__addon | u-bg-white">£</span>
<input class="c-input c-input--text" type="number" value="2500" step="100" min="0.0" max="147490.00">
</span>
<span class="c-note">Don't have a deposit? <a href="#">Let us value your car.</a></span>
</label>
<div class="c-label">
<span class="c-label__text">Your Term:</span>
<span class="c-label__input c-options t-options--radio">
<ul class="c-options__wrapper">
<li class="c-options__item | u-w-50% u-w-25%-@bp3 u-w-50%-@bp4 u-w-25%-@bp5">
<label class="c-options__item-body | u-h-5">
<input type="radio" name="term_options" value="24">
<span class="c-options__item-content">
<span class="c-options__content-heading">24 Months</span>
</span>
</label>
</li>
<li class="c-options__item | u-w-50% u-w-25%-@bp3 u-w-50%-@bp4 u-w-25%-@bp5">
<label class="c-options__item-body | u-h-5">
<input type="radio" name="term_options" value="36" checked="checked">
<span class="c-options__item-content">
<span class="c-options__content-heading">36 Months</span>
</span>
</label>
</li>
<li class="c-options__item | u-w-50% u-w-25%-@bp3 u-w-50%-@bp4 u-w-25%-@bp5">
<label class="c-options__item-body | u-h-5">
<input type="radio" name="term_options" value="48">
<span class="c-options__item-content">
<span class="c-options__content-heading">48 Months</span>
</span>
</label>
</li>
<li class="c-options__item | u-w-50% u-w-25%-@bp3 u-w-50%-@bp4 u-w-25%-@bp5">
<label class="c-options__item-body | u-h-5">
<input type="radio" name="term_options" value="60">
<span class="c-options__item-content">
<span class="c-options__content-heading">60 Months</span>
</span>
</label>
</li>
</ul>
</span>
</div>
<label class="c-label | u-mb">
<span class="c-label__text">Annual Mileage:</span>
<span class="c-label__input">
<select class="c-input c-input--select | u-w-14">
<option>6,000</option>
<option>7,000</option>
<option>8,000</option>
<option>9,000</option>
<option selected="selected">10,000</option>
<option>11,000</option>
<option>12,000</option>
<option>13,000</option>
<option>14,000</option>
<option>15,000</option>
<option>16,000</option>
<option>17,000</option>
<option>18,000</option>
<option>19,000</option>
<option>20,000</option>
</select>
</span>
<span class="c-note | u-muted:75">*Required for a relevant PCP Estimate.</span>
</label>
<p class="u-fs-sm">Finance available subject to status. Indemnities may be required. Other finance offers may be available but cannot be used in conjunction with this offer.</p>
<div x-data="{ hide: false }">
<p class="u-size-sm u-fw-600">
<button class="c-link" @click="hide = true">
Please note the figures shown are intended for illustration purposes only.
</button>
</p>
<p class="u-hidden" :class="{ 'u-hidden': ! hide }">While we endeavour to provide as accurate figures as possible, the final quotation and terms of the agreement may differ depending on the finance company used and the specification of the individual car they relate to. If you would like a bespoke quotation, please use the ‘Ask A Question’ button at the top of the page and one of our team will be in touch to discuss your specific requirements.</p>
</div>
<p><small><a href="#finance_footnote">More Finance Information <sup>2</sup></a></small></p>
</div>
<div class="o-grid__item | o-tabs | u-col-12 u-w-38-@bp3 u-w-40-@bp4" x-data="{ financeType: 'pcp' }">
<div class="c-options | t-options--muted">
<ul class="c-options__wrapper">
<li class="c-options__item | u-w-50%-@bp2 u-w-25%-@bp3">
<button class="c-options__item-body | is-active" type="button" @click="financeType = 'pcp'" :class="{ 'is-active': financeType == 'pcp' }">
<div class="c-options__item-content">
<span class="o-split">
<span class="o-split__title">
<b class="u-heading u-epsilon u-tc-primary u-mb-xs">Personal Contract Plan</b>
<span class="u-tc-info u-fw-500">£215.47 per month</span>
</span>
<object class="u-flex u-self-start">
<button class="c-btn c-btn--tertiary c-btn--sm" type="button" x-data x-tooltip.content="What is PCP? You can pay monthly then buy, swap or return.">
<span class="u-hidden">What is PCP?</span>
<svg class="c-icon" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="M8 1a7 7 0 1 1 0 14A7 7 0 0 1 8 1Zm0 5.415H6.415v1.057h1.057v3.17H6.415V11.7h3.17v-1.057H8.53v-3.7A.528.528 0 0 0 8 6.415Zm-.207-2.378a.793.793 0 1 0 0 1.585.793.793 0 0 0 0-1.585Z"/>
</svg>
</button>
</object>
</span>
</div>
</button>
</li>
<li class="c-options__item | u-w-50%-@bp2 u-w-25%-@bp3">
<button class="c-options__item-body" type="button" @click="financeType = 'hp'" :class="{ 'is-active': financeType == 'hp' }">
<div class="c-options__item-content">
<span class="o-split">
<span class="o-split__title">
<b class="u-heading u-epsilon u-tc-primary u-mb-xs">Hire Purchase</b>
<span class="u-tc-info u-fw-500">£345.45 per month</span>
</span>
<object class="u-flex u-self-start">
<button class="c-btn c-btn--tertiary c-btn--sm" type="button" x-data x-tooltip.content="What is HP? Buy a car outright over a fixed period.">
<span class="u-hidden">What is HP?</span>
<svg class="c-icon" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="M8 1a7 7 0 1 1 0 14A7 7 0 0 1 8 1Zm0 5.415H6.415v1.057h1.057v3.17H6.415V11.7h3.17v-1.057H8.53v-3.7A.528.528 0 0 0 8 6.415Zm-.207-2.378a.793.793 0 1 0 0 1.585.793.793 0 0 0 0-1.585Z"/>
</svg>
</button>
</object>
</span>
</div>
</button>
</li>
</ul>
</div>
<div class="o-tabs__content">
<section class="c-card | o-tab__item" x-show="financeType == 'pcp'">
<div class="c-card__body | o-flow | u-p">
<div class="o-flow-sm">
<h3 class="u-heading u-epsilon">Personal Contract Purchase</h3>
<p class="u-fs-xs">Personal Contract Purchase Illustrative Example provided by Volkswagen Financial Services (UK) Limited</p>
</div>
<div class="o-grid | u-fw-500 u-fs-sm">
<div class="o-grid__item | o-flow-sm u-col-7 u-pr u-b-ui u-br-@bp3 u-flex u-flex-column">
<div class="o-split">
<span class="o-split__title | u-w-12 u-tc-slate-600">36 Monthly Payments of</span>
<span class="u-tc-headings u-flex-fixed">£1,965.98</span>
</div>
<div class="o-split">
<span class="o-split__title | u-w-12 u-tc-slate-600">Total Deposit</span>
<span class="u-tc-headings u-flex-fixed">£5,500.00</span>
</div>
<div class="o-split">
<span class="o-split__title | u-w-12 u-tc-slate-600">Customer Deposit</span>
<span class="u-tc-headings u-flex-fixed">+ £2,500.00</span>
</div>
<div class="o-split">
<span class="o-split__title | u-w-12 u-tc-slate-600">Manufacturer Deposit Contribution</span>
<span class="u-tc-headings u-flex-fixed">+ £1,5000.00</span>
</div>
<div class="o-split">
<span class="o-split__title | u-w-12 u-tc-slate-600">Retailer Deposit Contribution</span>
<span class="u-tc-headings u-flex-child-fixed">+ £1,500.00</span>
</div>
<div class="o-split">
<span class="o-split__title | u-w-12 u-tc-slate-600">Balance to Finance</span>
<span class="u-tc-headings u-flex-fixed">£87,500.00</span>
</div>
<div class="o-split">
<span class="o-split__title | u-w-12 u-tc-slate-600">Total Charge for Credit</span>
<span class="u-tc-headings u-flex-fixed">£16,228.44</span>
</div>
<div class="o-split">
<span class="o-split__title | u-w-12 u-tc-slate-600">Total Amount Payable</span>
<span class="u-tc-headings u-flex-fixed">£106,228.44</span>
</div>
<div class="o-split | u-mb">
<span class="o-split__title | u-w-12 u-tc-slate-600">Optional Final Payment of</span>
<span class="u-tc-headings u-flex-fixed">£33,518.00</span>
</div>
<hr class="c-rule | u-mt-auto">
<!-- Finance Notes -->
<div class="u-fs-sm u-fw-400 u-mb u-mt">
<b class="u-block u-tc-headings u-mb-xxs">Notes:</b>
<p>A contribution of £250.00 towards the finance deposit has been made.</p>
</div>
</div>
<div class="o-grid__item | u-col-5 u-flex u-flex-column">
<div class="u-mb-sm">
<span class="u-tc-slate-600">Duration of Agreement</span>
<span class="u-block u-tc-headings">37 Months</span>
</div>
<div class="u-mb-sm">
<span class="u-tc-slate-600">Vehicle Price</span>
<span class="u-block u-tc-headings">£90,000</span>
</div>
<div class="u-mb-sm">
<span class="u-tc-slate-600">Contract Length</span>
<span class="u-block u-tc-headings">37 Months</span>
</div>
<div class="u-mb-sm">
<span class="u-tc-slate-600">Mileage per Annum</span>
<span class="u-block u-tc-headings">10,000</span>
</div>
<div class="u-mb">
<span class="u-tc-slate-600">Excess Mileage Charge</span>
<span class="u-block u-tc-headings">14.40 ppm</span>
</div>
<hr class="c-rule | u-mb u-mt-auto">
<div class="o-split | u-mb-xs">
<span class="o-split__title | u-tc-primary">Representative APR</span>
<span class="u-tc-info">8.9%</span>
</div>
<div class="o-split | u-mb u-tc-info">
<span class="o-split__title | u-tc-primary">Interest Rate (Fixed)</span>
<span class="u-tc-info">8.55%</span>
</div>
</div>
</div>
</div>
<div class="c-card__footer | u-bg-ui-100 u-nmt u-right u-space-x">
<a class="c-btn c-btn--primary" href="#apply-for-pcp">Apply for PCP</a>
</div>
</section>
<section class="c-card | o-tab__item" x-show="financeType == 'hp'">
<div class="c-card__body | o-flow | u-p">
<div>
<h3 class="u-heading u-epsilon">Hire Purchase</h3>
<p class="u-fs-xs">Hire Purchase Representative Example provided by Volkswagen Financial Services (UK) Limited.</p>
</div>
<div class="o-grid | u-fw-500 u-fs-sm">
<div class="o-grid__item | o-flow-sm u-col-7 u-pr u-b-ui u-br-@bp3 u-flex u-flex-column">
<div class="o-split">
<span class="o-split__title | u-w-12 u-tc-slate-600">36 Monthly Payments of</span>
<span class="u-tc-headings u-flex-fixed">£343.45</span>
</div>
<div class="o-split">
<span class="o-split__title | u-w-12 u-tc-slate-600">Total Deposit</span>
<span class="u-tc-headings u-flex-fixed">£5,000.00</span>
</div>
<div class="o-split">
<span class="o-split__title | u-w-12 u-tc-slate-600">Customer Deposit</span>
<span class="u-tc-headings u-flex-fixed">+ £5,000.00</span>
</div>
<div class="o-split">
<span class="o-split__title | u-w-12 u-tc-slate-600">Balance to Finance</span>
<span class="u-tc-headings u-flex-fixed">£13,795.00</span>
</div>
<div class="o-split">
<span class="o-split__title | u-w-12 u-tc-slate-600">Total Charge for Credit</span>
<span class="u-tc-headings u-flex-fixed">£2,796.00</span>
</div>
<div class="o-split">
<span class="o-split__title | u-w-12 u-tc-slate-600">Total Amount Payable</span>
<span class="u-tc-headings u-flex-fixed">£21,591.60</span>
</div>
</div>
<div class="o-grid__item | u-col-5 u-flex u-flex-column">
<div class="u-mb-sm">
<span class="u-tc-slate-600">Duration of Agreement</span>
<span class="u-block u-tc-headings">48 Months</span>
</div>
<div class="u-mb-sm">
<span class="u-tc-slate-600">Vehicle Price</span>
<span class="u-block u-tc-headings">£18,795.00</span>
</div>
<hr class="c-rule | u-mb u-mt-auto">
<div class="o-split | u-mb-xs">
<span class="o-split__title | u-tc-primary">Representative APR</span>
<span class="u-tc-info">9.8%</span>
</div>
<div class="o-split | u-mb u-tc-info">
<span class="o-split__title | u-tc-primary">Interest Rate (Fixed)</span>
<span class="u-tc-info">9.74%</span>
</div>
</div>
</div>
</div>
<div class="c-card__footer | u-bg-ui-100 u-nmt u-right u-space-x">
<a class="c-btn c-btn--primary" href="#apply-for-hp">Apply For HP</a>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Other Sections -->
</div>
</section>