[REF] website_sale: tokenization - improve desgin
Update design for registered cards @courtesy of @fhe-odoo
This commit is contained in:
Jeremy Kersten
@@ -7,7 +7,7 @@ from odoo.http import request
|
||||
|
||||
class WebsitePayment(http.Controller):
|
||||
@http.route(['/my/payment_method'], type='http', auth="user", website=True)
|
||||
def payment_method(self):
|
||||
def payment_method(self, **kwargs):
|
||||
acquirers = list(request.env['payment.acquirer'].search([('website_published', '=', True), ('registration_view_template_id', '!=', False)]))
|
||||
partner = request.env.user.partner_id
|
||||
payment_tokens = partner.payment_token_ids
|
||||
@@ -16,8 +16,9 @@ class WebsitePayment(http.Controller):
|
||||
'pms': payment_tokens,
|
||||
'acquirers': acquirers
|
||||
}
|
||||
return_url = request.params.get('redirect', '/my/payment_method')
|
||||
for acquirer in acquirers:
|
||||
acquirer.form = acquirer.sudo()._registration_render(request.env.user.partner_id.id, {'error': {}, 'error_message': [], 'return_url': '/my/payment_method', 'json': False, 'bootstrap_formatting': True})
|
||||
acquirer.form = acquirer.sudo()._registration_render(request.env.user.partner_id.id, {'error': {}, 'error_message': [], 'return_url': return_url, 'json': False, 'bootstrap_formatting': True})
|
||||
return request.render("website_payment.pay_methods", values)
|
||||
|
||||
@http.route(['/website_payment/delete/'], methods=['POST'], type='http', auth="user", website=True)
|
||||
|
||||
@@ -729,9 +729,10 @@ class WebsiteSale(http.Controller):
|
||||
}
|
||||
)
|
||||
acquirer.button = acquirer_button
|
||||
acquirer.tokens = request.env['payment.token'].search([('acquirer_id', '=', acquirer.id)])
|
||||
values['acquirers'].append(acquirer)
|
||||
|
||||
values['tokens'] = request.env['payment.token'].search([('partner_id', '=', order.partner_id.id), ('acquirer_id', 'in', acquirers.ids)])
|
||||
|
||||
return request.render("website_sale.payment", values)
|
||||
|
||||
@http.route(['/shop/payment/transaction_token/confirm'], type='json', auth="public", website=True)
|
||||
|
||||
@@ -13,20 +13,30 @@ $(document).ready(function () {
|
||||
|
||||
// When choosing an acquirer, display its Pay Now button
|
||||
var $payment = $("#payment_method");
|
||||
$payment.on("click", "input[name='acquirer'], button.btn_payment_token", function (ev) {
|
||||
$payment.on("click", "input[name='acquirer'], a.btn_payment_token", function (ev) {
|
||||
var ico_off = 'fa-circle-o';
|
||||
var ico_on = 'fa-dot-circle-o';
|
||||
|
||||
var payment_id = $(ev.currentTarget).val() || $(this).data('acquirer');
|
||||
var token = $(ev.currentTarget).data('token') || '';
|
||||
|
||||
$("div.oe_sale_acquirer_button[data-id='"+payment_id+"']", $payment).attr('data-token', token);
|
||||
$("div.js_payment a.list-group-item").removeClass("list-group-item-info");
|
||||
$('span.js_radio').switchClass(ico_on, ico_off, 0);
|
||||
if (token) {
|
||||
$("div.oe_sale_acquirer_button div.pre_msg").hide();
|
||||
$(ev.currentTarget).find('span.js_radio').switchClass(ico_off, ico_on, 0);
|
||||
$(ev.currentTarget).parents('li').find('input').prop("checked", true);
|
||||
$(ev.currentTarget).addClass("list-group-item-info");
|
||||
}
|
||||
else{
|
||||
$("div.oe_sale_acquirer_button div.pre_msg").show();
|
||||
}
|
||||
$("div.oe_sale_acquirer_button[data-id]", $payment).addClass("hidden");
|
||||
$("div.oe_sale_acquirer_button[data-id='"+payment_id+"']", $payment).removeClass("hidden");
|
||||
|
||||
// show token
|
||||
$("div.list-group[data-acquirer!='"+payment_id+"']", $payment).hide();
|
||||
$("div.list-group[data-acquirer='"+payment_id+"']", $payment).show();
|
||||
|
||||
var token = $(ev.currentTarget).data('token') || '';
|
||||
$("div.oe_sale_acquirer_button[data-id='"+payment_id+"']", $payment).attr('data-token', token);
|
||||
|
||||
})
|
||||
.find("input[name='acquirer']:checked").click();
|
||||
})
|
||||
.find("input[name='acquirer']:checked").click();
|
||||
|
||||
// When clicking on payment button: create the tx using json then continue to the acquirer
|
||||
$payment.on("click", 'button[type="submit"], button[name="submit"]', function (ev) {
|
||||
|
||||
@@ -1323,35 +1323,45 @@
|
||||
<h4>Payment Method:</h4>
|
||||
<ul class="list-unstyled">
|
||||
<t t-foreach="acquirers or []" t-as="acquirer">
|
||||
<li>
|
||||
<label t-if="acquirer.button">
|
||||
<input t-att-value="acquirer.id" type="radio" name="acquirer" t-att-checked="acquirers[0] == acquirer" />
|
||||
<img class="media-object" style="width: 60px; display: inline-block;" t-att-title="acquirer.name" t-att-src="'/payment_%s/static/src/img/%s_icon.png' % (acquirer.provider, acquirer.provider)" />
|
||||
<span t-field="acquirer.name" />
|
||||
<span t-if="acquirer.fees_active">(extra fees apply)</span>
|
||||
</label>
|
||||
</li>
|
||||
|
||||
|
||||
<div class="list-group" style='display:none;' t-if='acquirer.tokens' t-att-data-acquirer="acquirer.id">
|
||||
<a href="#" class="list-group-item disabled btn_payment_token" t-att-data-acquirer="acquirer.id">
|
||||
<span class="fa fa-cc-visa"/> <b>Registered Cards</b>
|
||||
</a>
|
||||
<t t-foreach='acquirer.tokens' t-as='token'>
|
||||
<button type="button" class="list-group-item btn_payment_token" t-att-data-acquirer="acquirer.id" t-att-data-token='token.id'>
|
||||
<span class="fa fa-credit-card"></span>&nbsp; <t t-esc="token.name" />
|
||||
</button>
|
||||
</t>
|
||||
</div>
|
||||
|
||||
<li>
|
||||
<label t-if="acquirer.button">
|
||||
<input t-att-value="acquirer.id" type="radio" name="acquirer" t-att-checked="acquirers[0] == acquirer" />
|
||||
<img class="media-object" style="width: 60px; display: inline-block;" t-att-title="acquirer.name" t-att-src="'/payment_%s/static/src/img/%s_icon.png' % (acquirer.provider, acquirer.provider)" />
|
||||
<span t-field="acquirer.name" />
|
||||
<span t-if="acquirer.fees_active">(processing fees apply)</span>
|
||||
</label>
|
||||
</li>
|
||||
</t>
|
||||
<li t-if="[acq for acq in acquirers if acq.registration_view_template_id]">
|
||||
<label>
|
||||
<input type="radio" name="acquirer" />
|
||||
<span class='fa fa-2x fa-credit-card'/>
|
||||
Saved Cards
|
||||
</label>
|
||||
|
||||
<div class="list-group">
|
||||
<t t-foreach='tokens' t-as='token'>
|
||||
<a class="list-group-item btn_payment_token" t-att-data-acquirer="token.acquirer_id.id" t-att-data-token='token.id'>
|
||||
<span class="js_radio fa fa-circle-o"></span>&nbsp;
|
||||
<t t-esc="token.name" />
|
||||
<t t-if="len(set(tokens.mapped('acquirer_id')))>1">
|
||||
(<t t-esc='token.acquirer_id.name'/>)
|
||||
</t>
|
||||
<span t-if="token.acquirer_id.fees_active">(processing fees apply)</span>
|
||||
</a>
|
||||
</t>
|
||||
<a href="/my/payment_method?redirect=/shop/payment" class="list-group-item" >
|
||||
<span class="fa fa-plus-square"/> <b>New card</b>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-3 col-sm-3">
|
||||
<t t-foreach="acquirers or []" t-as="acquirer" id="acquirers_list">
|
||||
<div t-att-data-id="acquirer.id" class="oe_sale_acquirer_button hidden pull-right">
|
||||
<div t-raw="acquirer.button" />
|
||||
<div t-field="acquirer.pre_msg" />
|
||||
<div class="pre_msg" t-field="acquirer.pre_msg" />
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
@@ -1622,6 +1632,7 @@
|
||||
<t t-call="website_sale.total">
|
||||
<t t-set='website_sale_order' t-value='tx.sale_order_id'/>
|
||||
</t>
|
||||
<i class='text-danger' t-if="tx.acquirer_id.fees_active">! Some processing fees will be applied</i>
|
||||
</div>
|
||||
<div class="oe_pay_token col-sm-8">
|
||||
<div class="panel panel-info">
|
||||
|
||||
Reference in New Issue
Block a user