[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)

25 files changed, 190 insertions, 37 deletions

diff --git a/addons/payment/security/ir.model.access.csv b/addons/payment/security/ir.model.access.csv
index 2bfa46839a0..f1d86956349 100644
--- a/addons/payment/security/ir.model.access.csv
+++ b/addons/payment/security/ir.model.access.csv
@@ -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
\ No newline at end of file
diff --git a/addons/payment/static/src/js/payment_form.js b/addons/payment/static/src/js/payment_form.js
index ae2d44c1cb7..bf8f490a493 100644
--- a/addons/payment/static/src/js/payment_form.js
+++ b/addons/payment/static/src/js/payment_form.js
@@ -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();
diff --git a/addons/payment/views/payment_portal_templates.xml b/addons/payment/views/payment_portal_templates.xml
index 3c8a5e3f5d3..f599329e5e1 100644
--- a/addons/payment/views/payment_portal_templates.xml
+++ b/addons/payment/views/payment_portal_templates.xml
@@ -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>
diff --git a/addons/payment/views/payment_templates.xml b/addons/payment/views/payment_templates.xml
index ae9a1501632..57bdae3b1c0 100644
--- a/addons/payment/views/payment_templates.xml
+++ b/addons/payment/views/payment_templates.xml
@@ -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>
diff --git a/addons/payment_adyen/data/payment_acquirer_data.xml b/addons/payment_adyen/data/payment_acquirer_data.xml
index 44d986b8fee..f0314f9a6eb 100644
--- a/addons/payment_adyen/data/payment_acquirer_data.xml
+++ b/addons/payment_adyen/data/payment_acquirer_data.xml
@@ -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>
diff --git a/addons/payment_adyen/views/payment_adyen_templates.xml b/addons/payment_adyen/views/payment_adyen_templates.xml
index cdde7055be4..5422f2b352b 100644
--- a/addons/payment_adyen/views/payment_adyen_templates.xml
+++ b/addons/payment_adyen/views/payment_adyen_templates.xml
@@ -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"/>
diff --git a/addons/payment_authorize/data/payment_acquirer_data.xml b/addons/payment_authorize/data/payment_acquirer_data.xml
index de2c3a4eb45..a9f8ddbf968 100644
--- a/addons/payment_authorize/data/payment_acquirer_data.xml
+++ b/addons/payment_authorize/data/payment_acquirer_data.xml
@@ -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[
diff --git a/addons/payment_authorize/views/payment_authorize_templates.xml b/addons/payment_authorize/views/payment_authorize_templates.xml
index 0d201631d50..b4ea25275ee 100644
--- a/addons/payment_authorize/views/payment_authorize_templates.xml
+++ b/addons/payment_authorize/views/payment_authorize_templates.xml
@@ -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'/>
diff --git a/addons/payment_buckaroo/data/payment_acquirer_data.xml b/addons/payment_buckaroo/data/payment_acquirer_data.xml
index 73161cdcd58..8cb2d9492b9 100644
--- a/addons/payment_buckaroo/data/payment_acquirer_data.xml
+++ b/addons/payment_buckaroo/data/payment_acquirer_data.xml
@@ -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>
diff --git a/addons/payment_buckaroo/views/payment_buckaroo_templates.xml b/addons/payment_buckaroo/views/payment_buckaroo_templates.xml
index 51e05a7413f..cab44ed0f3f 100644
--- a/addons/payment_buckaroo/views/payment_buckaroo_templates.xml
+++ b/addons/payment_buckaroo/views/payment_buckaroo_templates.xml
@@ -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"/>
diff --git a/addons/payment_ogone/data/payment_acquirer_data.xml b/addons/payment_ogone/data/payment_acquirer_data.xml
index 35b4313b69f..e8a7388ec75 100644
--- a/addons/payment_ogone/data/payment_acquirer_data.xml
+++ b/addons/payment_ogone/data/payment_acquirer_data.xml
@@ -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[
diff --git a/addons/payment_ogone/views/payment_ogone_templates.xml b/addons/payment_ogone/views/payment_ogone_templates.xml
index 49c79723d20..a4a1154fc94 100644
--- a/addons/payment_ogone/views/payment_ogone_templates.xml
+++ b/addons/payment_ogone/views/payment_ogone_templates.xml
@@ -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'/>
diff --git a/addons/payment_paypal/data/payment_acquirer_data.xml b/addons/payment_paypal/data/payment_acquirer_data.xml
index de73e6105b5..5a3e12de18d 100644
--- a/addons/payment_paypal/data/payment_acquirer_data.xml
+++ b/addons/payment_paypal/data/payment_acquirer_data.xml
@@ -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>
diff --git a/addons/payment_paypal/views/payment_paypal_templates.xml b/addons/payment_paypal/views/payment_paypal_templates.xml
index 41af0c93a11..efab1c53de2 100644
--- a/addons/payment_paypal/views/payment_paypal_templates.xml
+++ b/addons/payment_paypal/views/payment_paypal_templates.xml
@@ -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"/>
diff --git a/addons/payment_payumoney/data/payment_acquirer_data.xml b/addons/payment_payumoney/data/payment_acquirer_data.xml
index e7f5c1c44c7..40ac7c07637 100644
--- a/addons/payment_payumoney/data/payment_acquirer_data.xml
+++ b/addons/payment_payumoney/data/payment_acquirer_data.xml
@@ -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>]]>
diff --git a/addons/payment_payumoney/views/payment_payumoney_templates.xml b/addons/payment_payumoney/views/payment_payumoney_templates.xml
index 6b5dd648b73..006af7508b4 100644
--- a/addons/payment_payumoney/views/payment_payumoney_templates.xml
+++ b/addons/payment_payumoney/views/payment_payumoney_templates.xml
@@ -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' />
diff --git a/addons/payment_sips/data/payment_acquirer_data.xml b/addons/payment_sips/data/payment_acquirer_data.xml
index dff9b3dcbf6..0491752f44e 100644
--- a/addons/payment_sips/data/payment_acquirer_data.xml
+++ b/addons/payment_sips/data/payment_acquirer_data.xml
@@ -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>
diff --git a/addons/payment_sips/views/payment_sips_templates.xml b/addons/payment_sips/views/payment_sips_templates.xml
index 3e4b0e7f87a..3a890d96df3 100644
--- a/addons/payment_sips/views/payment_sips_templates.xml
+++ b/addons/payment_sips/views/payment_sips_templates.xml
@@ -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"/>
diff --git a/addons/payment_stripe/data/payment_acquirer_data.xml b/addons/payment_stripe/data/payment_acquirer_data.xml
index 2613a31d4e2..8ee11dd70e5 100644
--- a/addons/payment_stripe/data/payment_acquirer_data.xml
+++ b/addons/payment_stripe/data/payment_acquirer_data.xml
@@ -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[
diff --git a/addons/payment_stripe/views/payment_stripe_templates.xml b/addons/payment_stripe/views/payment_stripe_templates.xml
index 9eb8b3b05a3..6c8b2d64cfd 100644
--- a/addons/payment_stripe/views/payment_stripe_templates.xml
+++ b/addons/payment_stripe/views/payment_stripe_templates.xml
@@ -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'/>
diff --git a/addons/payment_transfer/data/payment_acquirer_data.xml b/addons/payment_transfer/data/payment_acquirer_data.xml
index cce3869a8ed..f48a116881f 100644
--- a/addons/payment_transfer/data/payment_acquirer_data.xml
+++ b/addons/payment_transfer/data/payment_acquirer_data.xml
@@ -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[
diff --git a/addons/payment_transfer/views/payment_transfer_templates.xml b/addons/payment_transfer/views/payment_transfer_templates.xml
index 52d311d9eb4..83eb2332384 100644
--- a/addons/payment_transfer/views/payment_transfer_templates.xml
+++ b/addons/payment_transfer/views/payment_transfer_templates.xml
@@ -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>
diff --git a/addons/sale_payment/models/payment.py b/addons/sale_payment/models/payment.py
index 50bc52fa4e1..ec4cc6f1521 100644
--- a/addons/sale_payment/models/payment.py
+++ b/addons/sale_payment/models/payment.py
@@ -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
diff --git a/addons/website_sale/controllers/main.py b/addons/website_sale/controllers/main.py
index 98e271dfde1..567c875b12d 100644
--- a/addons/website_sale/controllers/main.py
+++ b/addons/website_sale/controllers/main.py
@@ -713,6 +713,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(
@@ -725,8 +748,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
@@ -813,6 +838,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()
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 58eb670c901..60d66e7ef03 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -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>