From 7cb41b26c3db5899c0ef243ad7bdd9b233656ce5 Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Tue, 10 Oct 2023 14:10:13 -0500
Subject: [PATCH] feat: productize value prop experiment and removing old
 checkout module experiment

---
 src/assets/images/globe.svg                   |  12 +
 src/assets/images/puzzle.svg                  |  20 +
 src/assets/images/support.svg                 |  18 +
 src/components/Checkout/DonationItem.vue      | 837 ++----------------
 .../DonationNudge/DonationNudgeLightbox.vue   |   9 +-
 .../Checkout/HowKivaUsesDonation.vue          |  45 +
 6 files changed, 181 insertions(+), 760 deletions(-)
 create mode 100644 src/assets/images/globe.svg
 create mode 100644 src/assets/images/puzzle.svg
 create mode 100644 src/assets/images/support.svg
 create mode 100644 src/components/Checkout/HowKivaUsesDonation.vue

diff --git a/src/assets/images/globe.svg b/src/assets/images/globe.svg
new file mode 100644
index 0000000000..f891e1ceb9
--- /dev/null
+++ b/src/assets/images/globe.svg
@@ -0,0 +1,12 @@
+<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.9892 49.6654C39.611 49.6654 50.6536 38.8939 50.6536 25.6067C50.6536 12.3194 39.611 1.54794 25.9892 1.54794C12.3674 1.54794 1.32471 12.3194 1.32471 25.6067C1.32471 38.8939 12.3674 49.6654 25.9892 49.6654Z" fill="white"/>
+<path d="M28.6882 44.0875C38.807 44.0875 47.0098 35.8146 47.0098 25.6094C47.0098 15.4042 38.807 7.13132 28.6882 7.13132C18.5694 7.13132 10.3666 15.4042 10.3666 25.6094C10.3666 35.8146 18.5694 44.0875 28.6882 44.0875Z" fill="#F4B539"/>
+<path d="M40.321 23.5036L42.3134 18.9377C41.8055 17.7076 41.6015 17.2961 41.1935 16.5782L39.1925 16.565L35.5073 11.7233H29.157L25.181 10.0598L18.4445 16.854L18.2969 21.595L22.173 25.7012L29.6866 23.6962V28.6824L32.6903 33.5766V35.8792L35.3554 36.5928C35.6723 36.4089 35.9848 36.2163 36.2886 36.0106L39.8175 31.1776L40.3167 23.5036H40.321Z" fill="#27382B"/>
+<path d="M15.9572 34.5572L14.3382 32.6179L10.8657 31.3003L9.16855 29.466L6.98523 27.4873C7.51044 32.7318 10.2103 37.3283 14.1646 40.3445L15.5101 37.4246L15.9572 34.5572Z" fill="#27382B"/>
+<path d="M15.597 11.3908H18.8568L20.0244 8.87369V7.88434C18.4748 8.34399 17.012 9.00502 15.6664 9.83677L15.4451 11.0319L15.597 11.3908Z" fill="#27382B"/>
+<path d="M28.1673 8.87802L26.7045 8.21262L26.3138 8.26953L27.9459 9.72291L28.2584 9.39896L29.8167 9.18008L29.7863 8.66351L30.4765 9.04875L30.7456 8.96995L29.3696 7.61288C28.7142 7.45966 28.0414 7.34146 27.3599 7.26266L28.4885 8.45776L28.176 8.8824L28.1673 8.87802Z" fill="#27382B"/>
+<path d="M16.5867 32.8982L16.6214 36.1814L19.1303 37.3327L20.1112 37.324C19.6381 35.7699 18.9697 34.299 18.1319 32.9507L16.9469 32.7406L16.591 32.8982H16.5867Z" fill="#27382B"/>
+<path d="M19.217 37.8406L16.2089 39.1057L16.0874 41.8812L16.465 42.7961C17.7195 41.7717 18.8176 40.5941 19.7422 39.3027L19.4904 38.112L19.2126 37.8406H19.217Z" fill="#27382B"/>
+<path d="M38.8105 34.6231L40.4817 32.7932L40.9418 32.7013L40.1735 34.7019L38.8105 34.6231Z" fill="#27382B"/>
+<path d="M25.2158 44.0875C35.3345 44.0875 43.5374 35.8146 43.5374 25.6094C43.5374 15.4042 35.3345 7.13132 25.2158 7.13132C15.097 7.13132 6.89417 15.4042 6.89417 25.6094C6.89417 35.8146 15.097 44.0875 25.2158 44.0875Z" stroke="#27372A" stroke-width="2.03791"/>
+</svg>
diff --git a/src/assets/images/puzzle.svg b/src/assets/images/puzzle.svg
new file mode 100644
index 0000000000..1f9008ee5a
--- /dev/null
+++ b/src/assets/images/puzzle.svg
@@ -0,0 +1,20 @@
+<svg width="50" height="48" viewBox="0 0 50 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_282_629)">
+<path d="M7.74264 4.55678H10.0302C11.151 4.55678 12.2413 4.16448 13.0871 3.42064C14.0755 2.54943 15.7669 0.990429 18.1564 0.990429C22.7417 0.990429 23.5721 2.11638 24.8917 3.58877C25.7782 4.57716 27.0875 5.06626 28.4122 5.06626H28.9064C29.9916 5.06626 31.0564 4.71472 31.8817 4.01164C32.8599 3.18119 34.5718 2.21318 37.0071 2.51886C39.4424 2.82455 41.0778 4.15939 42.0662 5.2242C42.8814 6.1005 43.987 6.66093 45.1791 6.75263C47.752 6.95133 49.7441 9.09623 49.7441 11.6793V30.5402L49.4027 42.1665C49.311 45.3304 46.6974 47.8319 43.5386 47.7962L10.2951 47.3988C8.15531 47.3734 6.43837 45.631 6.43837 43.4962V40.7298C6.43837 40.7298 1.85306 39.2013 1.85306 33.5971C1.85306 29.4754 4.05911 27.8349 5.22581 27.2541C5.65887 27.0401 5.92889 26.5917 5.92889 26.1077C5.92889 25.5065 5.51112 24.9818 4.92522 24.8544C3.54453 24.5538 1.19074 23.3056 0.834106 18.3127C0.834106 18.3127 0.834106 14.7464 2.32688 13.2841C2.9943 12.6269 3.3815 11.7404 3.3815 10.8081V8.92301C3.3815 6.51318 5.3328 4.56187 7.74264 4.56187V4.55678Z" fill="white"/>
+<path d="M27.6174 9.00963H33.5019C33.5019 9.00963 34.4088 6.29411 37.1243 6.29411C39.8398 6.29411 40.2933 9.9165 40.2933 9.9165L46.1778 10.8234V14.8992C46.1778 14.8992 41.6536 13.9719 41.6536 18.5216C41.6536 20.7837 46.1778 20.7837 46.1778 20.7837V27.1216L39.8398 25.7613L38.4795 23.0458L35.764 22.5923L33.5019 25.7613H28.5243V21.2371C28.5243 21.2371 24.4485 20.3302 24.4485 17.6147C24.4485 14.8992 27.6174 13.5389 27.6174 13.5389L28.0709 9.9165" fill="#EBB751"/>
+<path d="M27.169 25.3028L26.7156 28.9251C26.7156 28.9251 24.4535 30.2855 24.4535 33.001C24.4535 35.7165 28.5293 36.6234 28.5293 36.6234V42.0544H33.5069C33.5069 42.0544 36.2224 35.7165 39.8448 42.0544L45.7293 42.5078L46.1828 36.1699C46.1828 36.1699 43.0138 36.1699 43.0138 33.9078C43.0138 29.3582 46.1828 30.2855 46.1828 30.2855V26.2096L40.2983 25.3028C40.2983 25.3028 39.8448 21.6804 37.1293 21.6804C34.4138 21.6804 33.5069 24.3959 33.5069 24.3959L26.7156 25.3028" fill="#EBB751"/>
+<path d="M11.7778 9.91141L11.3243 14.889C11.3243 14.889 9.06226 15.3424 9.06226 18.058C9.06226 20.7735 12.2312 21.2269 12.2312 21.2269V25.7511L16.307 25.2977C16.307 25.2977 19.476 19.4132 22.645 25.2977L28.5294 25.7511L28.9829 20.3201C28.9829 20.3201 24.4587 20.3201 24.4587 18.058C24.4587 13.5083 28.9829 14.4356 28.9829 14.4356V9.00453L23.0984 8.09766C23.0984 8.09766 22.645 4.9287 19.9294 4.9287C17.2139 4.9287 14.9518 8.5511 14.9518 8.5511L10.4277 9.45797" fill="#EBB751"/>
+<path d="M27.169 42.9562H25.1311" stroke="#EBB751" stroke-width="2.03791" stroke-miterlimit="10"/>
+<path d="M23.6079 42.9562H15.4002H13.2196" stroke="#EBB751" stroke-width="2.03791" stroke-miterlimit="10"/>
+<path d="M12.4554 42.9562H10.4175V40.9183" stroke="#EBB751" stroke-width="2.03791" stroke-miterlimit="10"/>
+<path d="M10.4173 39.5631V37.5251C10.4173 37.5251 9.48498 37.3163 8.51697 36.8068" stroke="#EBB751" stroke-width="2.03791" stroke-miterlimit="10"/>
+<path d="M7.25865 35.9152C6.72879 35.3955 6.34668 34.7332 6.34668 33.9028C6.34668 32.9246 6.75426 32.1247 7.27903 31.498" stroke="#EBB751" stroke-width="2.03791" stroke-miterlimit="10"/>
+<path d="M7.81909 30.9478C8.64445 30.2039 9.51566 29.832 9.51566 29.832L9.96909 26.2096" stroke="#EBB751" stroke-width="2.03791" stroke-miterlimit="10"/>
+<path d="M20.8312 26.2096C20.8312 26.2096 19.4709 23.0407 16.7554 23.0407C14.0399 23.0407 13.5865 26.6631 13.5865 26.6631L9.51063 26.2096V21.6855L7.70198 21.232C2.72437 17.6096 8.15541 15.3475 8.15541 15.3475V9.9165H13.5865C13.5865 9.9165 14.9468 6.74754 18.1106 6.74754C21.2745 6.74754 21.733 10.3699 21.733 10.3699H25.8088V13.9923C25.8088 13.9923 22.6399 15.801 22.6399 18.0682C22.6399 20.3353 26.2623 21.6906 26.2623 21.6906L25.8088 30.744C25.8088 30.744 21.733 32.1043 21.733 34.8198C21.733 37.5353 25.8088 38.4422 25.8088 38.4422V42.9664H30.7865C30.7865 42.9664 33.9554 37.0819 37.1244 42.9664L42.5554 43.4198L43.4623 37.9888C43.4623 37.9888 38.9381 37.9888 38.9381 35.7267C38.9381 31.177 43.4623 32.1043 43.4623 32.1043V27.1267H37.5778C37.5778 27.1267 37.1244 23.5043 34.4089 23.5043C31.6933 23.5043 30.7865 27.5801 30.7865 27.5801H26.7106" stroke="#27372A" stroke-width="2.03791"/>
+</g>
+<defs>
+<clipPath id="clip0_282_629">
+<rect width="48.91" height="46.8058" fill="white" transform="translate(0.834106 0.990429)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/images/support.svg b/src/assets/images/support.svg
new file mode 100644
index 0000000000..a63cde7977
--- /dev/null
+++ b/src/assets/images/support.svg
@@ -0,0 +1,18 @@
+<svg width="47" height="53" viewBox="0 0 47 53" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_282_604)">
+<path d="M24.9501 5.91197L25.3118 4.25617C25.3118 4.25617 25.5971 -0.848811 32.3783 0.338275C36.1739 1.00569 35.5982 0.873227 35.5982 0.873227C35.5982 0.873227 44.0454 2.50865 42.5016 7.3487C42.2265 8.21482 41.9106 8.96375 41.6406 9.54455C41.2432 10.3852 42.2418 11.8219 42.6647 12.6473C43.6531 14.6037 45.2273 18.3229 44.6669 21.2829C44.5243 22.0319 45.0659 22.7636 45.3003 23.4871L45.8735 27.3718C45.8735 27.3718 47.0105 29.6741 44.6007 32.0839C43.9384 32.7462 41.931 32.9296 40.9324 32.6953C39.6282 32.3896 39.7403 34.5651 39.7708 35.905C39.8676 39.7515 37.1572 44.2095 27.7624 42.304C26.1626 41.8455 23.3503 41.8455 22.9376 43.4605C22.6422 44.6171 22.2346 46.3085 22.0868 47.6892C21.4856 53.3088 16.0495 54.3226 8.55507 50.797C5.82426 49.5132 3.19025 48.5859 4.72379 42.9307C4.94286 42.1257 5.09061 41.3055 4.67284 40.5871C3.56217 38.6714 1.50898 34.7026 1.50898 31.0904C1.50898 26.9025 -0.895764 22.8114 1.32047 20.5748C2.08469 19.8004 3.21573 19.4998 4.29073 19.6781C5.66123 19.566 6.3694 18.9444 6.42544 17.5739C6.55791 14.1248 6.7617 11.0832 9.77272 9.18792C11.2961 8.2301 13.1302 7.89384 14.9185 8.11801L19.5802 8.69882C20.054 8.75996 20.5125 8.89242 20.9609 9.07074C23.0548 9.891 24.0279 8.75996 24.675 7.35889L24.9603 5.92216L24.9501 5.91197Z" fill="white"/>
+<path d="M8.57526 28.2373C8.57526 28.2373 8.59055 28.273 8.59564 28.2934L9.20702 28.594L9.74706 28.1558L10.119 22.4598C10.119 22.4598 10.119 22.4242 10.119 22.4089L9.94067 15.5004C9.94067 15.4647 10.0222 15.0011 10.0222 14.7158L10.1037 14.0942C10.1241 13.9159 10.1954 13.7529 10.3126 13.6153L10.5724 13.3096C11.0259 12.9326 11.5048 12.9173 11.9429 13.3147L12.2996 14.1604C12.6613 14.4916 12.9007 18.975 12.9058 19.4641V21.1307L13.3185 17.1307L13.4357 14.1859C13.4357 14.028 13.5121 13.1466 13.4815 12.8409L13.7414 12.3059C13.9299 11.9646 14.312 11.7812 14.6941 11.8474L14.8826 11.878C15.2291 11.9391 15.5093 12.1888 15.6061 12.5301L15.8353 13.5592C15.8659 14.4406 15.978 15.6838 15.978 15.7653L16.0544 19.2858L16.3091 23.2037L16.5588 20.2232L16.7932 15.8672L16.9358 13.4675L17.486 12.2703L18.7088 11.934L19.3304 12.8918L19.3558 17.3447L19.4577 22.7706L20.2882 15.8978L20.334 14.5069L21.0524 13.5949L22.107 13.7376L22.5859 15.322L22.6878 16.3461L23.396 28.0539C23.4469 30.0001 23.4419 30.0715 23.4317 30.1479V33.8874C23.4215 33.9435 22.6114 37.1532 22.5859 37.2093L20.7221 41.1195C20.7018 41.1755 20.5266 41.494 20.2082 42.29L19.6972 43.6115L18.7088 46.7957C18.7088 46.7957 18.3904 48.4515 17.9155 49.4068L16.7932 49.0247C16.7014 49.417 16.4518 48.9941 16.0544 49.0247C11.6388 47.8784 11.1328 47.9777 9.86424 47.1778C9.49232 46.9435 8.20844 46.7416 8.37657 46.334L9.49742 43.2007C9.5178 43.1498 9.53308 43.0988 9.54327 43.0428L9.86424 41.5093C9.9101 41.2953 9.87443 41.0711 9.76744 40.8826L8.51413 38.6256C8.47846 38.5594 8.43261 38.4982 8.37657 38.4422L7.20477 37.2093C7.13853 37.1379 7.08249 37.0564 7.04173 36.9698L5.58462 33.8874C5.53368 33.7805 5.5082 33.6684 5.49801 33.5512L5.44197 32.5832L5.28913 29.3837L5.2178 28.2679L3.82692 24.6098L3.20536 23.3769L2.84363 22.5515C2.84363 22.5515 3.38368 22.0472 3.8524 22.0828C4.32112 22.1185 5.11081 22.3681 5.11081 22.3681L6.45583 24.1411L8.58036 28.2322L8.57526 28.2373Z" fill="#D8A15B"/>
+<path d="M16.3466 15.7757C16.3517 15.6944 16.3171 14.4467 16.3415 13.5651L16.1767 12.5237C16.1013 12.177 15.8372 11.9104 15.4952 11.8278L15.3089 11.7856C14.9317 11.6957 15.0413 10.9362 14.0368 11.7369C13.3377 11.7443 13.059 13.9628 12.9868 15.1222L13.0607 17.1534L12.8873 21.8899L13.0503 19.2763C13.0756 18.7878 13.1155 14.2982 12.7751 13.9451L12.4718 13.0788C12.0592 12.655 11.3206 12.6293 10.8446 12.9774L10.4681 13.199L10.0242 13.7736C10.0064 14.0584 9.88079 15.3369 9.87857 15.3725L9.86563 19.5927C9.75501 21.6946 9.71439 22.0188 9.71439 22.0188L9.35684 27.7546L8.79057 28.1583L8.13262 27.5762C8.12881 27.5555 7.74613 26.1932 7.74613 26.1932L7.41194 24.8634L7.05882 23.7567L5.5803 21.4344C5.5803 21.4344 5.14906 21.4075 4.50327 21.3673C3.85748 21.327 3.15607 22.0815 3.15607 22.0815L3.10282 22.9358L3.02754 24.1434L4.09817 27.8658L4.88783 31.1507L4.78033 32.8752C4.78321 32.9927 4.80166 33.1062 4.84585 33.2161L6.10837 36.3832C6.14366 36.4722 6.19452 36.557 6.25618 36.6323L7.34901 37.9358C7.40145 37.9952 7.44341 38.0591 7.47489 38.1274L8.58535 40.458C8.68041 40.6528 8.70206 40.8787 8.64298 41.0894L8.22722 42.6C8.21356 42.6553 8.19514 42.7052 8.17163 42.7548L6.81779 46.4574M16.3466 15.7757L16.2038 19.2942L16.284 22.1016M16.3466 15.7757L16.8559 12.9284L18.1702 11.9639L19.3105 12.1218L19.8712 13.1164L19.6196 17.5622L19.274 22.288L19.7031 16.0871L20.1847 13.9833L21.5462 13.9253L22.5899 14.1333L22.9693 15.7445L23.0073 16.7729L22.9857 28.5021C22.9154 30.4477 22.9059 30.5186 22.891 30.5942L22.0874 33.7396C22.0738 33.7949 22.055 33.8499 22.0261 33.9043L18.5359 41.2518C18.5121 41.3065 18.488 41.3662 18.4743 41.4215L17.949 43.543L17.2414 46.4596C17.2414 46.4596 17.2344 46.4898 17.2284 46.5047L16.2906 49.2812" stroke="#22382A" stroke-width="2.03791"/>
+<path d="M38.2372 23.3158C38.2372 23.3158 38.2219 23.2801 38.2168 23.2597L37.6054 22.9591L37.0654 23.3973L36.6935 29.0933C36.6935 29.0933 36.6935 29.1289 36.6935 29.1442L36.8718 36.0527C36.8718 36.0884 36.7903 36.552 36.7903 36.8373L36.7088 37.4589C36.6884 37.6372 36.6171 37.8003 36.4999 37.9378L36.24 38.2435C35.7866 38.6205 35.3077 38.6358 34.8695 38.2384L34.5129 37.3927C34.1512 37.0615 33.9117 32.5781 33.9066 32.089V30.1103L33.4939 34.4224L33.3768 37.3672C33.3768 37.5251 33.3003 38.4065 33.3309 38.7122L33.0711 39.2472C32.8826 39.5885 32.5005 39.7719 32.1184 39.7057L31.9298 39.6751C31.5834 39.614 31.3032 39.3643 31.2064 39.023L30.9771 37.9939C30.9466 37.1125 30.8345 35.8693 30.8345 35.7878L30.758 32.2673L30.2537 31.3299L30.0193 35.6859L29.8766 38.0856L29.3264 39.2828L28.1037 39.6191L27.4821 38.6613L27.4566 34.2084L27.3547 28.7825L26.5243 35.6553L26.4784 37.0462L25.7601 37.9582L24.7054 37.8155L24.2265 36.2311L24.1246 35.207L23.4165 23.4992C23.3655 21.553 23.3706 21.4816 23.3808 21.4052L23.9871 18.2159C23.9973 18.1598 24.0125 18.1038 24.038 18.0478L27.0643 10.4973C27.0847 10.4412 27.1051 10.3801 27.1153 10.3241L27.5076 8.17406L28.0323 5.21909C28.0323 5.21909 28.0374 5.18852 28.0425 5.17323L28.3686 3.78236C28.4603 3.39006 27.5381 3.14551 28.3686 2.44243C32.2406 3.14545 36.668 3.88543 38.2372 4.52933C38.6091 4.76369 38.3289 5.85593 38.1608 6.26352L37.315 8.35238C37.2947 8.40333 37.2794 8.45428 37.2692 8.51032L36.9482 10.0439C36.9024 10.2578 36.938 10.482 37.045 10.6705L38.2983 12.9275C38.334 12.9937 38.3798 13.0549 38.4359 13.1109L39.6077 14.3439C39.6739 14.4152 39.73 14.4967 39.7707 14.5833L41.2278 17.6657C41.2788 17.7726 41.3043 17.8847 41.3144 18.0019L41.3705 18.9699L41.5233 22.1694L41.5947 23.2852L42.9855 26.9433L43.6071 28.1762L43.9688 29.0016C43.9688 29.0016 43.4288 29.5059 42.9601 29.4703C42.4913 29.4346 41.7016 29.185 41.7016 29.185L40.3566 27.412L38.2321 23.3209L38.2372 23.3158Z" fill="#AF752A"/>
+<path d="M10.817 32.0329C10.817 32.0329 13.8841 33.4697 14.2713 36.6386" stroke="#223829" stroke-width="2.03791" stroke-linecap="square" stroke-linejoin="round"/>
+<path d="M34.9206 19.2909C34.9206 19.2909 31.4663 18.5216 31.0842 14.3031" stroke="#223829" stroke-width="2.03791" stroke-linecap="square" stroke-linejoin="round"/>
+<path d="M30.8345 35.7877C30.8345 35.8692 30.9466 37.1124 30.9771 37.9938L31.2064 39.0229C31.3032 39.3643 31.5834 39.6139 31.9298 39.675L32.1184 39.7056C32.5005 39.7719 32.4383 40.5367 33.3911 39.675C34.0884 39.6241 34.2284 37.3926 34.2284 36.231L34.0282 34.2083L33.9066 29.4702V32.0889C33.9117 32.578 34.1512 37.0614 34.5129 37.3926L34.8695 38.2383C35.3077 38.6357 36.0464 38.6153 36.4999 38.2383L36.8619 37.9938L37.2692 37.3926C37.2692 37.1073 37.315 35.8234 37.315 35.7877L37.0654 31.575C37.045 29.4702 37.0654 29.1441 37.0654 29.1441V23.3972L37.6054 22.9591L38.2983 23.4991C38.3034 23.5195 38.7701 24.8554 38.7701 24.8554L39.1864 26.1618L39.6077 27.2444L41.2278 29.4702C41.2278 29.4702 41.6599 29.4702 42.307 29.4702C42.954 29.4702 43.6071 28.6735 43.6071 28.6735V27.8176V26.6076L42.307 22.9591L41.3144 19.7296V18.0018C41.3043 17.8846 41.2788 17.7726 41.2278 17.6656L39.7707 14.5832C39.73 14.4966 39.6739 14.4151 39.6077 14.3438L38.4359 13.1108C38.3798 13.0548 38.334 12.9936 38.2983 12.9274L37.045 10.6704C36.938 10.4819 36.9024 10.2577 36.9482 10.0438L37.2692 8.51024C37.2794 8.45419 37.2947 8.40325 37.315 8.3523L38.4359 4.57261M30.8345 35.7877L30.758 32.2672L30.5033 29.4702M30.8345 35.7877L30.5033 38.6612L29.2516 39.7056L28.1037 39.619L27.4821 38.6612L27.4566 34.2083L27.5076 29.4702L27.4651 35.6858L27.1153 37.8155L25.7601 37.9581L24.7054 37.8155L24.2265 36.231L24.1246 35.2069L23.4165 23.4991C23.3655 21.5529 23.3706 21.4816 23.3808 21.4051L23.9871 18.2158C23.9973 18.1598 24.0125 18.1037 24.038 18.0477L27.0643 10.4972C27.0847 10.4412 27.1051 10.38 27.1153 10.324L27.5076 8.17398L28.0323 5.219C28.0323 5.219 28.0374 5.18843 28.0425 5.17315L28.8058 2.34364" stroke="#22382A" stroke-width="2.03791"/>
+<path d="M21.7097 24.6863L24.4354 23.3922L27.2477 21.7364L29.9836 24.1105L29.2347 28.6908L27.5789 30.3466L22.0154 34.2033L15.7284 29.9033L14.8267 24.2175L16.4825 21.4052L20.6245 22.2306L21.7097 24.6863Z" fill="#F4B536"/>
+<path d="M22.0714 24.4672L24.0482 22.8165L27.528 21.823L29.9123 24.1105L28.8526 28.115L27.1968 29.7708L21.6282 33.6276L15.3463 29.3276L14.4395 23.6418L16.1004 20.8295L20.2373 21.6549L22.0714 24.4672Z" stroke="#223829" stroke-width="2.03791" stroke-linecap="square"/>
+</g>
+<defs>
+<clipPath id="clip0_282_604">
+<rect width="45.8327" height="52.6801" fill="white" transform="translate(0.372803 0.15995)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/Checkout/DonationItem.vue b/src/components/Checkout/DonationItem.vue
index 7746d2c4c9..dbe6b76255 100644
--- a/src/components/Checkout/DonationItem.vue
+++ b/src/components/Checkout/DonationItem.vue
@@ -1,184 +1,13 @@
 <template>
 	<!-- DO NOT REMOVE basket-donation-item class -->
 	<div class="basket-donation-item">
-		<template
-			v-if="donateItemExperimentVersion === 'a' ||
-				(donateItemExperimentVersion === 'e' && !hasLoans)"
-		>
-			<div class="tw-flex tw-flex-col md:tw-flex-row tw-pb-5">
-				<!-- donation image -->
-				<div class="tw-hidden md:tw-block tw-flex-none md:tw-mr-3 lg:tw-mr-4.5">
-					<img
-						class="donation-img tw-w-12 lg:tw-w-13 tw-h-12 lg:tw-h-13 tw-rounded"
-						:src="imageRequire(`./peace-sign-holding-money.svg`)"
-						alt="donation line item image"
-						data-testid="basket-donation-image"
-					>
-				</div>
-
-				<!-- donation text -->
-				<div class="tw-flex-auto">
-					<div class="tw-mb-0.5">
-						<div class="tw-w-full tw-flex">
-							<h2
-								class="tw-flex-1 md:tw-flex-grow tw-text-h3"
-								data-testid="basket-donation-title"
-							>
-								{{ donationTitle }}
-							</h2>
-							<button
-								class="donation-amount md:tw-hidden tw-flex-none tw-align-middle"
-								data-testid="basket-donation-edit-button-mobile-pencil"
-								v-kv-track-event="['basket', 'Edit Donation']"
-								@click="enterEditDonation"
-								title="Edit Donation"
-							>
-								<kv-material-icon
-									role="img"
-									aria-label="Edit Donation"
-									title="Edit Donation"
-									class="edit-donation tw-text-action
-									tw-w-3.5
-									tw-h-3.5
-									tw-py-0.5
-									md:tw-hidden"
-									name="pencil"
-									:icon="mdiPencil"
-								/>
-							</button>
-						</div>
-
-						<div
-							v-show="!editDonation"
-							class="md:tw-hidden"
-						>
-							<button
-								class="donation-amount"
-								data-testid="basket-donation-edit-button-mobile-amount"
-								v-kv-track-event="['basket', 'Edit Donation']"
-								@click="enterEditDonation"
-								title="Edit Donation"
-							>
-								{{ formattedAmount }}
-								<kv-material-icon
-									role="img"
-									aria-label="Edit Donation"
-									title="Edit Donation"
-									class="edit-donation tw-text-action
-									tw-w-3.5
-									tw-h-3.5
-									tw-py-0.5
-									tw-hidden md:tw-inline-block
-									"
-									name="pencil"
-									:icon="mdiPencil"
-								/>
-							</button>
-						</div>
-
-						<div>
-							<div
-								class="donation-tagline tw-text-small tw-text-secondary tw-my-1"
-								data-testid="basket-donation-tagline"
-								v-html="donationTagLine"
-							>
-							</div>
-							<button
-								class="tw-text-small tw-text-link"
-								data-testid="basket-donation-info-lightbox"
-								@click="triggerDefaultLightbox"
-								v-kv-track-event="['basket', 'Donation Info Lightbox', 'Open Lightbox']"
-							>
-								{{ donationDetailsLink }}
-							</button>
-						</div>
-					</div>
-				</div>
-
-				<!-- donation total -->
-				<div
-					class="
-				tw-flex-none
-				tw-w-full
-				md:tw-w-auto
-				md:tw-ml-3
-				lg:tw-ml-4.5
-				tw-mt-1.5
-				md:tw-mt-0"
-				>
-					<div
-						v-show="!editDonation"
-						class="tw-hidden md:tw-block tw-text-right"
-					>
-						<button
-							class="donation-amount"
-							data-testid="basket-donation-edit-button-combined"
-							v-kv-track-event="['basket', 'Edit Donation']"
-							@click="enterEditDonation"
-							title="Edit Donation"
-						>
-							{{ formattedAmount }}
-							<kv-material-icon
-								role="img"
-								aria-label="Edit Donation"
-								title="Edit Donation"
-								class="edit-donation tw-text-action
-								tw-w-3.5
-								tw-h-3.5
-								tw-py-0.5
-								tw-align-bottom
-								"
-								name="pencil"
-								:icon="mdiPencil"
-							/>
-						</button>
-					</div>
-					<div v-show="editDonation" class="small-12 columns donation-amount-input-wrapper">
-						<kv-text-input
-							class="donation-amount-input"
-							data-testid="basket-donation-edit-input"
-							name="donation"
-							id="donation"
-							v-model="amount"
-							@blur="validateInput"
-							@keyup.enter.prevent="updateDonation()"
-						/>
-						<kv-button
-							variant="secondary"
-							class="update-donation-inline-button"
-							data-testid="basket-donation-edit-submit"
-							@click="updateDonation()"
-						>
-							Update
-						</kv-button>
-						<button
-							class="show-for-medium remove-wrapper"
-							@click="updateLoanAmount('remove')"
-							data-testid="basket-donation-remove"
-						>
-							<kv-material-icon
-								class="remove-x tw-text-tertiary"
-								name="small-x"
-								:from-sprite="true"
-								title="Remove donation"
-							/>
-						</button>
-					</div>
-					<donate-repayments
-						v-if="hasLoans"
-						@updating-totals="$emit('updating-totals', $event)"
-						@refreshtotals="$emit('refreshtotals')"
-					/>
-				</div>
-			</div>
-		</template>
-		<template v-if="donateItemExperimentVersion === 'b'">
+		<template>
 			<div class="tw-flex tw-flex-col md:tw-flex-row tw-pb-5">
 				<!-- donation image -->
 				<div class="tw-hidden md:tw-block tw-flex-none md:tw-mr-3 lg:tw-mr-4.5">
 					<img
-						class="donation-img tw-w-12 lg:tw-w-13 tw-h-12 lg:tw-h-13 tw-rounded"
-						:src="imageRequire(`./peace-sign-holding-money.svg`)"
+						class="tw-bg-brand-100 tw-border tw-border-gray-300 tw-w-12 tw-h-12 tw-p-1 tw-rounded"
+						:src="imageRequire(`./leaf_heart.svg`)"
 						alt="donation line item image"
 						data-testid="basket-donation-image"
 					>
@@ -187,403 +16,97 @@
 				<!-- donation text -->
 				<div class="tw-flex-auto">
 					<div class="tw-mb-0.5">
-						<div class="tw-w-full tw-flex">
-							<h2
-								class="tw-flex-1 md:tw-flex-grow tw-text-h3"
-								data-testid="basket-donation-title"
-							>
-								{{ basketDonateModulesExpDonationHeader }}
-							</h2>
-							<button
-								class="donation-amount md:tw-hidden tw-flex-none tw-align-middle"
-								data-testid="basket-donation-edit-button-mobile-pencil"
-								v-kv-track-event="['basket', 'Edit Donation']"
-								@click="enterEditDonation"
-								title="Edit Donation"
-							>
-								<kv-material-icon
-									role="img"
-									aria-label="Edit Donation"
-									title="Edit Donation"
-									class="edit-donation tw-text-action
-								tw-w-3.5
-								tw-h-3.5
-								tw-py-0.5
-								md:tw-hidden"
-									name="pencil"
-									:icon="mdiPencil"
-								/>
-							</button>
-						</div>
-
-						<div
-							v-show="!editDonation"
-							class="md:tw-hidden"
-						>
-							<button
-								class="donation-amount"
-								data-testid="basket-donation-edit-button-mobile-amount"
-								v-kv-track-event="['basket', 'Edit Donation']"
-								@click="enterEditDonation"
-								title="Edit Donation"
-							>
-								{{ formattedAmount }}
-								<kv-material-icon
-									role="img"
-									aria-label="Edit Donation"
-									title="Edit Donation"
-									class="edit-donation tw-text-action
-								tw-w-3.5
-								tw-h-3.5
-								tw-py-0.5
-								tw-hidden md:tw-inline-block
-								"
-									name="pencil"
-									:icon="mdiPencil"
-								/>
-							</button>
-						</div>
-
-						<div>
-							<div
-								class="donation-tagline tw-text-small tw-text-secondary tw-my-1 tw-max-w-2xl"
-								data-testid="basket-donation-tagline"
-							>
-								<p
-									class="tw-text-small tw-text-secondary"
-									v-html="basketDonateModulesExpDonationTagline"
+						<div class="tw-flex tw-items-center tw-justify-between">
+							<div>
+								<div class="tw-w-full tw-flex">
+									<h2
+										class="tw-flex-1 md:tw-flex-grow tw-text-h3"
+										data-testid="basket-donation-title"
+									>
+										{{ basketDonationHeader }}
+									</h2>
+								</div>
+								<div
+									v-show="!editDonation"
+									class="md:tw-hidden"
 								>
-								</p>
-							</div>
-							<button
-								class="tw-text-small tw-text-link"
-								data-testid="basket-donation-info-lightbox"
-								@click="triggerDefaultLightbox"
-								v-kv-track-event="['basket', 'Donation Info Lightbox', 'Open Lightbox']"
-							>
-								{{ donationDetailsLink }}
-							</button>
-						</div>
-					</div>
-				</div>
-
-				<!-- donation total -->
-				<div
-					class="
-				tw-flex-none
-				tw-w-full
-				md:tw-w-auto
-				md:tw-ml-3
-				lg:tw-ml-4.5
-				tw-mt-1.5
-				md:tw-mt-0"
-				>
-					<div
-						v-show="!editDonation"
-						class="tw-hidden md:tw-block tw-text-right"
-					>
-						<button
-							class="donation-amount"
-							data-testid="basket-donation-edit-button-combined"
-							v-kv-track-event="['basket', 'Edit Donation']"
-							@click="enterEditDonation"
-							title="Edit Donation"
-						>
-							{{ formattedAmount }}
-							<kv-material-icon
-								role="img"
-								aria-label="Edit Donation"
-								title="Edit Donation"
-								class="edit-donation tw-text-action
-								tw-w-3.5
-								tw-h-3.5
-								tw-py-0.5
-								tw-align-bottom
-								"
-								name="pencil"
-								:icon="mdiPencil"
-							/>
-						</button>
-					</div>
-					<div v-show="editDonation" class="small-12 columns donation-amount-input-wrapper">
-						<kv-text-input
-							class="donation-amount-input"
-							data-testid="basket-donation-edit-input"
-							name="donation"
-							id="donation"
-							v-model="amount"
-							@blur="validateInput"
-							@keyup.enter.prevent="updateDonation()"
-						/>
-						<kv-button
-							variant="secondary"
-							class="update-donation-inline-button"
-							data-testid="basket-donation-edit-submit"
-							@click="updateDonation()"
-						>
-							Update
-						</kv-button>
-						<button
-							class="show-for-medium remove-wrapper"
-							@click="updateLoanAmount('remove')"
-							data-testid="basket-donation-remove"
-						>
-							<kv-material-icon
-								class="remove-x tw-text-tertiary"
-								name="small-x"
-								:from-sprite="true"
-								title="Remove donation"
-							/>
-						</button>
-					</div>
-					<donate-repayments
-						v-if="hasLoans"
-						@updating-totals="$emit('updating-totals', $event)"
-						@refreshtotals="$emit('refreshtotals')"
-					/>
-				</div>
-			</div>
-		</template>
-		<template v-if="donateItemExperimentVersion === 'c'">
-			<div class="tw-flex tw-items-center">
-				<span class="tw-text-secondary tw-text-small tw-pr-1">Donate to Kiva</span>
-				<hr class="tw-flex-grow">
-			</div>
-			<h3>{{ basketDonateModulesExpDonationHeader }}</h3>
-			<div class="tw-flex tw-flex-col md:tw-flex-row tw-pb-5 tw-mt-2">
-				<!-- donation image -->
-				<div class="tw-hidden md:tw-block tw-flex-none md:tw-mr-3 lg:tw-mr-4.5">
-					<img
-						class="donation-img tw-w-12 lg:tw-w-13 tw-h-12 lg:tw-h-13 tw-rounded"
-						src="@/assets/images/team_donate.png"
-						alt="donation line item image"
-						data-testid="basket-donation-image"
-					>
-				</div>
-
-				<!-- donation text -->
-				<div class="tw-flex-auto">
-					<div class="tw-mb-0.5">
-						<div
-							v-show="!editDonation"
-							class="md:tw-hidden tw-mb-1"
-						>
-							<button
-								class="donation-amount"
-								data-testid="basket-donation-edit-button-mobile-amount"
-								v-kv-track-event="['basket', 'Edit Donation']"
-								@click="enterEditDonation"
-								title="Edit Donation"
-							>
-								{{ formattedAmount }}
-								<kv-material-icon
-									role="img"
-									aria-label="Edit Donation"
-									title="Edit Donation"
-									class="edit-donation
-										tw-inline-flex
+									<button
+										class="donation-amount"
+										data-testid="basket-donation-edit-button-mobile-amount"
+										v-kv-track-event="['basket', 'Edit Donation']"
+										@click="enterEditDonation"
+										title="Edit Donation"
+									>
+										{{ formattedAmount }}
+										<kv-material-icon
+											role="img"
+											aria-label="Edit Donation"
+											title="Edit Donation"
+											class="edit-donation tw-text-action
+											tw-w-3.5
+											tw-h-3.5
+											tw-py-0.5
+											tw-hidden md:tw-inline-block
+											"
+											name="pencil"
+											:icon="mdiPencil"
+										/>
+									</button>
+									<button
+										class="donation-amount md:tw-hidden tw-flex-none tw-align-middle"
+										data-testid="basket-donation-edit-button-mobile-pencil"
+										v-kv-track-event="['basket', 'Edit Donation']"
+										@click="enterEditDonation"
+										title="Edit Donation"
+									>
+										<kv-material-icon
+											role="img"
+											aria-label="Edit Donation"
+											title="Edit Donation"
+											class="edit-donation tw-text-action
 										tw-w-3.5
 										tw-h-3.5
 										tw-py-0.5
-										tw-align-bottom
-										tw-text-action
-									"
-									name="pencil"
-									:icon="mdiPencil"
-								/>
-							</button>
-						</div>
-
-						<div>
-							<div
-								class="donation-tagline tw-text-small tw-text-secondary tw-mb-1 tw-max-w-2xl"
-								data-testid="basket-donation-tagline"
-							>
-								<p
-									class="tw-text-small tw-text-secondary"
-									v-html="basketDonateModulesExpDonationTagline"
+										md:tw-hidden"
+											name="pencil"
+											:icon="mdiPencil"
+										/>
+									</button>
+								</div>
+							</div>
+							<div class="tw-block md:tw-hidden tw-flex-none md:tw-mr-3 lg:tw-mr-4.5">
+								<img
+									class="tw-w-7 tw-h-7 tw-rounded"
+									:src="imageRequire(`./leaf_heart.svg`)"
+									alt="donation line item image"
+									data-testid="basket-donation-image"
 								>
-								</p>
 							</div>
-							<button
-								class="tw-text-small tw-text-link"
-								data-testid="basket-donation-info-lightbox"
-								@click="triggerDefaultLightbox"
-								v-kv-track-event="['basket', 'Donation Info Lightbox', 'Open Lightbox']"
-							>
-								{{ donationDetailsLink }}
-							</button>
-						</div>
-					</div>
-				</div>
-
-				<!-- donation total -->
-				<div
-					class="
-				tw-flex-none
-				tw-w-full
-				md:tw-w-auto
-				md:tw-ml-3
-				lg:tw-ml-4.5
-				tw-mt-1.5
-				md:tw-mt-0"
-				>
-					<div
-						v-show="!editDonation"
-						class="tw-hidden md:tw-block tw-text-right"
-					>
-						<button
-							class="donation-amount"
-							data-testid="basket-donation-edit-button-combined"
-							v-kv-track-event="['basket', 'Edit Donation']"
-							@click="enterEditDonation"
-							title="Edit Donation"
-						>
-							{{ formattedAmount }}
-							<kv-material-icon
-								role="img"
-								aria-label="Edit Donation"
-								title="Edit Donation"
-								class="edit-donation tw-text-action
-								tw-w-3.5
-								tw-h-3.5
-								tw-py-0.5
-								tw-align-bottom
-								"
-								name="pencil"
-								:icon="mdiPencil"
-							/>
-						</button>
-					</div>
-					<div v-show="editDonation" class="small-12 columns donation-amount-input-wrapper">
-						<kv-text-input
-							class="donation-amount-input"
-							data-testid="basket-donation-edit-input"
-							name="donation"
-							id="donation"
-							v-model="amount"
-							@blur="validateInput"
-							@keyup.enter.prevent="updateDonation()"
-						/>
-						<kv-button
-							variant="secondary"
-							class="update-donation-inline-button"
-							data-testid="basket-donation-edit-submit"
-							@click="updateDonation()"
-						>
-							Update
-						</kv-button>
-						<button
-							class="show-for-medium remove-wrapper"
-							@click="updateLoanAmount('remove')"
-							data-testid="basket-donation-remove"
-						>
-							<kv-material-icon
-								class="remove-x tw-text-tertiary"
-								name="small-x"
-								:from-sprite="true"
-								title="Remove donation"
-							/>
-						</button>
-					</div>
-					<donate-repayments
-						v-if="hasLoans"
-						@updating-totals="$emit('updating-totals', $event)"
-						@refreshtotals="$emit('refreshtotals')"
-					/>
-				</div>
-			</div>
-		</template>
-		<template v-if="donateItemExperimentVersion === 'd'">
-			<div class="tw-flex tw-flex-col md:tw-flex-row tw-pb-5">
-				<!-- donation image -->
-				<div class="tw-hidden md:tw-block tw-flex-none md:tw-mr-3 lg:tw-mr-4.5">
-					<img
-						class="donation-img tw-w-12 lg:tw-w-13 tw-h-12 lg:tw-h-13 tw-rounded"
-						:src="imageRequire(`./peace-sign-holding-money.svg`)"
-						alt="donation line item image"
-						data-testid="basket-donation-image"
-					>
-				</div>
-
-				<!-- donation text -->
-				<div class="tw-flex-auto">
-					<div class="tw-mb-0.5">
-						<div class="tw-w-full tw-flex">
-							<h2
-								class="tw-flex-1 md:tw-flex-grow tw-text-h3"
-								data-testid="basket-donation-title"
-							>
-								{{ basketDonateModulesExpDonationHeader }}
-							</h2>
-							<button
-								class="donation-amount md:tw-hidden tw-flex-none tw-align-middle"
-								data-testid="basket-donation-edit-button-mobile-pencil"
-								v-kv-track-event="['basket', 'Edit Donation']"
-								@click="enterEditDonation"
-								title="Edit Donation"
-							>
-								<kv-material-icon
-									role="img"
-									aria-label="Edit Donation"
-									title="Edit Donation"
-									class="edit-donation tw-text-action
-									tw-w-3.5
-									tw-h-3.5
-									tw-py-0.5
-									md:tw-hidden"
-									name="pencil"
-									:icon="mdiPencil"
-								/>
-							</button>
-						</div>
-
-						<div
-							v-show="!editDonation"
-							class="md:tw-hidden"
-						>
-							<button
-								class="donation-amount"
-								data-testid="basket-donation-edit-button-mobile-amount"
-								v-kv-track-event="['basket', 'Edit Donation']"
-								@click="enterEditDonation"
-								title="Edit Donation"
-							>
-								{{ formattedAmount }}
-								<kv-material-icon
-									role="img"
-									aria-label="Edit Donation"
-									title="Edit Donation"
-									class="edit-donation tw-text-action
-									tw-w-3.5
-									tw-h-3.5
-									tw-py-0.5
-									tw-hidden md:tw-inline-block
-									"
-									name="pencil"
-									:icon="mdiPencil"
-								/>
-							</button>
 						</div>
 
 						<div>
 							<div
-								class="donation-tagline tw-text-small tw-text-secondary tw-my-1 tw-max-w-2xl"
+								class="donation-tagline tw-text-small tw-text-base tw-my-1 tw-max-w-2xl"
 								data-testid="basket-donation-tagline"
 							>
 								<p
-									class="tw-text-small tw-text-secondary"
-									v-html="basketDonateModulesExpDonationTagline"
+									class="tw-text-small tw-text-base"
 								>
+									<!-- eslint-disable-next-line max-len -->
+									At Kiva, 100 % of your loan supports the borrower — we never take a fee.As a nonprofit, donations are crucial to advancing our mission of expanding financial access for underserved communities.
 								</p>
 							</div>
 							<button
-								class="tw-text-small tw-text-link"
+								class="tw-flex tw-items-center tw-text-small tw-text-link"
 								data-testid="basket-donation-info-lightbox"
 								@click="triggerDefaultLightbox"
 								v-kv-track-event="['basket', 'Donation Info Lightbox', 'Open Lightbox']"
 							>
 								{{ donationDetailsLink }}
+								<kv-material-icon
+									class="tw-ml-0.5 tw-w-2 tw-h-2"
+									:icon="mdiArrowRight"
+								/>
 							</button>
 						</div>
 					</div>
@@ -666,91 +189,6 @@
 				</div>
 			</div>
 		</template>
-		<template v-if="donateItemExperimentVersion === 'e' && orderTotalVariant && hasLoans">
-			<div class="tw-flex tw-flex-col tw-w-full tw-pb-2">
-				<div class="tw-flex tw-flex-row tw-w-full">
-					<!-- donation text -->
-					<div class="tw-w-auto tw-text-left md:tw-text-right tw-flex-1">
-						<h2
-							class="tw-text-h3"
-							data-testid="basket-donation-title"
-						>
-							Donate to Kiva:
-						</h2>
-					</div>
-
-					<!-- donation total -->
-					<div
-						v-show="!editDonation"
-						class="tw-block tw-text-right"
-					>
-						<button
-							class="donation-amount tw-text-h3 tw-flex"
-							data-testid="basket-donation-edit-button-combined"
-							v-kv-track-event="['basket', 'Edit Donation']"
-							@click="enterEditDonation"
-							title="Edit Donation"
-						>
-							<div class="tw-text-right tw-inline-block tw-pl-2">
-								{{ formattedAmount }}
-							</div>
-							<kv-material-icon
-								role="img"
-								aria-label="Edit Donation"
-								title="Edit Donation"
-								class="edit-donation
-											tw-text-action
-											tw-w-2.5
-											tw-ml-2
-											tw-h-3.5
-											tw-py-0.5
-											tw-align-bottom
-									"
-								name="pencil"
-								:icon="mdiPencil"
-							/>
-						</button>
-					</div>
-					<div v-show="editDonation" class="donation-amount-input-wrapper">
-						<kv-text-input
-							class="donation-amount-input"
-							data-testid="basket-donation-edit-input"
-							name="donation"
-							id="donation"
-							v-model="amount"
-							@blur="validateInput"
-							@keyup.enter.prevent="updateDonation()"
-						/>
-						<kv-button
-							variant="secondary"
-							class="update-donation-inline-button"
-							data-testid="basket-donation-edit-submit"
-							@click="updateDonation()"
-						>
-							Update
-						</kv-button>
-						<button
-							class="show-for-medium remove-wrapper"
-							@click="updateLoanAmount('remove')"
-							data-testid="basket-donation-remove"
-						>
-							<kv-material-icon
-								class="remove-x tw-text-tertiary"
-								name="small-x"
-								:from-sprite="true"
-								title="Remove donation"
-							/>
-						</button>
-					</div>
-				</div>
-
-				<donate-repayments
-					v-if="hasLoans"
-					@updating-totals="$emit('updating-totals', $event)"
-					@refreshtotals="$emit('refreshtotals')"
-				/>
-			</div>
-		</template>
 		<!-- Donation nudge lightbox -->
 		<donation-nudge-lightbox
 			ref="nudgeLightbox"
@@ -766,59 +204,27 @@
 		<kv-lightbox
 			:visible="defaultLbVisible"
 			@lightbox-closed="lightboxClosed"
-			title="How does Kiva use donations?"
+			title="Your donations power sustainable solutions for financial access."
 			data-testid="basket-donation-how-kiva-uses-lightbox"
 		>
-			<div class="tw-prose">
-				<p>
-					100% of money lent on Kiva goes to funding loans,
-					so we rely on donations to continue this important work.
-					Each dollar helps us invest in systemic change and spread financial inclusion around the world.
-				</p>
-				<p>
-					We’re investing in lasting solutions for a more inclusive world through your donations.
-					Projects like...
-				</p>
-				<ul>
-					<li>
-						Kiva Capital, scaling our model for institutional investors.
-					</li>
-					<li>
-						Kiva Labs, supporting small and growing social enterprises around the world.
-					</li>
-				</ul>
-				<p>
-					Your donations also help over 100 Kiva employees and more than 400 volunteers
-					make your loans happen!
-				</p>
-			</div>
+			<how-kiva-uses-donation />
 		</kv-lightbox>
 	</div>
 </template>
 
 <script>
 import numeral from 'numeral';
-import { processPageContentFlat } from '@/util/contentfulUtils';
-import { mdiPencil } from '@mdi/js';
-import logFormatter from '@/util/logFormatter';
-import {
-	getExperimentSettingCached,
-	trackExperimentVersion
-} from '@/util/experiment/experimentUtils';
-
-import experimentQuery from '@/graphql/query/experimentAssignment.graphql';
-import donationDataQuery from '@/graphql/query/checkout/donationData.graphql';
+import { mdiPencil, mdiArrowRight } from '@mdi/js';
 import updateDonation from '@/graphql/mutation/updateDonation.graphql';
-
+import HowKivaUsesDonation from '@/components/Checkout/HowKivaUsesDonation';
 import DonationNudgeLightbox from '@/components/Checkout/DonationNudge/DonationNudgeLightbox';
 import DonateRepayments from '@/components/Checkout/DonateRepaymentsToggle';
 import KvMaterialIcon from '~/@kiva/kv-components/vue/KvMaterialIcon';
-import { documentToHtmlString } from '~/@contentful/rich-text-html-renderer';
 import KvTextInput from '~/@kiva/kv-components/vue/KvTextInput';
 import KvButton from '~/@kiva/kv-components/vue/KvButton';
 import KvLightbox from '~/@kiva/kv-components/vue/KvLightbox';
 
-const imageRequire = require.context('@/assets/images/kiva-classic-illustrations/', true);
+const imageRequire = require.context('@/assets/images/', true);
 
 export default {
 	name: 'DonationItem',
@@ -829,6 +235,7 @@ export default {
 		KvTextInput,
 		DonateRepayments,
 		DonationNudgeLightbox,
+		HowKivaUsesDonation,
 	},
 	inject: ['apollo', 'cookieStore'],
 	props: {
@@ -857,43 +264,16 @@ export default {
 			editDonation: false,
 			nudgeLightboxVisible: false,
 			loanHistoryCount: null,
-			donationDetailsLink: 'How Kiva uses donations',
-			dynamicDonationItem: '',
+			donationDetailsLink: 'Learn how Kiva uses your donation',
 			mdiPencil,
 			imageRequire,
-			donateItemExperimentVersion: 'a'
+			mdiArrowRight
 		};
 	},
-	apollo: {
-		preFetch(config, client) {
-			return client.query({
-				query: donationDataQuery
-			}).then(() => {
-				return client.query({ query: experimentQuery, variables: { id: 'basket_donate_modules' } });
-			}).catch(errorResponse => {
-				logFormatter(errorResponse, 'error');
-			});
-		}
-	},
 	created() {
-		const donateModuleExpData = getExperimentSettingCached(this.apollo, 'basket_donate_modules');
-		if (donateModuleExpData?.enabled) {
-			const { version } = trackExperimentVersion(
-				this.apollo,
-				this.$kvTrackEvent,
-				'Basket',
-				'basket_donate_modules',
-				'EXP-ACK-440-Oct2022'
-			);
-			if (version) {
-				this.donateItemExperimentVersion = version;
-			}
-		}
-
 		const donationProperty = this.donation.isUserEdited ? 'user-set' : 'kiva-set';
 		this.$kvTrackEvent('basket', 'show', 'tip-donation-amount', donationProperty, this.donation.price * 100);
 		this.$kvTrackEvent('basket', 'show', 'loans', null, this.loanCount);
-		this.setupContentfulContent();
 	},
 	watch: {
 		// watching the computed serverAmount property allows us to get set updates based on nested data props
@@ -914,53 +294,9 @@ export default {
 		formattedAmount() {
 			return numeral(this.amount).format('$0,0.00');
 		},
-		donationTagLine() {
-			const loanCost = numeral(Math.floor(this.loanReservationTotal * 0.12)).format('$0,0');
-			// if there is dynamic donation tagline from contentful, use that.
-			if (this.dynamicDonationItem) {
-				// process contentful content as rich text
-				const contentfulHTML = documentToHtmlString(this.dynamicDonationItem);
-				// replace magic variable ###loan_costs###
-				return contentfulHTML.replace(/###loan_costs###/g, loanCost);
-			}
-
-			let coverOurCosts = `${this.loanCount > 1 ? 'These loans cost' : 'This loan costs'}`;
-			coverOurCosts += ` Kiva more than ${loanCost} to facilitate. Will you help us cover our costs?`;
-			return coverOurCosts;
-		},
-		basketDonateModulesExpDonationHeader() {
-			if (!this.hasLoans) {
-				return this.donationTitle;
-			}
-
-			switch (this.donateItemExperimentVersion) {
-				// variant a is the control, and uses this.donationTitle
-				case 'b':
-				case 'c':
-				default:
-					return 'Help our team find more borrowers';
-				case 'd':
-					return 'Help cover the cost of your loan';
-			}
+		basketDonationHeader() {
+			return `Help cover the cost of your loan${this.loanCount > 1 ? 's' : ''}`;
 		},
-		basketDonateModulesExpDonationTagline() {
-			if (!this.hasLoans) {
-				// eslint-disable-next-line max-len
-				return 'As an international nonprofit, we’re committed to transparency about how your funds are used. 100% of money lent on Kiva goes to supporting borrowers. Your donations help us cover the costs of distributing these loans and reach more borrowers across the globe.';
-			}
-
-			switch (this.donateItemExperimentVersion) {
-				// variant a is the control, and uses this.donationTagLine
-				case 'b':
-				case 'c':
-				default:
-					// eslint-disable-next-line max-len
-					return '<em>"Our team works one-on-one with partners so they can find and support borrowers with services like training and healthcare.	Your tips make our work possible."</em><br> &dash; Carolina, Borrower success team.';
-				case 'd':
-					// eslint-disable-next-line max-len
-					return 'Loans aren\'t free for us to manage. Our expenses include borrower due diligence, partner training, site maintenance and more. We rely on our generous donors to break even.';
-			}
-		}
 	},
 	methods: {
 		updateDonationTo(amount) {
@@ -983,15 +319,6 @@ export default {
 		lightboxClosed() {
 			this.defaultLbVisible = false;
 		},
-		setupContentfulContent() {
-			const contentfulContentRaw = this.apollo.readQuery({
-				query: donationDataQuery,
-			});
-			const pageEntry = contentfulContentRaw?.contentful?.entries?.items?.[0] ?? null;
-			const pageData = pageEntry ? processPageContentFlat(pageEntry) : null;
-			// eslint-disable-next-line max-len
-			this.dynamicDonationItem = pageData?.page?.contentGroups?.checkoutDonationItem?.contents?.[0]?.richText ?? '';
-		},
 		updateDonation() {
 			this.editDonation = false;
 			this.$emit('updating-totals', true);
diff --git a/src/components/Checkout/DonationNudge/DonationNudgeLightbox.vue b/src/components/Checkout/DonationNudge/DonationNudgeLightbox.vue
index db5c92418b..c78c1e58ee 100644
--- a/src/components/Checkout/DonationNudge/DonationNudgeLightbox.vue
+++ b/src/components/Checkout/DonationNudge/DonationNudgeLightbox.vue
@@ -20,10 +20,7 @@
 		</template>
 		<div v-if="!zeroUpsellVisible" id="nudge-donation-container" data-testid="nudge-donation-container">
 			<div id="nudge-donation-top">
-				<p>
-					<!-- eslint-disable-next-line max-len -->
-					Reaching financially excluded people around the world requires things like performing due diligence in over 80 countries, training hundreds of volunteer translators, and maintaining the infrastructure to facilitate over $1B in loans.
-				</p>
+				<how-kiva-uses-donation />
 				<donation-nudge-boxes
 					ref="nudgeBoxes"
 					id="nudge-donation-top-boxes-wrapper"
@@ -100,6 +97,7 @@ import DonationNudgeBoxes from '@/components/Checkout/DonationNudge/DonationNudg
 import KvCharityNavigator from '@/components/Kv/KvCharityNavigator';
 import { mdiInformation } from '@mdi/js';
 import HeartIcon from '@/assets/icons/inline/heart-icon.svg';
+import HowKivaUsesDonation from '@/components/Checkout/HowKivaUsesDonation';
 import KvButton from '~/@kiva/kv-components/vue/KvButton';
 import KvLightbox from '~/@kiva/kv-components/vue/KvLightbox';
 import KvMaterialIcon from '~/@kiva/kv-components/vue/KvMaterialIcon';
@@ -110,7 +108,7 @@ export default {
 		return {
 			mdiInformation,
 			zeroUpsellVisible: false,
-			title: 'We rely on donations to reach the people who need it the most',
+			title: 'Your donations allow us to do the work that makes lending possible.',
 		};
 	},
 	inject: ['cookieStore'],
@@ -121,6 +119,7 @@ export default {
 		KvCharityNavigator,
 		DonationNudgeBoxes,
 		HeartIcon,
+		HowKivaUsesDonation,
 	},
 	props: {
 		experimentalFooter: {
diff --git a/src/components/Checkout/HowKivaUsesDonation.vue b/src/components/Checkout/HowKivaUsesDonation.vue
new file mode 100644
index 0000000000..d491d37de4
--- /dev/null
+++ b/src/components/Checkout/HowKivaUsesDonation.vue
@@ -0,0 +1,45 @@
+<template>
+	<div ref="content" class="tw-prose tw-text-base">
+		<p>
+			<!-- eslint-disable-next-line max-len -->
+			At Kiva, 100% of your loan goes toward supporting borrowers – we never take a fee from lenders. Instead, we rely on donations to support our impactful work of expanding financial access including:
+		</p>
+		<div class="tw-flex tw-flex-col tw-gap-2">
+			<div class="tw-flex tw-justify-start tw-items-center tw-gap-2 tw-not-prose">
+				<img
+					:src="imageRequire(`./globe.svg`)" alt="global real impact icon"
+					class="tw-w-7 lg:tw-w-8 tw-h-8 tw-inline-block"
+				>
+				<!-- eslint-disable-next-line max-len -->
+				<p>Ensure fair and responsible lending practices that deliver real impact for underserved individuals</p>
+			</div>
+			<div class="tw-flex tw-justify-start tw-items-center tw-gap-2 tw-not-prose">
+				<img
+					:src="imageRequire(`./support.svg`)" alt="donation support"
+					class="tw-w-7 lg:tw-w-8 tw-h-8 tw-inline-block"
+				>
+				<!-- eslint-disable-next-line max-len -->
+				<p>Sustain the infrastructure needed to distribute $1M in loans each week to borrowers around the world</p>
+			</div>
+			<div class="tw-flex tw-justify-start tw-items-center tw-gap-2 tw-not-prose">
+				<img
+					:src="imageRequire(`./puzzle.svg`)" alt="donation partners"
+					class="tw-w-7 lg:tw-w-8 tw-h-8 tw-inline-block"
+				>
+				<p>Partner with impact-first organizations operating directly in the communities Kiva serves</p>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+const imageRequire = require.context('@/assets/images/', true);
+
+export default {
+	name: 'HowKivaUsesDonation',
+	data() {
+		return {
+			imageRequire
+		};
+	}
+};
+</script>