[IMP] website_sale: Added S2S payment with new payment form

- Added the support of form payment. - Fixed payment form's errors not being displayed. - Fixed a crash when paying on e-commerce with a saved token. (dev commit, need to clean the code)
2017-08-24 11:20:14 +02:00
parent fc17776f31
commit ffcd95aaa9
25 changed files with 190 additions and 37 deletions
@@ -9,3 +9,6 @@ payment_method_all,payment.token.all,model_payment_token,,1,0,0,0
 payment_method_user,payment.token.user,model_payment_token,base.group_user,1,1,1,1
 payment_method_portal,payment.token.portal,model_payment_token,base.group_portal,1,1,1,1
 payment_method_system,payment.token.system,model_payment_token,base.group_system,1,1,1,1
+payment_option_all,payment.option.all,model_payment_option,,1,0,0,0
+payment_option_user,payment.option.user,model_payment_option,base.group_user,1,1,1,0
+payment_option_system,payment.option.system,model_payment_option,base.group_system,1,1,1,1
@@ -59,7 +59,7 @@ odoo.define('payment.payment_form', function (require){
                        }
                        // if the server has returned false, we display an error
                        else {
-                            self.error(_t('Error'),
+                            self.error(_t('Server Error'),
                                _t("<p>We are not able to add your payment method at the moment.</p>"));
                        }
                        // here we remove the 'processing' icon from the 'add a new payment' button
@@ -70,10 +70,31 @@ odoo.define('payment.payment_form', function (require){
                        $(button).attr('disabled', false);
                        $(button).find('span.o_loader').remove();

-                        self.error(_t('Error'),
+                        self.error(_t('Server Error'),
                            _t("<p>We are not able to add your payment method at the moment.</p>") + (core.debug ? data.data.message : ''));
                    });
                }
+                // if the user is going to pay with a form payment, then
+                else if(this.isFormPaymentRadio(checked_radio))
+                {
+                    // we retrieve the acquirer id and its form
+                    var acquirer_id = this.getAcquirerIdFromRadio(checked_radio);
+                    var acquirer_form = this.$('#o_payment_form_acq_' + acquirer_id);
+                    var inputs_form = $('input', acquirer_form);
+                    var ds = $('input[name="data_set"]', acquirer_form)[0];
+
+                    // Here we take the values we need to send to the acquirer and generate a form with them
+                    var html_form = '<form method="post" action="' + ds.dataset.actionUrl + '" class="hidden">';
+
+                    for(var i = 0; i < inputs_form.length; i ++) {
+                        if(inputs_form[i].name != "data_set") {
+                            html_form +='<input name="' + inputs_form[i].name + '" value="' + inputs_form[i].value + '"/>';
+                        }
+                    }
+                    html_form += '</form>';
+                    // we append the form to the body and send it.
+                    $(html_form).appendTo("body").submit();
+                }
                // if the user is using an old payment
                else {
                    // then we just submit the form
@@ -81,8 +102,8 @@ odoo.define('payment.payment_form', function (require){
                }
            }
            else {
-                this.error(_t('Error'),
-                    _t('<p>Please select a payment method</p>'));
+                this.error(_t('No payment method selected'),
+                    _t('<p>Please select a payment method.</p>'));
            }
        },
        // event handler when clicking on the button to add a new payment method
@@ -132,7 +153,7 @@ odoo.define('payment.payment_form', function (require){
                    }
                    // if the server has returned false, we display an error
                    else {
-                        self.error(_t('Error'),
+                        self.error(_t('Server Error'),
                            _t("<p>We are not able to add your payment method at the moment.</p>"));
                    }
                    // here we remove the 'processing' icon from the 'add a new payment' button
@@ -143,13 +164,13 @@ odoo.define('payment.payment_form', function (require){
                    $(button).attr('disabled', false);
                    $(button).find('span.o_loader').remove();

-                    self.error(_t('Error'),
+                    self.error(_t('Server error'),
                        _t("<p>We are not able to add your payment method at the moment.</p>") + (core.debug ? data.data.message : ''));
                });
            }
            else {
-                this.error(_t('Error'),
-                    _t('<p>Please select the option to add a new payment method</p>'));
+                this.error(_t('No payment method selected'),
+                    _t('<p>Please select the option to add a new payment method.</p>'));
            }
        },
        // event handler when clicking on a button to delete a payment method
@@ -170,7 +191,7 @@ odoo.define('payment.payment_form', function (require){
                            ev.target.closest('div').remove();
                        }
                    },function(type,err){
-                        self.error(_t('Error'),
+                        self.error(_t('Server Error'),
                            _t("<p>We are not able to delete your payment method at the moment.</p>"));
                    });
            };
@@ -202,7 +223,7 @@ odoo.define('payment.payment_form', function (require){
                    Delete();
                }
            }, function(type, err){
-                self.error(_t('Error'),
+                self.error(_t('Server Error'),
                    _t("<p>We are not able to delete your payment method at the moment.</p>") + (core.debug ? err.data.message : ''));
            });
        },
@@ -215,28 +236,43 @@ odoo.define('payment.payment_form', function (require){
            var checked_radio = this.$('input[type="radio"]:checked');
            // we hide all the acquirers form
            this.$('[id*="o_payment_add_token_acq_"]').addClass('hidden');
+            this.$('[id*="o_payment_form_acq_"]').addClass('hidden');
+            if(checked_radio.length != 1) {
+                return;
+            }
+            checked_radio = checked_radio[0];
            // if we clicked on an add new payment radio
-            if(checked_radio.length == 1 && this.isNewPaymentRadio(checked_radio[0]))
+            if(this.isNewPaymentRadio(checked_radio))
            {
                // then we retrieve the acquirer name
-                var acquirer_id = this.getAcquirerIdFromRadio(checked_radio[0]);
+                var acquirer_id = this.getAcquirerIdFromRadio(checked_radio);
                // and display its form
                this.$('#o_payment_add_token_acq_' + acquirer_id).removeClass('hidden');
            }
+            else if(this.isFormPaymentRadio(checked_radio))
+            {
+                // then we retrieve the acquirer name
+                var acquirer_id = this.getAcquirerIdFromRadio(checked_radio);
+                // and display its form
+                this.$('#o_payment_form_acq_' + acquirer_id).removeClass('hidden');
+            }
        },
        isNewPaymentRadio: function(element) {
-            return $(element).data('acquirer-id') !== undefined;
+            return $(element).data('s2s-payment') === 'True';
+        },
+        isFormPaymentRadio: function(element) {
+            return $(element).data('form-payment') === 'True';
        },
        getAcquirerIdFromRadio: function(element) {
            return $(element).data('acquirer-id');
        },
        error: function(title, message, url) {
            return new Dialog(null, {
-                title: title || "",
-                $content: $(core.qweb.render('website.error_dialog', {
-                    message: message || "",
-                })),
-            }).open();
+                title: _t('Error: ') + title,
+                size: 'medium',
+                $content: message || "",
+                buttons: [
+                {text: _t('Ok'), close: true}]}).open();
        },
        getFormData: function($form){
            var unindexed_array = $form.serializeArray();
@@ -19,6 +19,7 @@
                            <div class="col-sm-8">
                                <h3>Manage your Payment Methods</h3>
                                <t t-call="payment.payment_tokens_list">
+                                    <t t-set="s2s_acquirers" t-value="acquirers"/>
                                    <t t-set="mode" t-value="'manage'"/>
                                    <t t-set="verify_validity" t-value="True"/>
                                </t>
@@ -17,31 +17,53 @@
            - 'checked_pm_id' the payment token that should be checked (for radio buttons)
            - 'mode' can take two values, either 'payment' or 'manage'. 'manage' displays the add a new card and delete buttons. 'payment'
                display a form that is used to pay and send the information to the form action url.
-            - 'acquirers' the list of the acquirers
+            - 's2s_acquirers' the list of the server2server acquirers
+            - 'form_acquirers' the list of the payment acquirers to pay with forms
            - 'verify_validity' if we need to verify if the payment method is valid when adding a new one
        -->
-        <form method="post" t-att-action="form_action if form_action else '#'" class="o_payment_form">
+        <form t-if="s2s_acquirers or pms or form_acquirers" method="post" t-att-action="form_action if form_action else '#'" class="o_payment_form">
            <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
            <input type="hidden" t-if="verify_validity==True" name="verify_validity" value="1"/>
            <div class="panel panel-default">
-                <t t-foreach="acquirers" t-as="acq">
+                <t t-foreach="s2s_acquirers" t-as="acq">
                    <div class="panel-body">
                        <label>
                            <t t-if="mode == 'manage'">
-                                <input type="radio" t-att-data-acquirer-id="acq.id" name="pm_id" t-attf-value="new_{{acq.id}}" t-att-class="'hidden' if (len(acquirers)==1) else ''" t-att-checked="len(acquirers) == 1"/>
+                                <input type="radio" t-att-data-acquirer-id="acq.id" t-att-data-s2s-payment="true" name="pm_id" t-attf-value="new_{{acq.id}}" t-att-class="'hidden' if (len(s2s_acquirers)==1) else ''" t-att-checked="len(s2s_acquirers) == 1"/>
                            </t>
                            <t t-else="">
-                                <input type="radio" t-att-data-acquirer-id="acq.id" name="pm_id" t-attf-value="new_{{acq.id}}" t-att-class="'hidden' if (len(acquirers)==1 and len(pms)==0) else ''" t-att-checked="len(acquirers)==1 and len(pms)==0"/>
+                                <input type="radio" t-att-data-acquirer-id="acq.id" t-att-data-s2s-payment="true" name="pm_id" t-attf-value="new_{{acq.id}}" t-att-class="'hidden' if (len(s2s_acquirers)==1 and len(pms)==0) else ''" t-att-checked="len(s2s_acquirers)==1 and len(pms)==0"/>
                            </t>
                            <t t-esc="acq.name"/>
                        </label>
+                        <ul class="pull-right list-inline">
+                            <t t-foreach="acq.payment_option_ids" t-as="pm_option">
+                                <li>
+                                    <span t-field="pm_option.image_small"
+                                        t-options='{"widget": "image", "alt-field": "name"}' />
+                                </li>
+                            </t>
+                        </ul>
                    </div>
-                    <div t-attf-id="o_payment_add_token_acq_{{acq.id}}" t-attf-class="panel-footer {{'hidden' if (len(acquirers)&gt;1 and len(pms)==0 and acquirers[0]!=acq) else 'hidden' if len(pms)&gt;0 else ''}}">
+                    <div t-attf-id="o_payment_add_token_acq_{{acq.id}}" t-attf-class="panel-footer {{'hidden' if (len(s2s_acquirers)&gt;1 and len(pms)==0 and s2s_acquirers[0]!=acq) else 'hidden' if len(pms)&gt;0 else ''}}">
                        <div class="clearfix">
                            <t t-raw="acq.form" t-att-data-acquirer-id="acquirer.id"/>
                        </div>
                    </div>
                </t>
+                <t tif="mode == 'payment'" t-foreach="form_acquirers" t-as="acq">
+                    <div class="panel-body">
+                        <label>
+                            <!-- TBE TODO: Tout le schmilblick du hidden et checked (pareil pour le s2s juste au dessus) -->
+                            <input type="radio" t-att-data-acquirer-id="acq.id" t-att-data-form-payment="true" name="pm_id" t-attf-value="form_{{acq.id}}"/>
+                            <t t-esc="acq.name"/>
+                        </label>
+                    </div>
+                    <div t-attf-id="o_payment_form_acq_{{acq.id}}" class="panel-footer hidden">
+                        You'll be redirected to the <t t-esc="acq.provider"/> website after clicking on the payment button.
+                        <t t-raw="acq.form"/>
+                    </div>
+                </t>
                <t t-foreach="pms" t-as="pm">
                    <div class="panel-body">
                        <label>
@@ -7,7 +7,8 @@
            <field name="image" type="base64" file="payment_adyen/static/src/img/adyen_icon.png"/>
            <field name="provider">adyen</field>
            <field name="company_id" ref="base.main_company"/>
-            <field name="view_template_id" ref="adyen_acquirer_button"/>
+            <!-- <field name="view_template_id" ref="adyen_acquirer_button"/> -->
+            <field name="view_template_id" ref="adyen_form"/>
            <field name="environment">test</field>
            <field name="pre_msg"><![CDATA[
 <p>You will be redirected to the Adyen website after clicking on the payment button.</p>]]></field>
@@ -32,7 +32,8 @@
            </form>
        </template>

-        <template id="ayden_form">
+        <template id="adyen_form">
+            <input type="hidden" name="data_set" t-att-data-action-url="tx_url"/>
            <input type="hidden" name="merchantReference" t-att-value="merchantReference"/>
            <input type="hidden" name="paymentAmount" t-att-value="paymentAmount"/>
            <input type="hidden" name="currencyCode" t-att-value="currencyCode"/>
@@ -7,7 +7,8 @@
            <field name="image" type="base64" file="payment_authorize/static/src/img/authorize_icon.png"/>
            <field name="provider">authorize</field>
            <field name="company_id" ref="base.main_company"/>
-            <field name="view_template_id" ref="authorize_acquirer_button"/>
+            <!-- <field name="view_template_id" ref="authorize_acquirer_button"/> -->
+            <field name="view_template_id" ref="authorize_form"/>
            <field name="registration_view_template_id" ref="authorize_s2s_form"/>
            <field name="environment">test</field>
            <field name="pre_msg"><![CDATA[
@@ -48,6 +48,7 @@
        </template>

        <template id="authorize_form">
+            <input type="hidden" name="data_set" t-att-data-action-url="tx_url"/>
            <input type='hidden' name='x_login' t-att-value='x_login'/>
            <input type='hidden' name='x_fp_hash' t-att-value='x_fp_hash'/>
            <input type='hidden' name='x_amount' t-att-value='x_amount'/>
@@ -7,7 +7,8 @@
            <field name="image" type="base64" file="payment_buckaroo/static/src/img/buckaroo_icon.png"/>
            <field name="provider">buckaroo</field>
            <field name="company_id" ref="base.main_company"/>
-            <field name="view_template_id" ref="buckaroo_acquirer_button"/>
+            <!-- <field name="view_template_id" ref="buckaroo_acquirer_button"/> -->
+            <field name="view_template_id" ref="buckaroo_form"/>
            <field name="environment">test</field>
            <field name="pre_msg"><![CDATA[
 <p>You will be redirected to the Buckaroo website after clicking on the payment button.</p>]]></field>
@@ -31,6 +31,7 @@
        </template>

        <template id="buckaroo_form">
+            <input type="hidden" name="data_set" t-att-data-action-url="tx_url"/>
            <input type="hidden" name="Brq_websitekey" t-att-value="Brq_websitekey"/>
            <input type="hidden" name="Brq_amount" t-att-value="Brq_amount"/>
            <input type="hidden" name="Brq_currency" t-att-value="Brq_currency"/>
@@ -7,7 +7,8 @@
            <field name="image" type="base64" file="payment_ogone/static/src/img/ogone_icon.png"/>
            <field name="provider">ogone</field>
            <field name="company_id" ref="base.main_company"/>
-            <field name="view_template_id" ref="ogone_acquirer_button"/>
+            <!-- <field name="view_template_id" ref="ogone_acquirer_button"/> -->
+            <field name="view_template_id" ref="ogone_form"/>
            <field name="registration_view_template_id" ref="ogone_s2s_form"/>
            <field name="environment">test</field>
            <field name="pre_msg"><![CDATA[
@@ -54,6 +54,7 @@
        </template>

        <template id="ogone_form">
+            <input type="hidden" name="data_set" t-att-data-action-url="tx_url"/>
            <!-- seller -->
            <input type='hidden' name='PSPID' t-att-value='PSPID'/>
            <input type='hidden' name='ORDERID' t-att-value='ORDERID'/>
@@ -7,7 +7,8 @@
            <field name="image" type="base64" file="payment_paypal/static/src/img/paypal_icon.png"/>
            <field name="provider">paypal</field>
            <field name="company_id" ref="base.main_company"/>
-            <field name="view_template_id" ref="paypal_acquirer_button"/>
+            <!-- <field name="view_template_id" ref="paypal_acquirer_button"/> -->
+            <field name="view_template_id" ref="paypal_form"/>
            <field name="environment">test</field>
            <field name="pre_msg"><![CDATA[
 <p>You will be redirected to the Paypal website after clicking on the payment button.</p>]]></field>
@@ -42,6 +42,7 @@
        </template>

        <template id="paypal_form">
+            <input type="hidden" name="data_set" t-att-data-action-url="tx_url"/>
            <input type="hidden" name="cmd" t-att-value="cmd"/>
            <input type="hidden" name="business" t-att-value="business"/>
            <input type="hidden" name="item_name" t-att-value="item_name"/>
@@ -6,7 +6,8 @@
            <field name="image" type="base64" file="payment_payumoney/static/src/img/payumoney_icon.png"/>
            <field name="provider">payumoney</field>
            <field name="company_id" ref="base.main_company"/>
-            <field name="view_template_id" ref="payumoney_acquirer_button"/>
+            <!-- <field name="view_template_id" ref="payumoney_acquirer_button"/> -->
+            <field name="view_template_id" ref="payumoney_form"/>
            <field name="environment">test</field>
            <field name="pre_msg"><![CDATA[
                <p>You will be redirected to the PayUmoney website after clicking on the payment button.</p>]]>
@@ -24,6 +24,7 @@
    </template>

    <template id="payumoney_form">
+        <input type="hidden" name="data_set" t-att-data-action-url="tx_url"/>
        <input type="hidden" name="key" t-att-value='key' />
        <input type="hidden" name="txnid" t-att-value='txnid' />
        <input type="hidden" name="amount" t-att-value='amount' />
@@ -7,7 +7,8 @@
            <field name="image" type="base64" file="payment_sips/static/src/img/sips_icon.png"/>
            <field name="provider">sips</field>
            <field name="company_id" ref="base.main_company"/>
-            <field name="view_template_id" ref="payment_sips.sips_acquirer_button"/>
+            <!-- <field name="view_template_id" ref="payment_sips.sips_acquirer_button"/> -->
+            <field name="view_template_id" ref="payment_sips.sips_form"/>
            <field name="environment">test</field>
            <field name="pre_msg"><![CDATA[
 <p>You will be redirected to the Sips website after clicking on payment button.</p>]]></field>
@@ -17,6 +17,7 @@
        </template>

        <template id="sips_form">
+            <input type="hidden" name="data_set" t-att-data-action-url="tx_url"/>
            <input type="hidden" name="Data" t-att-value="Data"/>
            <input type="hidden" name="InterfaceVersion" t-att-value="InterfaceVersion"/>
            <input type="hidden" name="Seal" t-att-value="Seal"/>
@@ -6,7 +6,8 @@
            <field name="image" type="base64" file="payment_stripe/static/src/img/stripe_icon.png"/>
            <field name="provider">stripe</field>
            <field name="company_id" ref="base.main_company"/>
-            <field name="view_template_id" ref="stripe_acquirer_button"/>
+            <!-- <field name="view_template_id" ref="stripe_acquirer_button"/> -->
+            <field name="view_template_id" ref="stripe_form"/>
            <field name="registration_view_template_id" ref="stripe_s2s_form"/>
            <field name="environment">test</field>
            <field name="pre_msg"><![CDATA[
@@ -32,6 +32,7 @@
        </template>

        <template id="stripe_form">
+            <input type="hidden" name="data_set" t-att-data-action-url="tx_url"/>
            <script src="https://checkout.stripe.com/checkout.js"></script>
            <input type='hidden' name='stripe_image' t-att-value="acquirer.stripe_image_url"/>
            <input type='hidden' name='merchant' t-att-value='acquirer.company_id.name'/>
@@ -7,7 +7,8 @@
            <field name="image" type="base64" file="payment_transfer/static/src/img/transfer_icon.png"/>
            <field name="provider">transfer</field>
            <field name="company_id" ref="base.main_company"/>
-            <field name="view_template_id" ref="transfer_acquirer_button"/>
+            <!-- <field name="view_template_id" ref="transfer_acquirer_button"/> -->
+            <field name="view_template_id" ref="transfer_form"/>
            <field name="environment">test</field>
            <field name="website_published" eval="True"/>
            <field name="pre_msg"><![CDATA[
@@ -20,6 +20,7 @@
        </template>

        <template id="transfer_form">
+            <input type="hidden" name="data_set" t-att-data-action-url="tx_url"/>
            <t t-if="return_url">
                <input type='hidden' name='return_url' t-att-value='return_url'/>
            </t>
@@ -128,7 +128,7 @@ class PaymentTransaction(models.Model):
        if (self and acquirer and self.acquirer_id != acquirer) or (self and self.sale_order_id != order):
            tx = False
        # new or distinct token
-        if payment_token and tx.payment_token_id and payment_token != self.payment_token_id:
+        if tx and payment_token and tx.payment_token_id and payment_token != self.payment_token_id:
            tx = False

        # still draft tx, no more info -> rewrite on tx or create a new one depending on parameter
@@ -715,6 +715,29 @@ class WebsiteSale(http.Controller):
        acquirers = request.env['payment.acquirer'].search(
            [('website_published', '=', True), ('company_id', '=', order.company_id.id)]
        )
+
+        values['form_acquirers'] = [acq for acq in acquirers if acq.view_template_id]
+        values['s2s_acquirers'] = [acq for acq in acquirers if acq.registration_view_template_id]
+
+        for acq in values['form_acquirers']:
+            acq.form = acq.with_context(submit_class='btn btn-primary', submit_txt=_('Pay Now')).sudo().render(
+                '/',
+                order.amount_total,
+                order.pricelist_id.currency_id.id,
+                values={
+                    'return_url': '/shop/payment/validate',
+                    'partner_id': shipping_partner_id,
+                    'billing_partner_id': order.partner_invoice_id.id,
+                }
+            )
+
+        for acq in values['s2s_acquirers']:
+            acq.form = acq.sudo()._registration_render(order.partner_id.id, {
+                'return_url': '/shop/payment/validate',
+                'bootstrap_formatting': True
+            })
+
+
        values['acquirers'] = []
        for acquirer in acquirers:
            acquirer_button = acquirer.with_context(submit_class='btn btn-primary', submit_txt=_('Pay Now')).sudo().render(
@@ -727,8 +750,10 @@ class WebsiteSale(http.Controller):
                    'billing_partner_id': order.partner_invoice_id.id,
                }
            )
-            acquirer.button = acquirer_button
-            values['acquirers'].append(acquirer)
+            acquirer.button = acquirer_button #TBE TODO: remove this line
+            acquirer.form = acquirer_button
+            # values['acquirers'].append(acquirer)
+
        values['tokens'] = request.env['payment.token'].search([('partner_id', '=', order.partner_id.id), ('acquirer_id', 'in', acquirers.ids)])

        return values
@@ -815,6 +840,42 @@ class WebsiteSale(http.Controller):

        return tx.render_sale_button(order, '/shop/payment/validate')

+    @http.route('/shop/payment/token', type='http', auth='public', website=True)
+    def payment_token(self, pm_id=None, **kw):
+        """ Method that handles payment using saved tokens
+
+        :param int pm_id: id of the payment.token that we want to use to pay.
+        """
+        order = request.website.sale_get_order()
+        # do not crash if the user has already paid and try to pay again
+        if not order:
+            return request.redirect('/shop/?error=no_order')
+
+        assert order.partner_id.id != request.website.partner_id.id
+
+        try:
+            pm_id = int(pm_id)
+        except ValueError:
+            pm_id = False
+
+        if not pm_id:
+            return request.redirect('/shop/?error=invalid_token_id')
+
+        # We retrieve the token the user want to use to pay
+        token = request.env['payment.token'].browse(pm_id)
+        # we retrieve an existing transaction (if it exists obviously)
+        tx = request.website.sale_get_transaction() or request.env['payment.transaction'].sudo()
+        # we check if the transaction is Ok, if not then we create it
+        tx = tx.check_or_create_sale_tx(order, token.acquirer_id, payment_token=token, tx_type='server2server')
+        # we set the transaction id into the session (so `sale_get_transaction` can retrieve it )
+        request.session['sale_transaction_id'] = tx.id
+        # we proceed the s2s payment
+        res = tx.confirm_sale_token()
+        # we then redirect to the page that validates the payment by giving it error if there's one
+        if res is not True:
+            return request.redirect('/shop/payment/validate?success=False&error=%s' % res)
+        return request.redirect('/shop/payment/validate?success=True')
+
    @http.route('/shop/payment/get_status/<int:sale_order_id>', type='json', auth="public", website=True)
    def payment_get_status(self, sale_order_id, **post):
        order = request.env['sale.order'].sudo().browse(sale_order_id).exists()
@@ -1324,6 +1324,18 @@
                            </div>
                            <div class="clearfix" />
                            <div class="oe_structure" />
+
+                            <div class="mb64 col-md-12" t-if="(form_acquirers or s2s_acquirers or tokens) and website_sale_order.amount_total">
+                                <h3 class="mb24">Pay with </h3>
+                                <t t-call="payment.payment_tokens_list">
+                                    <t t-set="mode" t-value="'payment'"/>
+                                    <t t-set="submit_txt" t-value="'Pay Now'"/>
+                                    <t t-set="icon_class" t-value="'fa-lock'"/>
+                                    <t t-set="pms" t-value="tokens"/>
+                                    <t t-set="form_action" t-value="'/shop/payment/token'"/>
+                                </t>
+                            </div>
+
                            <div class="js_payment mb64 col-md-12 row" t-if="acquirers and website_sale_order.amount_total" id="payment_method">
                                <div class="col-lg-7 col-sm-8">
                                    <h4>Choose a payment acquirer</h4>