From 5ffce116a6f8d4775cffe4daef09674db6c159d0 Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Thu, 31 Dec 2020 09:12:58 +0000
Subject: [PATCH] [IMP] website_payment, *: new snippet make a donation

*=  website, website_sale, web_editor

This commit add a new snippet donation for the website builder.

PR-63133

task-2398403

Part-of: odoo/odoo#63133
---
 .../static/src/js/editor/snippets.options.js  |  12 +-
 .../static/src/scss/wysiwyg_snippets.scss     |   1 +
 addons/website/controllers/main.py            |   8 +
 .../src/img/snippets_thumbs/s_donation.svg    |  39 +++
 .../img/snippets_thumbs/s_donation_button.svg |  18 ++
 .../static/src/scss/primary_variables.scss    |  15 +
 addons/website/views/snippets/snippets.xml    |   6 +-
 addons/website_payment/__manifest__.py        |   7 +
 .../static/shapes/s_donation_gift.svg         |  87 +++++
 .../static/src/snippets/s_donation/000.js     | 114 +++++++
 .../static/src/snippets/s_donation/000.scss   |  56 ++++
 .../static/src/snippets/s_donation/000.xml    |  40 +++
 .../static/src/snippets/s_donation/options.js | 303 ++++++++++++++++++
 .../views/snippets/s_donation.xml             |  94 ++++++
 .../views/snippets/snippets.xml               |  17 +
 addons/website_sale/controllers/main.py       |   7 +
 16 files changed, 817 insertions(+), 7 deletions(-)
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_donation.svg
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_donation_button.svg
 create mode 100644 addons/website_payment/static/shapes/s_donation_gift.svg
 create mode 100644 addons/website_payment/static/src/snippets/s_donation/000.js
 create mode 100644 addons/website_payment/static/src/snippets/s_donation/000.scss
 create mode 100644 addons/website_payment/static/src/snippets/s_donation/000.xml
 create mode 100644 addons/website_payment/static/src/snippets/s_donation/options.js
 create mode 100644 addons/website_payment/views/snippets/s_donation.xml
 create mode 100644 addons/website_payment/views/snippets/snippets.xml

diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index 5d41c04cc4c..e05cd78553b 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -1956,11 +1956,11 @@ const ListUserValueWidget = UserValueWidget.extend({
     /**
      * @private
      * @param {string || integer} id
-     * @param {string} [text]
+     * @param {string} [value]
      * @param {Object} [recordData] key, values that will be added to the
      *     element's dataset
      */
-    _addItemToTable(id, text = _t("Item"), recordData) {
+    _addItemToTable(id, value = this.el.dataset.defaultValue || _t("Item"), recordData) {
         const trEl = document.createElement('tr');
         if (!this.el.dataset.unsortable) {
             const draggableEl = document.createElement('we-button');
@@ -1971,9 +1971,9 @@ const ListUserValueWidget = UserValueWidget.extend({
             trEl.appendChild(draggableTdEl);
         }
         const inputEl = document.createElement('input');
-        inputEl.type = 'text';
-        if (text) {
-            inputEl.value = text;
+        inputEl.type = this.el.dataset.inputType || 'text';
+        if (value) {
+            inputEl.value = value;
         }
         if (id) {
             inputEl.name = id;
@@ -2033,7 +2033,7 @@ const ListUserValueWidget = UserValueWidget.extend({
      * @private
      */
     _notifyCurrentState() {
-        const values = [...this.listTable.querySelectorAll('input')].map(el => {
+        const values = [...this.listTable.querySelectorAll('.o_we_list_record_name input')].map(el => {
             const id = this.isCustom ? el.value : el.name;
             const idInt = parseInt(id);
             return Object.assign({
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index d71b02d1ea0..59dcd9af1f0 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -1360,6 +1360,7 @@ body.editor_enable.editor_has_snippets {
                 margin-bottom: $o-we-sidebar-content-field-spacing / 2;
 
                 table {
+                    @include o-input-number-no-arrows();
                     table-layout: auto;
                     width: 100%;
 
diff --git a/addons/website/controllers/main.py b/addons/website/controllers/main.py
index 0a940466aa8..29b7aaf778c 100644
--- a/addons/website/controllers/main.py
+++ b/addons/website/controllers/main.py
@@ -340,6 +340,14 @@ class Website(Home):
             t['numOfElFetch'] = attribs.get('data-number-of-elements-fetch')
         return templates
 
+    @http.route('/website/get_current_currency', type='json', auth="public", website=True)
+    def get_current_currency(self, **kwargs):
+        return {
+            'id': request.website.company_id.currency_id.id,
+            'symbol': request.website.company_id.currency_id.symbol,
+            'position': request.website.company_id.currency_id.position,
+        }
+
     # ------------------------------------------------------
     # Edit
     # ------------------------------------------------------
diff --git a/addons/website/static/src/img/snippets_thumbs/s_donation.svg b/addons/website/static/src/img/snippets_thumbs/s_donation.svg
new file mode 100644
index 00000000000..8995ab98e44
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_donation.svg
@@ -0,0 +1,39 @@
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="82px" height="60px" viewBox="0 0 82 60" enable-background="new 0 0 82 60" xml:space="preserve">
+  <g>
+    <rect fill="none" width="82" height="60"/>
+    <g>
+      <g transform="translate(6 17)">
+        <polygon fill="#C7C7C7" points="27.15,-0.5 27.15,1.5 4.15,1.5 4.15,-0.5"/>
+        <path fill="#595959" d="M27.15,5.5v1h-23v-1H27.15z M32.15,3.5v1h-28v-1H32.15z"/>
+          <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-348.9588" y1="237.3286" x2="-348.9588" y2="236.3286" gradientTransform="matrix(25.5 0 0 -3.5 8915.5996 843.4)">
+          <stop  offset="0" style="stop-color:#00CECC"/>
+          <stop  offset="1" style="stop-color:#00A09D"/>
+        </linearGradient>
+        <path fill="none" stroke="url(#SVGID_1_)" stroke-width="0.5" d="M11.9,12.75v3.5H4.4v-3.5H11.9z M20.9,12.75v3.5h-7.5v-3.5H20.9
+          z M29.9,12.75v3.5h-7.5v-3.5H29.9z"/>
+          <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-341.9382" y1="259.7233" x2="-340.9382" y2="259.6367" gradientTransform="matrix(17 0 0 -5 5817.1001 1322.4)">
+          <stop  offset="0" style="stop-color:#00A09D"/>
+          <stop  offset="1" style="stop-color:#00E2FF"/>
+        </linearGradient>
+        <rect x="4.15" y="21.5" fill="url(#SVGID_2_)" width="17" height="5"/>
+      </g>
+      <g transform="translate(50 16)">
+        <polyline fill="none" stroke="#C7C7C7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" points="
+          19.51,13.722 19.51,25.581 0.79,25.581 0.79,13.722"/>
+          <rect x="-1.55" y="7.792" fill="none" stroke="#C7C7C7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" width="23.4" height="5.929"/>
+          <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="-31.95" y1="301.7421" x2="-31.95" y2="300.7921" gradientTransform="matrix(1 0 0 -20.912 42.1 6316.312)">
+          <stop  offset="0" style="stop-color:#00CECC"/>
+          <stop  offset="1" style="stop-color:#00A09D"/>
+        </linearGradient>
+          <line fill="none" stroke="url(#SVGID_3_)" stroke-linecap="square" stroke-linejoin="round" x1="10.15" y1="25.625" x2="10.15" y2="6.804"/>
+          <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="-387.3105" y1="273.8488" x2="-387.3105" y2="272.8988" gradientTransform="matrix(18.2 0 0 -6.588 7059.2002 1804.8259)">
+          <stop  offset="0" style="stop-color:#00CECC"/>
+          <stop  offset="1" style="stop-color:#00A09D"/>
+        </linearGradient>
+        <path fill="none" stroke="url(#SVGID_4_)" stroke-linecap="round" stroke-linejoin="round" d="M4.885,0.875
+          c4.095,0,5.265,5.929,5.265,5.929H4.885C3.27,6.804,1.96,5.477,1.96,3.84C1.96,2.202,3.27,0.875,4.885,0.875z M15.415,0.875
+          c1.616,0,2.925,1.328,2.925,2.965c0,1.638-1.309,2.965-2.925,2.965l0,0H10.15C10.15,6.804,11.32,0.875,15.415,0.875z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/addons/website/static/src/img/snippets_thumbs/s_donation_button.svg b/addons/website/static/src/img/snippets_thumbs/s_donation_button.svg
new file mode 100644
index 00000000000..f30edf1b8cb
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_donation_button.svg
@@ -0,0 +1,18 @@
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+    width="82px" height="60px" viewBox="0 0 82 60" enable-background="new 0 0 82 60" xml:space="preserve">
+<g>
+    <rect fill="none" width="82" height="60"/>
+    <g>
+        <g transform="translate(6 17)">
+                <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-341.4267" y1="261.9717" x2="-338.8032" y2="261.7448" gradientTransform="matrix(17 0 0 -5 5817.1001 1322.4)">
+                <stop  offset="0" style="stop-color:#00A09D"/>
+                <stop  offset="1" style="stop-color:#00C0D9"/>
+            </linearGradient>
+            <rect x="12.846" y="6.55" fill="url(#SVGID_1_)" width="44.6" height="13.118"/>
+            <path fill="#FFFFFF" d="M52.25,12.25v1.5H28.188v-1.5H52.25z"/>
+        </g>
+    </g>
+</g>
+<path fill="#FFFFFF" d="M29.36,27.145c-0.865-0.817-3.05-0.317-3.05,1.043v0.005c0-1.36-2.185-1.859-3.05-1.043
+    c-0.866,0.818-0.842,2.208,0,3.05l3.05,3.05v-0.005l3.05-3.05C30.203,29.353,30.226,27.963,29.36,27.145z"/>
+</svg>
diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss
index 2b85ef6056b..dba19881c71 100644
--- a/addons/website/static/src/scss/primary_variables.scss
+++ b/addons/website/static/src/scss/primary_variables.scss
@@ -2057,3 +2057,18 @@ $o-theme-font-configs: (
         background-image: $-gradient;
     }
 };
+
+@mixin o-input-number-no-arrows() {
+    // Remove arrows/spinners from input type number
+    // => Chrome, Safari, Edge, Opera
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+
+    // => Firefox
+    input[type=number] {
+        -moz-appearance: textfield;
+    }
+};
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index b833c016c45..7b98ce1e6ff 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -123,6 +123,7 @@
                     <t id="mail_group_hook"/>
                     <t id="twitter_favorite_tweets_hook"/>
                     <t t-snippet="website.s_embed_code" t-thumbnail="/website/static/src/img/snippets_thumbs/s_embed_code.svg"/>
+                    <t id="snippet_donation_hook"/>
                 </div>
             </div>
 
@@ -152,6 +153,7 @@
                         <keywords>cite</keywords>
                     </t>
                     <t id="event_speaker_bio_hook"/>
+                    <t id="snippet_donation_button_hook"/>
                 </div>
             </div>
         </t>
@@ -167,9 +169,11 @@
         <t id="newsletter_popup_snippet" t-install="mass_mailing" string="Newsletter Popup" t-thumbnail="/website/static/src/img/snippets_thumbs/newsletter_subscribe_popup.svg"/>
         <t t-install="website_mail_group" string="Discussion Group" t-thumbnail="/website/static/src/img/snippets_thumbs/s_group.svg"/>
         <t t-install="website_twitter" string="Twitter Scroller" t-thumbnail="/website/static/src/img/snippets_thumbs/s_twitter_scroll.svg"/>
+        <t t-install="website_payment" string="Donation" t-thumbnail="/website/static/src/img/snippets_thumbs/s_donation.svg"/>
     </xpath>
     <xpath expr="//div[@id='snippet_content']//t[@t-snippet][last()]" position="after">
         <t id="newsletter_snippet" t-install="mass_mailing" string="Newsletter" t-thumbnail="/website/static/src/img/snippets_thumbs/s_newsletter_subscribe_form.svg"/>
+        <t t-install="website_payment" string="Donation Button" t-thumbnail="/website/static/src/img/snippets_thumbs/s_donation_button.svg"/>
     </xpath>
 </template>
 
@@ -525,7 +529,7 @@
         t-att-data-selector="so_snippet_addition_selector"
         data-drop-in=":not(p).oe_structure:not(.oe_structure_solo), :not(.o_mega_menu):not(p)[data-oe-type=html], :not(p).oe_structure.oe_structure_solo:not(:has(> section, > div))"/>
 
-    <t t-set="so_content_addition_selector" t-translation="off">blockquote, .s_card:not(.s_timeline_card), .s_alert, .o_facebook_page, .s_share, .s_rating, .s_hr, .s_google_map, .s_map, .s_countdown, .s_chart, .s_text_highlight, .s_progress_bar, .s_badge, .s_embed_code</t>
+    <t t-set="so_content_addition_selector" t-translation="off">blockquote, .s_card:not(.s_timeline_card), .s_alert, .o_facebook_page, .s_share, .s_rating, .s_hr, .s_google_map, .s_map, .s_countdown, .s_chart, .s_text_highlight, .s_progress_bar, .s_badge, .s_embed_code, .s_donation</t>
     <div id="so_content_addition"
         t-att-data-selector="so_content_addition_selector"
         t-attf-data-drop-near="p, h1, h2, h3, ul, ol, .row > div > img, #{so_content_addition_selector}"
diff --git a/addons/website_payment/__manifest__.py b/addons/website_payment/__manifest__.py
index 33ed22139b9..731f83ef34b 100644
--- a/addons/website_payment/__manifest__.py
+++ b/addons/website_payment/__manifest__.py
@@ -15,7 +15,14 @@ This is a bridge module that adds multi-website support for payment acquirers.
     ],
     'data': [
         'views/payment_acquirer.xml',
+        'views/snippets/snippets.xml',
+        'views/snippets/s_donation.xml',
     ],
     'auto_install': True,
+    'assets': {
+        'website.assets_wysiwyg': [
+            'website_payment/static/src/snippets/s_donation/options.js',
+        ],
+    },
     'license': 'LGPL-3',
 }
diff --git a/addons/website_payment/static/shapes/s_donation_gift.svg b/addons/website_payment/static/shapes/s_donation_gift.svg
new file mode 100644
index 00000000000..6a69c3af65a
--- /dev/null
+++ b/addons/website_payment/static/shapes/s_donation_gift.svg
@@ -0,0 +1,87 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink" id="e1a9485c-0f43-4303-9e0d-5e4a75181bc4" data-name="Layer 1" width="858.07" height="804.61" viewBox="0 0 858.07 804.61">
+  <defs>
+    <linearGradient id="fa2440bd-da04-40b7-bd3b-ddfb35b0a42b" x1="592.9" y1="385.11" x2="592.9" y2="236.35" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="gray" stop-opacity="0.25"/>
+      <stop offset="0.54" stop-color="gray" stop-opacity="0.12"/>
+      <stop offset="1" stop-color="gray" stop-opacity="0.1"/>
+    </linearGradient>
+    <linearGradient id="07fe1e9f-5680-428a-971a-ff84304916dd" x1="420.04" y1="804.61" x2="420.04" y2="320.21" xlink:href="#fa2440bd-da04-40b7-bd3b-ddfb35b0a42b"/>
+    <linearGradient id="00ef2338-96af-4b11-80f8-5a4c3164adbb" x1="811.83" y1="471.54" x2="811.83" y2="185.81" xlink:href="#fa2440bd-da04-40b7-bd3b-ddfb35b0a42b"/>
+  </defs>
+  <title>gift1</title>
+  <g opacity="0.5">
+    <rect x="107.3" y="37.85" width="3.33" height="18.87" fill="#47e6b1"/>
+    <rect x="276.52" y="77.53" width="3.33" height="18.87" transform="translate(195.93 -230.9) rotate(90)" fill="#47e6b1"/>
+  </g>
+  <g opacity="0.5">
+    <rect x="811.66" y="769.53" width="3.33" height="18.87" fill="#47e6b1"/>
+    <rect x="980.89" y="809.21" width="3.33" height="18.87" transform="translate(1631.97 -203.59) rotate(90)" fill="#47e6b1"/>
+  </g>
+  <g opacity="0.5">
+    <rect x="812.98" y="215.34" width="3.33" height="18.87" fill="#47e6b1"/>
+    <rect x="982.2" y="255.02" width="3.33" height="18.87" transform="translate(1079.1 -759.09) rotate(90)" fill="#47e6b1"/>
+  </g>
+  <g opacity="0.5">
+    <rect x="846.98" y="45.34" width="3.33" height="18.87" fill="#47e6b1"/>
+    <rect x="1016.2" y="85.02" width="3.33" height="18.87" transform="translate(943.1 -963.09) rotate(90)" fill="#47e6b1"/>
+  </g>
+  <g opacity="0.5">
+    <rect x="267.08" y="36.27" width="3.33" height="18.87" fill="#47e6b1"/>
+    <rect x="436.31" y="75.96" width="3.33" height="18.87" transform="translate(354.13 -392.27) rotate(90)" fill="#47e6b1"/>
+  </g>
+  <path d="M230.44,357.88a4.08,4.08,0,0,1-2.27-4.93,2,2,0,0,0,.09-.45h0a2,2,0,0,0-3.67-1.36h0a2,2,0,0,0-.23.4,4.08,4.08,0,0,1-4.93,2.27,2,2,0,0,0-.45-.09h0a2,2,0,0,0-1.36,3.67h0a2,2,0,0,0,.4.23,4.08,4.08,0,0,1,2.27,4.93,2,2,0,0,0-.09.45h0a2,2,0,0,0,3.67,1.36h0a2,2,0,0,0,.23-.4,4.08,4.08,0,0,1,4.93-2.27,2,2,0,0,0,.45.09h0a2,2,0,0,0,1.36-3.67h0A2,2,0,0,0,230.44,357.88Z" transform="translate(-169.23 -39.68)" fill="#4d8af0" opacity="0.5"/>
+  <path d="M291.92,736.22a4.08,4.08,0,0,1-2.27-4.93,2,2,0,0,0,.09-.45h0a2,2,0,0,0-3.67-1.36h0a2,2,0,0,0-.23.4,4.08,4.08,0,0,1-4.93,2.27,2,2,0,0,0-.45-.09h0a2,2,0,0,0-1.36,3.67h0a2,2,0,0,0,.4.23,4.08,4.08,0,0,1,2.27,4.93,2,2,0,0,0-.09.45h0a2,2,0,0,0,3.67,1.36h0a2,2,0,0,0,.23-.4,4.08,4.08,0,0,1,4.93-2.27,2,2,0,0,0,.45.09h0a2,2,0,0,0,1.36-3.67h0A2,2,0,0,0,291.92,736.22Z" transform="translate(-169.23 -39.68)" fill="#4d8af0" opacity="0.5"/>
+  <path d="M850.92,235.22a4.08,4.08,0,0,1-2.27-4.93,2,2,0,0,0,.09-.45h0a2,2,0,0,0-3.67-1.36h0a2,2,0,0,0-.23.4,4.08,4.08,0,0,1-4.93,2.27,2,2,0,0,0-.45-.09h0a2,2,0,0,0-1.36,3.67h0a2,2,0,0,0,.4.23,4.08,4.08,0,0,1,2.27,4.93,2,2,0,0,0-.09.45h0a2,2,0,0,0,3.67,1.36h0a2,2,0,0,0,.23-.4,4.08,4.08,0,0,1,4.93-2.27,2,2,0,0,0,.45.09h0a2,2,0,0,0,1.36-3.67h0A2,2,0,0,0,850.92,235.22Z" transform="translate(-169.23 -39.68)" fill="#4d8af0" opacity="0.5"/>
+  <path d="M843.47,325.61a4.08,4.08,0,0,1-2.27-4.93,2,2,0,0,0,.09-.45h0a2,2,0,0,0-3.67-1.36h0a2,2,0,0,0-.23.4,4.08,4.08,0,0,1-4.93,2.27,2,2,0,0,0-.45-.09h0a2,2,0,0,0-1.36,3.67h0a2,2,0,0,0,.4.23,4.08,4.08,0,0,1,2.27,4.93,2,2,0,0,0-.09.45h0a2,2,0,0,0,3.67,1.36h0a2,2,0,0,0,.23-.4,4.08,4.08,0,0,1,4.93-2.27,2,2,0,0,0,.45.09h0a2,2,0,0,0,1.36-3.67h0A2,2,0,0,0,843.47,325.61Z" transform="translate(-169.23 -39.68)" fill="#4d8af0" opacity="0.5"/>
+  <path d="M844,47.24a4.08,4.08,0,0,1-2.27-4.93,2,2,0,0,0,.09-.45h0a2,2,0,0,0-3.67-1.36h0a2,2,0,0,0-.23.4A4.08,4.08,0,0,1,833,43.18a2,2,0,0,0-.45-.09h0a2,2,0,0,0-1.36,3.67h0a2,2,0,0,0,.4.23,4.08,4.08,0,0,1,2.27,4.93,2,2,0,0,0-.09.45h0a2,2,0,0,0,3.67,1.36h0a2,2,0,0,0,.23-.4A4.08,4.08,0,0,1,842.56,51a2,2,0,0,0,.45.09h0a2,2,0,0,0,1.36-3.67h0A2,2,0,0,0,844,47.24Z" transform="translate(-169.23 -39.68)" fill="#4d8af0" opacity="0.5"/>
+  <path d="M1012.16,504.28a4.08,4.08,0,0,1-2.27-4.93,2,2,0,0,0,.09-.45h0a2,2,0,0,0-3.67-1.36h0a2,2,0,0,0-.23.4,4.08,4.08,0,0,1-4.93,2.27,2,2,0,0,0-.45-.09h0a2,2,0,0,0-1.36,3.67h0a2,2,0,0,0,.4.23A4.08,4.08,0,0,1,1002,509a2,2,0,0,0-.09.45h0a2,2,0,0,0,3.67,1.36h0a2,2,0,0,0,.23-.4,4.08,4.08,0,0,1,4.93-2.27,2,2,0,0,0,.45.09h0a2,2,0,0,0,1.36-3.67h0A2,2,0,0,0,1012.16,504.28Z" transform="translate(-169.23 -39.68)" fill="#4d8af0" opacity="0.5"/>
+  <circle cx="61.77" cy="166.12" r="6.66" fill="#f55f44" opacity="0.5"/>
+  <circle cx="12.94" cy="644.43" r="6.66" fill="#f55f44" opacity="0.5"/>
+  <circle cx="439.66" cy="45.68" r="6.66" fill="#f55f44" opacity="0.5"/>
+  <circle cx="506.66" cy="172.68" r="6.66" fill="#f55f44" opacity="0.5"/>
+  <circle cx="6.66" cy="478.68" r="6.66" fill="#f55f44" opacity="0.5"/>
+  <circle cx="267.5" cy="155.34" r="6.66" fill="#47e6b1" opacity="0.5"/>
+  <circle cx="725.6" cy="597.75" r="6.66" fill="#f55f44" opacity="0.5"/>
+  <g opacity="0.5">
+    <path d="M713.77,253.75c-12.9-12.94-31.71-18.09-53-14.5-19.89,3.36-39.79,14.13-56,30.33a65.49,65.49,0,0,0-11.72,16.08A65.64,65.64,0,0,0,581.43,269h0c-16-16.47-35.67-27.58-55.5-31.29-21.19-4-40.08.86-53.2,13.58S454.18,282.74,457.48,304C460.56,324,471,344,487,360.49,520.58,395.13,587.59,381.6,590.43,381l.84-.17,2.58.59c2.83.64,69.59,15.32,103.75-18.73,16.25-16.19,27.08-36.06,30.51-55.94C731.76,285.52,726.67,266.69,713.77,253.75ZM579.08,361c-16.19,2.18-56.55,5.14-76.59-15.53-12.88-13.29-21.31-29.19-23.71-44.75-2.2-14.2,1-26.27,8.94-34a29.93,29.93,0,0,1,10.92-6.69c6.68-2.37,14.63-2.81,23.32-1.18,15.48,2.89,31.1,11.81,44,25.1C586,304.67,581.76,344.92,579.08,361Zm127.78-57.93c-2.67,15.52-11.37,31.26-24.48,44.33-20.4,20.33-60.7,16.67-76.84,14.21-2.41-16.16-5.94-56.47,14.45-76.8,13.11-13.07,28.88-21.71,44.41-24.34,8.72-1.47,16.66-.9,23.3,1.58a29.93,29.93,0,0,1,10.8,6.88C706.33,276.82,709.3,288.94,706.86,303.09Z" transform="translate(-169.23 -39.68)" fill="url(#fa2440bd-da04-40b7-bd3b-ddfb35b0a42b)"/>
+  </g>
+  <path d="M596.91,376.65,590.53,378c-2.71.57-66.83,13.51-99-19.63-15.28-15.76-25.31-34.95-28.26-54-3.15-20.38,2-38.31,14.58-50.48s30.64-16.78,50.91-13c19,3.55,37.84,14.18,53.11,29.94h0c32.12,33.15,17.18,96.83,16.52,99.52ZM502.7,262.26a28.64,28.64,0,0,0-10.45,6.4c-7.62,7.38-10.66,18.93-8.56,32.52,2.3,14.89,10.36,30.1,22.69,42.82,19.17,19.78,57.79,17,73.28,14.86,2.57-15.41,6.61-53.93-12.56-73.71h0c-12.33-12.72-27.28-21.25-42.09-24C516.71,259.57,509.1,260,502.7,262.26Z" transform="translate(-169.23 -39.68)" fill="#3AADAA"/>
+  <path d="M587.45,376.93,586,370.57c-.61-2.71-14.45-66.64,18.24-99.22h0c15.54-15.5,34.59-25.8,53.62-29,20.33-3.44,38.33,1.49,50.68,13.87s17.21,30.4,13.71,50.72c-3.28,19-13.65,38-29.19,53.53C660.39,393,596.51,379,593.8,378.38Zm96.17-112.75c-6.36-2.38-14-2.93-22.29-1.52-14.86,2.51-30,10.78-42.5,23.29h0c-19.51,19.45-16.14,58-13.83,73.49,15.45,2.35,54,5.86,73.53-13.6,12.55-12.51,20.87-27.57,23.43-42.42,2.34-13.55-.5-25.15-8-32.66A28.64,28.64,0,0,0,683.61,264.18Z" transform="translate(-169.23 -39.68)" fill="#3AADAA"/>
+  <g opacity="0.5">
+    <polygon points="730.87 320.21 109.21 320.21 109.21 444.6 141.51 444.6 141.51 804.61 698.57 804.61 698.57 444.6 730.87 444.6 730.87 320.21" fill="url(#07fe1e9f-5680-428a-971a-ff84304916dd)"/>
+  </g>
+  <rect x="148.56" y="357.82" width="542.96" height="440.67" fill="#f5f5f5"/>
+  <rect x="368.89" y="436.51" width="102.3" height="361.98" fill="#3AADAA"/>
+  <rect x="148.56" y="334.21" width="542.96" height="110.17" opacity="0.1"/>
+  <rect x="117.08" y="326.34" width="605.91" height="110.17" fill="#f5f5f5"/>
+  <rect x="368.89" y="326.34" width="102.3" height="110.17" fill="#3AADAA"/>
+  <path d="M951.92,375.92C950,370.37,929,386,929,386l-4.84-.29-9.31-8.62,6.5-6.5-54.59-46.79a13.77,13.77,0,0,0-10.67-3.21l-45.37,5.67c-.19-2.6-1.8-5.69-4.06-8.84-4.65-7.63-14.45-16.26-18.08-19.33l-5.53-37.31,4.7-7.05a23.73,23.73,0,0,1-2.56-.86l1-1.49-.37-.1.47-.54-.06,0L798,237.16a5.14,5.14,0,0,0-.39-7.12l-26.21-19.88a14.45,14.45,0,0,0,1.12-6c.2-4-1.56-8-7.5-10.94a57.9,57.9,0,0,0-11.48-4.05,37.67,37.67,0,0,0-19.85.29l-.34-.4c-8.07-9.22-18.64,4-19.05,4.55l-41.34,46A8.4,8.4,0,0,0,675,250.81l21.88,16.41-.07.14,1.24.93c-.94,1.84-2.19,3.07-3.86,3.25l3.35,1.68a3.86,3.86,0,0,1-1.78.67l15.34,7.67c0,8,.82,44.47,13.79,62.39A33.13,33.13,0,0,0,729.6,350s1.1-.6,3.12-1.57l2.32,4.63a27.11,27.11,0,0,0,28.09,14.72l72-10.29-.76,2.29.41-.06-23.34,70,3.86,1.29-.07.14.54.23-4.85,9.17-15.28,11.75S840.3,474.69,845,471.16s-16.46-18.81-16.46-18.81l-1.18-4.7,5.14-10.85,4.31,1.44L871.42,369h0l1.18-2.35L896,395.94l6.6-6.6.71.72.06-.06,9.15,9.26,6.63,18.1S953.87,381.46,951.92,375.92ZM770.24,241.31l-.46-.53a43.89,43.89,0,0,1-13.23,10.58v-3.85l.26-.23v-1.67A25.4,25.4,0,0,0,764,219.82l15.19,11.69Zm-51.61-43.4-.37-.37.37.36Zm-12.15,24.48q-.15,1.82-.12,3.68a38.28,38.28,0,0,0,.3,5.37c.78,6.22,3,11.3,7.6,13.72,4,2.1,6.63,2,8.31.55l.18.16a18,18,0,0,0,1.86,7,74,74,0,0,1-24.17-9.73s0,.31.06.87l-6.29-6.29Z" transform="translate(-169.23 -39.68)" fill="url(#00ef2338-96af-4b11-80f8-5a4c3164adbb)"/>
+  <polygon points="651.99 378.3 641.71 397.71 657.69 404.56 667.97 382.87 651.99 378.3" fill="#fda57d"/>
+  <path d="M826.92,444.24l1.14,4.57s20.55,14.84,16,18.27-48-18.27-48-18.27l14.84-11.42Z" transform="translate(-169.23 -39.68)" fill="#333"/>
+  <polygon points="666.87 384.88 650.71 379.49 645.9 388.57 661.88 395.43 666.87 384.88" opacity="0.1"/>
+  <polygon points="725 341.94 740.43 357.56 751.76 344.37 734.15 328.06 725 341.94" fill="#fda57d"/>
+  <polygon points="734.78 328.82 725.63 342.7 731.48 348.63 743.35 336.76 734.78 328.82" opacity="0.1"/>
+  <path d="M921,384.05l4.7.28s20.32-15.15,22.22-9.77-31.8,40.27-31.8,40.27l-6.44-17.58Z" transform="translate(-169.23 -39.68)" fill="#333"/>
+  <path d="M774.66,267.22l23.72-27.44a5,5,0,0,0-.38-6.91l-51.61-39.14-6.28,9.78,40,30.79-17,18.62Z" transform="translate(-169.23 -39.68)" fill="#fda57d"/>
+  <path d="M771.94,243.31l-8.3,9.1,11.53,14.31L787.06,253A34.67,34.67,0,0,1,771.94,243.31Z" transform="translate(-169.23 -39.68)" opacity="0.1"/>
+  <path d="M705.78,273.18,678.93,253a8.16,8.16,0,0,1-2-10.87l40.18-44.71,8.22,8.22-27.75,34.64L714,256.75Z" transform="translate(-169.23 -39.68)" fill="#fda57d"/>
+  <path d="M700.12,269.13l4.39,3.3L712.73,256l-10.32-10.32C702.63,249.18,703.25,262.76,700.12,269.13Z" transform="translate(-169.23 -39.68)" opacity="0.1"/>
+  <polygon points="666.87 313.25 642.22 387.19 666.87 395.41 707.95 313.25 675.09 305.04 666.87 313.25" fill="#4d8af0"/>
+  <polygon points="665.73 315.53 664.5 319.23 690.38 315.53 700.49 328.17 706.81 315.53 673.94 307.32 665.73 315.53" opacity="0.1"/>
+  <path d="M717.07,197.51s10.53-13.57,18.52-4.44S723,203.34,723,203.34Z" transform="translate(-169.23 -39.68)" fill="#fda57d"/>
+  <path d="M729.29,336.5l7.94,15.89a26.34,26.34,0,0,0,27.28,14.29l96.23-13.75L893.61,394l24.65-24.65-53-45.45a13.37,13.37,0,0,0-10.36-3.12Z" transform="translate(-169.23 -39.68)" fill="#4d8af0"/>
+  <path d="M705.14,247.87s2.16,26.68-6.05,27.6l16.43,8.22s-.91,48.38,16.43,65.73c0,0,32-17.34,65.73-16.43s-8.22-32.86-8.22-32.86l-5.55-37.4,4.57-6.85a34.33,34.33,0,0,1-16-10.28h0c-4.57,5.71-15,13.45-24.12,13.45h-3.93c-13.53,0-27.92-2.73-39.32-10Z" transform="translate(-169.23 -39.68)" opacity="0.1"/>
+  <path d="M703.62,245.59s2.16,26.68-6.05,27.6L714,281.4s-.91,48.38,16.43,65.73c0,0,32-17.34,65.73-16.43s-8.22-32.86-8.22-32.86l-5.55-37.4,4.57-6.85a34.33,34.33,0,0,1-16-10.28h0c-4.57,5.71-15,13.45-24.12,13.45h-3.93a74.73,74.73,0,0,1-39.32-11.17Z" transform="translate(-169.23 -39.68)" fill="#3ad29f"/>
+  <path d="M725.26,238.07v9.17a17.53,17.53,0,0,0,5.13,12.39l19.51,19.51,6.5-13a16.29,16.29,0,0,0,1.72-7.29v-20.8Z" transform="translate(-169.23 -39.68)" fill="#fda57d"/>
+  <path d="M725.51,248.63c0,.34,0,.67,0,1a24.64,24.64,0,0,0,32.83,0V239.46H725.51Z" transform="translate(-169.23 -39.68)" opacity="0.1"/>
+  <circle cx="572.46" cy="190.17" r="24.65" fill="#fda57d"/>
+  <path d="M725.26,222.9h41.08s16.43-16.43,0-24.65a56.24,56.24,0,0,0-11.15-3.94c-25-6.34-48.74,14.33-45.53,39.91.76,6,2.93,11,7.38,13.32C734.39,256.68,725.26,222.9,725.26,222.9Z" transform="translate(-169.23 -39.68)" opacity="0.1"/>
+  <path d="M725.26,221.76h41.08s16.43-16.43,0-24.65a56.24,56.24,0,0,0-11.15-3.94c-25-6.34-48.74,14.33-45.53,39.91.76,6,2.93,11,7.38,13.32C734.39,255.54,725.26,221.76,725.26,221.76Z" transform="translate(-169.23 -39.68)" fill="#333"/>
+  <ellipse cx="557.23" cy="190.49" rx="2.28" ry="4" fill="#fda57d"/>
+  <polygon points="544.67 241.3 545.81 237.87 549.23 240.16 544.67 241.3" opacity="0.1"/>
+  <path d="M788,297.85s-12.43,6-15.86,11.67" transform="translate(-169.23 -39.68)" opacity="0.1"/>
+  <polygon points="613.17 220.75 612.03 224.17 609.74 220.75 613.17 220.75" opacity="0.1"/>
+  <path d="M725.26,221.76h41.08s16.43-16.43,0-24.65a56.24,56.24,0,0,0-11.15-3.94c-25-6.34-48.74,14.33-45.53,39.91.76,6,2.93,11,7.38,13.32C734.39,255.54,725.26,221.76,725.26,221.76Z" transform="translate(-169.23 -39.68)" fill="#333"/>
+  <script xmlns=""/>
+</svg>
diff --git a/addons/website_payment/static/src/snippets/s_donation/000.js b/addons/website_payment/static/src/snippets/s_donation/000.js
new file mode 100644
index 00000000000..067d3f68aff
--- /dev/null
+++ b/addons/website_payment/static/src/snippets/s_donation/000.js
@@ -0,0 +1,114 @@
+/** @odoo-module **/
+
+import {_t} from 'web.core';
+import publicWidget from 'web.public.widget';
+
+publicWidget.registry.DonationSnippet = publicWidget.Widget.extend({
+    selector: '.s_donation',
+    disabledInEditableMode: false,
+    events: {
+        'click .s_donation_btn': '_onClickPrefilledButton',
+        'input #s_donation_range_slider': '_onInputRangeSlider',
+    },
+
+    /**
+     * @override
+     */
+    async start() {
+        await this._super(...arguments);
+        this.$rangeSlider = this.$('#s_donation_range_slider');
+        if (this.$rangeSlider.length) {
+            this.$rangeSlider.val(this.$target[0].dataset.defaultAmount);
+            this._setBubble(this.$rangeSlider);
+        }
+        await this._displayCurrencies();
+    },
+    /**
+     * @override
+     */
+    destroy() {
+        this.$target.find('.s_donation_currency').remove();
+        this._deselectPrefilledButtons();
+        this._super(...arguments);
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _deselectPrefilledButtons() {
+        this.$('.s_donation_btn').removeClass('active');
+    },
+    /**
+     * @private
+     * @param {jQuery} $range
+     */
+    _setBubble($range) {
+        const $bubble = this.$('.s_range_bubble');
+        const val = $range.val();
+        const min = $range[0].min || 0;
+        const max = $range[0].max || 100;
+        const newVal = Number(((val - min) * 100) / (max - min));
+        const tipOffsetLow = 8 - (newVal * 0.16); // the range thumb size is 16px*16px. The '8' and the '0.16' are related to that 16px (50% and 1% of 16px)
+        $bubble.contents().filter(function () {
+            return this.nodeType === 3;
+        }).replaceWith(val);
+
+        // Sorta magic numbers based on size of the native UI thumb (source: https://css-tricks.com/value-bubbles-for-range-inputs/)
+        $bubble[0].style.left = `calc(${newVal}% + (${tipOffsetLow}px))`;
+    },
+    /**
+     * @private
+     */
+    _displayCurrencies() {
+        return this._rpc({
+            route: '/website/get_current_currency',
+        }).then((result) => {
+            this.currency = result;
+            this.$('.s_donation_currency').remove();
+            const $prefilledButtons = this.$('.s_donation_btn, .s_range_bubble');
+            _.each($prefilledButtons, button => {
+                const before = result.position === "before";
+                const $currencySymbol = document.createElement('span');
+                $currencySymbol.innerText = result.symbol;
+                $currencySymbol.classList.add('s_donation_currency', before ? "pr-1" : "pl-1");
+                if (before) {
+                    $(button).prepend($currencySymbol);
+                } else {
+                    $(button).append($currencySymbol);
+                }
+            });
+        });
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _onClickPrefilledButton(ev) {
+        const $button = $(ev.currentTarget);
+        this._deselectPrefilledButtons();
+        $button.addClass('active');
+        if (this.$rangeSlider.length) {
+            this.$rangeSlider.val($button[0].dataset.donationValue);
+            this._setBubble(this.$rangeSlider);
+        }
+    },
+    /**
+     * @private
+     */
+    _onInputRangeSlider(ev) {
+        this._deselectPrefilledButtons();
+        this._setBubble($(ev.currentTarget));
+    },
+});
+
+export default {
+    DonationSnippet: publicWidget.registry.DonationSnippet,
+};
diff --git a/addons/website_payment/static/src/snippets/s_donation/000.scss b/addons/website_payment/static/src/snippets/s_donation/000.scss
new file mode 100644
index 00000000000..2fde7bb4830
--- /dev/null
+++ b/addons/website_payment/static/src/snippets/s_donation/000.scss
@@ -0,0 +1,56 @@
+.s_donation:not([data-vcss]) {
+    @include o-input-number-no-arrows();
+
+    .s_donation_btn {
+        transition: background 0.2s;
+
+        &:focus {
+            box-shadow: none !important;
+        }
+    }
+    #s_donation_amount_input {
+        border: none;
+        outline: none;
+        max-width: 145px;
+        background-color: transparent;
+        font-size: inherit;
+        color: inherit;
+
+        &::placeholder {
+            opacity: 0.6;
+            color: inherit;
+        }
+    }
+    .s_donation_range_slider_wrap {
+        // not at 100% to prevent the bubble overflowing the viewport
+        // to the right (with small device when set with max value)
+        width: 90%;
+
+        #s_donation_range_slider {
+            margin-bottom: 50px;
+        }
+        .s_range_bubble {
+            position: absolute;
+            left: 0%;
+            margin-top: 28px;
+            padding: 0.5rem 1rem;
+            color: color-yiq(o-color('primary'));
+            background: theme-color('primary');
+            font-size: 1.15rem;
+            border-radius: 0.3rem;
+            transform: translateX(-50%);
+    
+            &::after {
+                content: "";
+                position: absolute;
+                top: -5px;
+                left: 50%;
+                width: 0;
+                border-style: solid;
+                border-color: theme-color('primary') transparent;
+                border-width: 0 5px 5px;
+                margin-left: -5px;
+            }
+        }
+    }
+}
diff --git a/addons/website_payment/static/src/snippets/s_donation/000.xml b/addons/website_payment/static/src/snippets/s_donation/000.xml
new file mode 100644
index 00000000000..e0493534d66
--- /dev/null
+++ b/addons/website_payment/static/src/snippets/s_donation/000.xml
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="website_payment.donation.prefilledButtons">
+        <div class="s_donation_prefilled_buttons mb-2">
+            <t t-foreach="prefilled_buttons" t-as="prefilled_button_value">
+                <button class="s_donation_btn btn btn-outline-primary btn-lg mb-2 mr-1 o_not_editable"
+                        contenteditable="false"
+                        t-att-data-donation-value="prefilled_button_value"
+                        t-esc="prefilled_button_value"/>
+            </t>
+            <button t-if="custom_input" class="s_donation_btn s_donation_custom_btn btn btn-outline-primary btn-lg mb-2 mr-1">
+                <input id="s_donation_amount_input" type="number" min="5" class="" placeholder="Custom Amount" aria-label="Amount"/>
+            </button>
+        </div>
+    </t>
+    <t t-name="website_payment.donation.prefilledButtonsDescriptions">
+        <div class="s_donation_prefilled_buttons my-4">
+            <t t-foreach="prefilled_buttons" t-as="prefilled_button">
+                <div class="s_donation_btn_description d-sm-flex align-items-center my-3 o_not_editable o_translate_mode_hidden" contenteditable="false">
+                    <button class="s_donation_btn btn btn-outline-primary btn-lg mr-3"
+                            t-att-data-donation-value="prefilled_button.value"
+                            t-esc="prefilled_button.value"/>
+                    <p class="s_donation_description mt-2 my-sm-auto text-muted font-italic" t-esc="prefilled_button.description"></p>
+                </div>
+            </t>
+            <div t-if="custom_input" class="d-sm-flex align-items-center my-3">
+                <button class="s_donation_btn s_donation_custom_btn btn btn-outline-primary btn-lg">
+                    <input id="s_donation_amount_input" type="number" t-att-min="minimum_amount" placeholder="Custom Amount" aria-label="Amount"/>
+                </button>
+            </div>
+        </div>
+    </t>
+    <t t-name="website_payment.donation.slider">
+        <div class="s_donation_range_slider_wrap mb-2 position-relative">
+            <label for="s_donation_range_slider">Choose Your Amount</label>
+            <input type="range" class="custom-range" t-att-min="minimum_amount" t-att-max="maximum_amount" t-att-step="slider_step" id="s_donation_range_slider" contenteditable="false"/>
+            <output class="s_range_bubble" contenteditable="false">25</output>
+        </div>
+    </t>
+</templates>
diff --git a/addons/website_payment/static/src/snippets/s_donation/options.js b/addons/website_payment/static/src/snippets/s_donation/options.js
new file mode 100644
index 00000000000..d1901d0fda3
--- /dev/null
+++ b/addons/website_payment/static/src/snippets/s_donation/options.js
@@ -0,0 +1,303 @@
+/** @odoo-module **/
+
+import {_t, qweb} from 'web.core';
+import options from 'web_editor.snippets.options';
+
+options.registry.Donation = options.Class.extend({
+    xmlDependencies: ['/website_payment/static/src/snippets/s_donation/000.xml'],
+
+    /**
+     * @override
+     */
+    start() {
+        this.defaultDescription = _t("Add a description here");
+        return this._super(...arguments);
+    },
+    /**
+     * @override
+     */
+    onBuilt() {
+        this._rebuildPrefilledOptions();
+        return this._super(...arguments);
+    },
+    /**
+     * @override
+     */
+    cleanForSave() {
+        if (!this.$target[0].dataset.descriptions) {
+            this._updateDescriptions();
+        }
+    },
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    async updateUI() {
+        await this._super(...arguments);
+        this._buildDescriptionsList();
+    },
+
+    //--------------------------------------------------------------------------
+    // Options
+    //--------------------------------------------------------------------------
+
+    /**
+     * Show/hide options in the page.
+     *
+     * @see this.selectClass for parameters
+     */
+    displayOptions(previewMode, widgetValue, params) {
+        this.$target[0].dataset.displayOptions = widgetValue;
+        this._rebuildPrefilledOptions();
+    },
+    /**
+     * Add/remove prefilled buttons.
+     *
+     * @see this.selectClass for parameters
+     */
+    togglePrefilledOptions(previewMode, widgetValue, params) {
+        this.$target[0].dataset.prefilledOptions = widgetValue;
+        this.$el.find('.o_we_prefilled_options_list').toggleClass('d-none', !widgetValue);
+        this._rebuildPrefilledOptions();
+    },
+    /**
+     * Add/remove description of prefilled buttons.
+     *
+     * @see this.selectClass for parameters
+     */
+    toggleOptionDescription(previewMode, widgetValue, params) {
+        this.$target[0].dataset.descriptions = widgetValue;
+        this.renderListItems(false, this._buildPrefilledOptionsList());
+    },
+    /**
+     * Select an amount input
+     *
+     * @see this.selectClass for parameters
+     */
+    selectAmountInput(previewMode, widgetValue, params) {
+        this.$target[0].dataset.customAmount = widgetValue;
+        this._rebuildPrefilledOptions();
+    },
+    /**
+     * Apply the we-list on the target and rebuild the input(s)
+     *
+     * @see this.selectClass for parameters
+     */
+    renderListItems(previewMode, value, params) {
+        const valueList = JSON.parse(value);
+        const donationAmounts = [];
+        delete this.$target[0].dataset.donationAmounts;
+        _.each(valueList, value => {
+            donationAmounts.push(value.display_name);
+        });
+        this.$target[0].dataset.donationAmounts = JSON.stringify(donationAmounts);
+        this._rebuildPrefilledOptions();
+    },
+    /**
+     * Redraws the target whenever the list changes
+     *
+     * @see this.selectClass for parameters
+     */
+    listChanged(previewMode, value, params) {
+        this._updateDescriptions();
+        this._rebuildPrefilledOptions();
+    },
+    /**
+     * @see this.selectClass for parameters
+     */
+    setMinimumAmount(previewMode, widgetValue, params) {
+        this.$target[0].dataset.minimumAmount = widgetValue;
+        const $rangeSlider = this.$('#s_donation_range_slider');
+        const $amountInput = this.$('#s_donation_amount_input');
+        if ($rangeSlider.length) {
+            $rangeSlider[0].min = widgetValue;
+        } else if ($amountInput.length) {
+            $amountInput[0].min = widgetValue;
+        }
+    },
+    /**
+     * @see this.selectClass for parameters
+     */
+    setMaximumAmount(previewMode, widgetValue, params) {
+        this.$target[0].dataset.maximumAmount = widgetValue;
+        const $rangeSlider = this.$('#s_donation_range_slider');
+        const $amountInput = this.$('#s_donation_amount_input');
+        if ($rangeSlider.length) {
+            $rangeSlider[0].max = widgetValue;
+        } else if ($amountInput.length) {
+            $amountInput[0].max = widgetValue;
+        }
+    },
+    /**
+     * @see this.selectClass for parameters
+     */
+    setSliderStep(previewMode, widgetValue, params) {
+        this.$target[0].dataset.sliderStep = widgetValue;
+        const $rangeSlider = this.$('#s_donation_range_slider');
+        if ($rangeSlider.length) {
+            $rangeSlider[0].step = widgetValue;
+        }
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    _computeWidgetState(methodName, params) {
+        switch (methodName) {
+            case 'displayOptions': {
+                return this.$target[0].dataset.displayOptions;
+            }
+            case 'togglePrefilledOptions': {
+                return this.$target[0].dataset.prefilledOptions;
+            }
+            case 'toggleOptionDescription': {
+                return this.$target[0].dataset.descriptions;
+            }
+            case 'selectAmountInput': {
+                return this.$target[0].dataset.customAmount;
+            }
+            case 'renderListItems': {
+                return this._buildPrefilledOptionsList();
+            }
+            case 'setMinimumAmount': {
+                return this.$target[0].dataset.minimumAmount;
+            }
+            case 'setMaximumAmount': {
+                return this.$target[0].dataset.maximumAmount;
+            }
+            case 'setSliderStep': {
+                return this.$target[0].dataset.sliderStep;
+            }
+        }
+        return this._super(...arguments);
+    },
+    /**
+     * @override
+     */
+    _renderCustomXML(uiFragment) {
+        const list = document.createElement('we-list');
+        list.dataset.dependencies = "pre_filled_opt";
+        list.dataset.addItemTitle = _t("Add new pre-filled option");
+        list.dataset.renderListItems = '';
+        list.dataset.unsortable = 'true';
+        list.dataset.inputType = 'number';
+        list.dataset.defaultValue = 50;
+        list.dataset.listChanged = '';
+        $(uiFragment).find('we-checkbox[data-name="pre_filled_opt"]').after(list);
+    },
+    /**
+     * Build the prefilled options list in the editor panel
+     *
+     * @private
+     */
+    _buildPrefilledOptionsList() {
+        const amounts = JSON.parse(this.$target[0].dataset.donationAmounts);
+        let valueList = amounts.map(amount => {
+            return {
+                id: amount,
+                display_name: amount,
+            };
+        });
+        return JSON.stringify(valueList);
+    },
+    /**
+     * Add descriptions in the prefilled options list of the
+     * editor panel.
+     *
+     * @private
+     */
+    _buildDescriptionsList() {
+        if (this.$target[0].dataset.descriptions) {
+            const $descriptions = this.$target.find('#s_donation_description_inputs > input');
+            const $tableEl = this.$el.find('we-list table');
+            _.each($tableEl.find('tr'), (trEl, i) => {
+                const $inputAmount = $(trEl).find('td').first();
+                $inputAmount.addClass('w-25');
+                const tdEl = document.createElement('td');
+                const inputEl = document.createElement('input');
+                inputEl.type = 'text';
+                inputEl.value = $descriptions[i] ? $descriptions[i].value : this.defaultDescription;
+                tdEl.classList.add('w-auto');
+                tdEl.appendChild(inputEl);
+                $(tdEl).insertAfter($inputAmount);
+            });
+            this._updateDescriptions();
+        }
+    },
+    /**
+     * Update descriptions in the input hidden.
+     *
+     * @private
+     */
+    _updateDescriptions() {
+        const descriptionInputs = this.$target.find('#s_donation_description_inputs');
+        descriptionInputs.empty();
+        const descriptions = this.$el.find('we-list input[type=text]');
+        _.each(descriptions, description => {
+            const inputEl = document.createElement('input');
+            inputEl.type = 'hidden';
+            inputEl.classList.add('o_translatable_input_hidden', 'd-block', 'mb-1', 'w-100');
+            inputEl.name = 'donation_descriptions';
+            inputEl.value = description.value;
+            descriptionInputs[0].appendChild(inputEl);
+        });
+    },
+    /**
+     * Rebuild options in the DOM.
+     *
+     * @private
+     */
+    _rebuildPrefilledOptions() {
+        const rebuild = this.$target[0].dataset.displayOptions;
+        this.$target.find('.s_donation_prefilled_buttons').remove();
+        const layout = this.$target[0].dataset.customAmount;
+        const $slider = this.$target.find('.s_donation_range_slider_wrap');
+        if (layout !== "slider" || !rebuild) {
+            $slider.remove();
+        }
+        if (rebuild) {
+            if (layout === "slider" && !$slider.length) {
+                const sliderTemplate = $(qweb.render('website_payment.donation.slider', {
+                    minimum_amount: this.$target[0].dataset.minimumAmount,
+                    maximum_amount: this.$target[0].dataset.maximumAmount,
+                    slider_step: this.$target[0].dataset.sliderStep,
+                }));
+                this.$target.find('.s_donation_donate_btn').before(sliderTemplate);
+            }
+            const prefilledOptions = this.$target[0].dataset.prefilledOptions;
+            let donationAmounts = 0;
+            let showDescriptions = false;
+            if (prefilledOptions) {
+                donationAmounts = JSON.parse(this.$target[0].dataset.donationAmounts);
+                showDescriptions = this.$target[0].dataset.descriptions;
+                if (showDescriptions) {
+                    const $descriptions = this.$target.find('#s_donation_description_inputs > input');
+                    donationAmounts = donationAmounts.map((amount, i) => {
+                        return {
+                            value: amount,
+                            description: $descriptions[i] ? $descriptions[i].value : this.defaultDescription,
+                        };
+                    });
+                }
+            }
+            const $prefilledButtons = $(qweb.render(`website_payment.donation.prefilledButtons${showDescriptions ? 'Descriptions' : ''}`, {
+                prefilled_buttons: donationAmounts,
+                custom_input: layout === "freeAmount",
+                minimum_amount: this.$target[0].dataset.minimumAmount,
+            }));
+            this.$target.find('#s_donation_description_inputs').after($prefilledButtons);
+        }
+    },
+});
+
+export default {
+    Donation: options.registry.Donation,
+};
diff --git a/addons/website_payment/views/snippets/s_donation.xml b/addons/website_payment/views/snippets/s_donation.xml
new file mode 100644
index 00000000000..a6ac7193015
--- /dev/null
+++ b/addons/website_payment/views/snippets/s_donation.xml
@@ -0,0 +1,94 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_donation_button" name="Donation Button">
+    <div class="s_donation"
+            data-name="Donation Button"
+            data-donation-email="info@yourcompany.example.com"
+            data-custom-amount="freeAmount"
+            t-att-data-display-options="display_options"
+            data-prefilled-options="true"
+            data-descriptions="true"
+            data-donation-amounts='["10", "25", "50", "100"]'
+            data-minimum-amount="5"
+            data-maximum-amount="100"
+            data-slider-step="5"
+            data-default-amount="25">
+        <span id="s_donation_description_inputs">
+            <input type="hidden" class="o_translatable_input_hidden d-block mb-1 w-100" name="donation_descriptions[]" value="A year of cultural awakening."/>
+            <input type="hidden" class="o_translatable_input_hidden d-block mb-1 w-100" name="donation_descriptions[]" value="Caring for a baby for 1 month."/>
+            <input type="hidden" class="o_translatable_input_hidden d-block mb-1 w-100" name="donation_descriptions[]" value="One year in elementary school."/>
+            <input type="hidden" class="o_translatable_input_hidden d-block mb-1 w-100" name="donation_descriptions[]" value="One year in high school."/>
+        </span>
+        <a href="#" class="s_donation_donate_btn btn btn-secondary btn-lg mb-2">Donate Now</a>
+    </div>
+</template>
+
+<template id="s_donation" name="Donation">
+    <section class="pt32 pb32 o_cc o_cc1">
+        <div class="container">
+            <div class="row align-items-center">
+                <div class="col-lg-7 pt16 pb16">
+                    <h2>Make a Donation</h2>
+                    <p>Small or large, your contribution is essential.</p>
+                    <t t-snippet-call="website_payment.s_donation_button">
+                        <t t-set="display_options" t-value="'true'"/>
+                    </t>
+                </div>
+                <div class="col-lg-5 pt16 pb16 d-none d-md-block">
+                    <img src="/web_editor/shape/website_payment/s_donation_gift.svg?c1=o-color-1" class="img img-fluid mx-auto" style="width: 75%;" alt=""/>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<template id="s_donation_options"  inherit_id="website.snippet_options">
+    <xpath expr="." position="inside">
+        <div data-js="Donation" data-selector=".s_donation">
+            <we-input class="o_we_large_input" string="Recipient Email" data-select-data-attribute=""
+                data-attribute-name="donationEmail"/>
+            <we-checkbox string="Display Options"
+                    data-name="display_options_opt"
+                    data-display-options="true"
+                    data-no-preview="true">
+            </we-checkbox>
+            <we-checkbox string="Pre-filled Options"
+                    data-name="pre_filled_opt"
+                    data-toggle-prefilled-options="true"
+                    data-dependencies="!no_input_opt"
+                    data-no-preview="true"
+                    data-trigger="slider_opt">
+            </we-checkbox>
+            <we-checkbox string="⌙ Descriptions"
+                    data-toggle-option-description="true"
+                    data-dependencies="pre_filled_opt"
+                    data-no-preview="true">
+            </we-checkbox>
+            <we-select string="Custom Amount" data-no-preview="true">
+                <we-button data-name="free_amount_opt" data-select-amount-input="freeAmount" data-dependencies="pre_filled_opt">Input</we-button>
+                <we-button data-name="slider_opt" data-select-amount-input="slider">Slider</we-button>
+                <we-button data-name="no_input_opt" data-select-amount-input="" data-dependencies="pre_filled_opt">None</we-button>
+            </we-select>
+            <we-input string="⌙ Minimum" data-step="1" data-set-minimum-amount="" data-dependencies="!no_input_opt"/>
+            <we-input string="⌙ Maximum" data-step="1" data-set-maximum-amount="" data-dependencies="slider_opt"/>
+            <we-input string="⌙ Step" data-step="1" data-set-slider-step="" data-dependencies="slider_opt"/>
+            <we-input string="Default Amount" data-step="1" data-attribute-default-value="25"
+                data-select-data-attribute="" data-attribute-name="defaultAmount"/>
+        </div>
+    </xpath>
+</template>
+
+<record id="website_payment.s_donation_000_js" model="ir.asset">
+    <field name="name">Donation 000 JS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">website_payment/static/src/snippets/s_donation/000.js</field>
+</record>
+
+<record id="website_payment.s_donation_000_scss" model="ir.asset">
+    <field name="name">Donation 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">website_payment/static/src/snippets/s_donation/000.scss</field>
+</record>
+
+</odoo>
diff --git a/addons/website_payment/views/snippets/snippets.xml b/addons/website_payment/views/snippets/snippets.xml
new file mode 100644
index 00000000000..264d708d24c
--- /dev/null
+++ b/addons/website_payment/views/snippets/snippets.xml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="remove_external_snippets" inherit_id="website.external_snippets">
+    <xpath expr="//t[@t-install='website_payment']" position="replace"/>
+</template>
+
+<template id="snippets" inherit_id="website.snippets" name="Snippet Donation">
+    <xpath expr="//t[@id='snippet_donation_hook']" position="replace">
+        <t t-snippet="website_payment.s_donation" t-thumbnail="/website/static/src/img/snippets_thumbs/s_donation.svg"/>
+    </xpath>
+    <xpath expr="//t[@id='snippet_donation_button_hook']" position="replace">
+        <t t-snippet="website_payment.s_donation_button" t-thumbnail="/website/static/src/img/snippets_thumbs/s_donation_button.svg"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website_sale/controllers/main.py b/addons/website_sale/controllers/main.py
index 2c87750f7a2..d83024fdd46 100644
--- a/addons/website_sale/controllers/main.py
+++ b/addons/website_sale/controllers/main.py
@@ -136,6 +136,13 @@ class Website(main.Website):
         if view_key in ('website_sale.products_list_view', 'website_sale.add_grid_or_list_option'):
             request.session.pop('website_sale_shop_layout_mode', None)
 
+    @http.route()
+    def get_current_currency(self, **kwargs):
+        return {
+            'id': request.website.currency_id.id,
+            'symbol': request.website.currency_id.symbol,
+            'position': request.website.currency_id.position,
+        }
 
 class WebsiteSale(http.Controller):