switched checkout component to USP communication (instead of installment list); added USP communication to express checkout modal if payment type is not set (backwards compatibility); bugfix for express button display in sw6 off-canvas cart (too wide)

netzkollektiv · netzkollektiv · commit 846ffbcd65cb · 2024-09-24T10:43:39.000+02:00
diff --git a/src/components/easycredit-box-listing/easycredit-box-listing.scss b/src/components/easycredit-box-listing/easycredit-box-listing.scss
@@ -87,7 +87,7 @@
     }
     &__content-heading {
         margin-bottom: 15px;
-        font-size: $font-size-heading-sm;
+        font-size: $font-size-lg;
         line-height: $line-height-heading-lg;
         font-weight: bold;
     } 
diff --git a/src/components/easycredit-checkout/easycredit-checkout.scss b/src/components/easycredit-checkout/easycredit-checkout.scss
@@ -80,6 +80,32 @@
     }
   }
 
+  .h4 {
+    margin-bottom: 10px;
+    color: $font-color;
+  }
+
+  &__usp {
+    list-style: none;
+    margin-top: 0;
+    margin-bottom: 20px;
+    padding: 0;
+
+    li {
+      margin-bottom: 5px;
+      padding-left: 26px;
+
+      @include background-svg($icon-checkmark-circle);
+      background-position: left center;
+      background-repeat: no-repeat;
+      background-size: 16px 16px;
+
+      font-size: $font-size-sm;
+      line-height: $line-height;
+      color: $font-color;
+    }
+  }
+
   &__instalments {
     margin: 0;
     padding: 0;
@@ -214,6 +240,17 @@
     }
   }
 
+  &__small-print {
+    margin-top: 20px;
+    color: #8095AC;
+
+    small {
+      display: block;
+      font-size: $font-size-xxs;
+      line-height: $line-height;
+    }
+  }
+
   .ec-payment-plan {
     strong {
       color: $font-color;
diff --git a/src/components/easycredit-checkout/easycredit-checkout.stories.tsx b/src/components/easycredit-checkout/easycredit-checkout.stories.tsx
@@ -47,7 +47,7 @@ Sobald der Kunde die PaymentPage durchlaufen hat, zeigt das Widget die vom Kunde
 };
 
 let args = {
-    webshopId: '2.de.9999.9999',
+    webshopId: '2.de.7387.2',
     amount: 820.31,
     isActive: true,
     alert: '',
diff --git a/src/components/easycredit-checkout/easycredit-checkout.tsx b/src/components/easycredit-checkout/easycredit-checkout.tsx
@@ -168,6 +168,32 @@ export class EasycreditCheckout {
     ])
   }
 
+  getCheckoutInstallmentUspFragment () {
+    if (this.alert) {
+      return
+    }
+
+    return ([<div class="ec-checkout__body">
+        <div class="h4">Ihre Vorteile</div>
+        <ul class="ec-checkout__usp" >
+          <li>Frühestens <strong>30 Tage</strong> nach Lieferung zahlen</li>
+          <li>Flexible monatliche Wunschrate</li>
+          <li>Kostenfreie Ratenanpassung & Sondertilgung</li>
+        </ul>
+
+        <div class="ec-checkout__actions form-submit">
+          <button type="button" class={{ 'btn': true, 'btn-primary': true, "loading": this.submitButtonClicked }} disabled={this.submitButtonClicked} onClick={() => this.submitHandler()}>
+            Weiter zu easyCredit-Ratenkauf
+          </button>
+        </div>
+
+        <p class="ec-checkout__small-print">
+          {this.getPrivacyFragment({intro: false})}
+        </p>
+      </div>
+    ])
+  }
+
   getCheckoutBillPaymentFragment () {
     if (this.alert) {
       return
@@ -180,14 +206,21 @@ export class EasycreditCheckout {
           </div>
         </easycredit-checkout-totals>
 
-        {this.getPrivacyFragment({intro: false})}
+        <div class="h4">Ihre Vorteile</div>
+        <ul class="ec-checkout__usp" >
+          <li>Frühestens <strong>30 Tage</strong> nach Lieferung zahlen</li>
+          <li>Keine zusätzlichen Kosten</li>
+        </ul>
 
         <div class="ec-checkout__actions form-submit">
-        <button type="button" class={{ 'btn': true, 'btn-primary': true, "loading": this.submitButtonClicked }} disabled={this.submitButtonClicked} onClick={() => this.submitHandler()}>
-            Weiter zum Rechnungskauf
+          <button type="button" class={{ 'btn': true, 'btn-primary': true, "loading": this.submitButtonClicked }} disabled={this.submitButtonClicked} onClick={() => this.submitHandler()}>
+            Weiter zu easyCredit-Rechnung
           </button>
         </div>
 
+        <p class="ec-checkout__small-print">
+          {this.getPrivacyFragment({intro: false})}
+        </p>
     </div>])
   }
 
@@ -238,7 +271,7 @@ export class EasycreditCheckout {
                   { this.alert }
                 </div>
               }
-              { this.isEnabled(METHODS.INSTALLMENT) && this.getCheckoutInstallmentFragment() }
+              { this.isEnabled(METHODS.INSTALLMENT) && this.getCheckoutInstallmentUspFragment() }
               { this.isEnabled(METHODS.BILL) && this.getCheckoutBillPaymentFragment() }
             </div>
           }
diff --git a/src/components/easycredit-express-button/easycredit-express-button.stories.tsx b/src/components/easycredit-express-button/easycredit-express-button.stories.tsx
@@ -43,7 +43,7 @@ export default {
 }
 
 let args = {
-    webshopId: '2.de.9999.9999',
+    webshopId: '2.de.7387.2',
     amount: 299,
     fullWidth: false,
     // redirectUrl: 'https://easycredit-ratenkauf.de/'
diff --git a/src/components/easycredit-express-button/easycredit-express-button.tsx b/src/components/easycredit-express-button/easycredit-express-button.tsx
@@ -13,14 +13,15 @@ import { validateAmount } from '../../utils/validation';
 export class EasycreditExpressButton {
   @Prop() webshopId: string
   @Prop({ mutable: true }) amount: number
-  @Prop({ mutable: true }) paymentTypes: string = METHODS.INSTALLMENT
+  @Prop({ mutable: true }) paymentTypes: string
   @Prop() fullWidth: boolean = false
   @Prop() redirectUrl: string
 
   @State() buttonWidth: string = '100%'
   @State() selectedPaymentType: METHODS
   @State() installmentPlans: InstallmentPlans = null
   @State() selectedInstallment: InstallmentPlan = null
+  @State() paymentTypesEmpty: boolean = false
 
   infopageModal!: HTMLEasycreditModalElement
   checkoutModal!: HTMLEasycreditModalElement
@@ -79,6 +80,11 @@ export class EasycreditExpressButton {
   }
 
   async componentWillLoad() {
+    if (!this.paymentTypes) {
+      this.paymentTypes = METHODS.INSTALLMENT
+      this.paymentTypesEmpty = true
+    }
+
     this.caps = new Caps(this.paymentTypes)
     
     try {
@@ -93,6 +99,18 @@ export class EasycreditExpressButton {
     this.onAmountChanged(this.amount, null);
   }
 
+  getInstallmentUspFragment () {
+    return ([<div class="ec-checkout__body">
+        <div class="h4">Ihre Vorteile</div>
+        <ul class="ec-usp" >
+          <li>Frühestens <strong>30 Tage</strong> nach Lieferung zahlen</li>
+          <li>Flexible monatliche Wunschrate</li>
+          <li>Kostenfreie Ratenanpassung & Sondertilgung</li>
+        </ul>
+      </div>
+    ])
+  }
+
   getCheckoutModalFragment() {
       return ([
           <easycredit-modal class={{ "ec-express-button__modal__checkout": true }}
@@ -120,13 +138,20 @@ export class EasycreditExpressButton {
                               }
 
                               {this.selectedPaymentType === METHODS.INSTALLMENT &&
+                              !this.paymentTypesEmpty &&
                                   <easycredit-checkout-installments installments={JSON.stringify(this.installmentPlans.plans)} rows={3} />
                               }
                               {this.selectedPaymentType === METHODS.BILL &&
                                   <easycredit-checkout-bill-payment-timeline></easycredit-checkout-bill-payment-timeline>
                               }
 
-                              <easycredit-checkout-totals amount={this.amount} selectedInstallment={this.selectedInstallment} installmentPlans={this.installmentPlans}></easycredit-checkout-totals>
+                              {!this.paymentTypesEmpty &&
+                                  <easycredit-checkout-totals amount={this.amount} selectedInstallment={this.selectedInstallment} installmentPlans={this.installmentPlans}></easycredit-checkout-totals>
+                              }
+
+                              {this.paymentTypesEmpty &&
+                                  this.getInstallmentUspFragment()
+                              }
                           </div>
 
                           <div class="ec-background">
diff --git a/src/components/easycredit-express-button/readme.md b/src/components/easycredit-express-button/readme.md
@@ -7,13 +7,13 @@
 
 ## Properties
 
-| Property       | Attribute       | Description | Type      | Default         |
-| -------------- | --------------- | ----------- | --------- | --------------- |
-| `amount`       | `amount`        |             | `number`  | `undefined`     |
-| `fullWidth`    | `full-width`    |             | `boolean` | `false`         |
-| `paymentTypes` | `payment-types` |             | `string`  | `'INSTALLMENT'` |
-| `redirectUrl`  | `redirect-url`  |             | `string`  | `undefined`     |
-| `webshopId`    | `webshop-id`    |             | `string`  | `undefined`     |
+| Property       | Attribute       | Description | Type      | Default     |
+| -------------- | --------------- | ----------- | --------- | ----------- |
+| `amount`       | `amount`        |             | `number`  | `undefined` |
+| `fullWidth`    | `full-width`    |             | `boolean` | `false`     |
+| `paymentTypes` | `payment-types` |             | `string`  | `undefined` |
+| `redirectUrl`  | `redirect-url`  |             | `string`  | `undefined` |
+| `webshopId`    | `webshop-id`    |             | `string`  | `undefined` |
 
 
 ## Dependencies
diff --git a/src/components/easycredit-infopage/easycredit-infopage.scss b/src/components/easycredit-infopage/easycredit-infopage.scss
@@ -74,7 +74,7 @@ $infpage-max-width: 650px;
       font-size: $font-size-lg;
 
       &::before {
-        @include content-svg($icon-checkmark);
+        @include content-svg($icon-checkmark-circle-lg);
         margin-right: 20px;
         width: 41px;
         height: 41px;
diff --git a/src/components/easycredit-widget/easycredit-widget.stories.tsx b/src/components/easycredit-widget/easycredit-widget.stories.tsx
@@ -53,7 +53,7 @@ export default {
 };
 
 let args = {
-  webshopId: '2.de.9999.9999',
+  webshopId: '2.de.7387.2',
   amount: 500,
   extended: true,
   displayType: '',
diff --git a/src/components/easycredit-widget/readme.md b/src/components/easycredit-widget/readme.md
@@ -7,14 +7,14 @@
 
 ## Properties
 
-| Property           | Attribute           | Description | Type      | Default         |
-| ------------------ | ------------------- | ----------- | --------- | --------------- |
-| `amount`           | `amount`            |             | `number`  | `undefined`     |
-| `disableFlexprice` | `disable-flexprice` |             | `boolean` | `false`         |
-| `displayType`      | `display-type`      |             | `string`  | `undefined`     |
-| `extended`         | `extended`          |             | `boolean` | `true`          |
-| `paymentTypes`     | `payment-types`     |             | `string`  | `'INSTALLMENT'` |
-| `webshopId`        | `webshop-id`        |             | `string`  | `undefined`     |
+| Property           | Attribute           | Description | Type      | Default               |
+| ------------------ | ------------------- | ----------- | --------- | --------------------- |
+| `amount`           | `amount`            |             | `number`  | `undefined`           |
+| `disableFlexprice` | `disable-flexprice` |             | `boolean` | `false`               |
+| `displayType`      | `display-type`      |             | `string`  | `undefined`           |
+| `extended`         | `extended`          |             | `boolean` | `true`                |
+| `paymentTypes`     | `payment-types`     |             | `string`  | `METHODS.INSTALLMENT` |
+| `webshopId`        | `webshop-id`        |             | `string`  | `undefined`           |
 
 
 ## Dependencies
diff --git a/src/globals/base.scss b/src/globals/base.scss
@@ -49,7 +49,7 @@ $font-size-heading-xxl: 46px;
 $font-size-heading-xl: 30px;
 $font-size-heading-lg: 25px;
 $font-size-heading: 20px;
-$font-size-heading-sm: 16px;
+$font-size-heading-sm: 18px;
 
 $font-size-xl: 18px;
 $font-size-lg: 16px;
@@ -95,7 +95,10 @@ $circle-width-33-secondary: calc(100% * 0.33 * 0.33);
 $ratenkauf-icon: '<svg id="easyCredit" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><defs><style>.cls-1{fill:#0066b3;}.cls-2{fill:#fff;}</style></defs><circle class="cls-1" cx="60" cy="60" r="60"/><path class="cls-2" d="M96.1094,50.91c-2.3081-.7851-6.5437-1.6761-13.6446-1.6761a26.2577,26.2577,0,0,0-17.5583,6.6105,5.791,5.791,0,0,1-1.7742,1.0521,38.9812,38.9812,0,0,1-13.86,2.03h-.1375c-4.679,0-7.6152-.7852-9.3306-2.19-1.57-1.2995-2.2179-3.2308-2.1-5.9551H68.6121l.0982-.4476a48.708,48.708,0,0,0,1.209-8.1926c0-6.3634-2.1274-11.3173-5.8136-14.6737s-8.8437-5.0718-14.8142-5.0718c-10.0883,0-16.9222,4.0747-21.22,9.5078A28.96,28.96,0,0,0,22.05,49.34,20.1865,20.1865,0,0,0,28.11,64.1984c3.9959,3.8235,9.8606,6.171,17.4285,6.171A90.6105,90.6105,0,0,0,56.4,69.7412,28.2979,28.2979,0,0,0,55.4346,77c0,6.0491,2.0414,11.1916,5.888,14.87,3.9256,3.7528,9.5544,5.7352,16.2512,5.7352A42.613,42.613,0,0,0,87.36,96.3683l1.311-.3376,2.9323-14.1321L87.6777,83.72a20.3115,20.3115,0,0,1-8.479,1.7272,9.2547,9.2547,0,0,1-6.28-1.9629c-1.5232-1.3621-2.2965-3.4388-2.2965-6.1789a18.9209,18.9209,0,0,1,3.4621-10.587,12.1231,12.1231,0,0,1,10.0175-5.3152A27.9356,27.9356,0,0,1,93.13,62.64l2.3119.7851L97.95,51.5267ZM38.8618,41.5518a10.7482,10.7482,0,0,1,10.6259-7.7137,6.2237,6.2237,0,0,1,5.4092,2.3868,9.5837,9.5837,0,0,1,1.5191,5.3269Z"/></svg>';
 $icon-close-blue: '<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L10 10M1 10L10 1" stroke="#002C5A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
 $icon-close-white: '<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L10 10M1 10L10 1" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
-$icon-checkmark: '<svg width="41" height="41" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="20.78" cy="20.42" r="20" fill="#0066B3"/><path d="M29.5 15.45c-.11-.08-.39-.31-.83-.7-.42-.4-.69-.64-.82-.75a.42.42 0 00-.39-.11.53.53 0 00-.4.15l-1.32 1.49A815.49 815.49 0 0020 21.86l-1.29 1.4-.78-.62a97.04 97.04 0 01-3.6-2.9L13.4 19a.52.52 0 00-.43-.11.37.37 0 00-.31.15l-.75.82-.54.63c-.1.1-.16.23-.16.39.03.16.1.27.2.35l.93.98c.63.62 1.32 1.33 2.07 2.1.78.76 1.5 1.48 2.15 2.15.65.66 1.02 1 1.1 1.06.13.13.3.25.54.35.24.08.48.1.74.08.3-.03.53-.08.7-.16.19-.08.35-.18.48-.3l1.56-1.85a1050.07 1050.07 0 007.85-9.45c.1-.13.14-.26.12-.39a.63.63 0 00-.16-.35z" fill="#fff"/></svg>';
+$icon-checkmark: '<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.1 0.200028C11.5418 0.531399 11.6314 1.1582 11.3 1.60003L5.3 9.60003C5.12607 9.83194 4.86005 9.97696 4.57089 9.99751C4.28173 10.0181 3.99788 9.91212 3.79289 9.70714L1.29289 7.20713C0.902369 6.81661 0.902369 6.18345 1.29289 5.79292C1.68342 5.4024 2.31658 5.4024 2.70711 5.79292L4.39181 7.47762L9.7 0.400028C10.0314 -0.0417994 10.6582 -0.131343 11.1 0.200028Z" fill="#002C5A"/></svg>';
+$icon-checkmark-circle: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8Z" fill="#002C5A"/><path fill-rule="evenodd" clip-rule="evenodd" d="M11.5547 4.16795C12.0142 4.4743 12.1384 5.09517 11.8321 5.5547L7.83205 11.5547C7.66587 11.804 7.39667 11.9656 7.09854 11.9951C6.8004 12.0247 6.50474 11.919 6.29289 11.7071L4.29289 9.70711C3.90237 9.31658 3.90237 8.68342 4.29289 8.29289C4.68342 7.90237 5.31658 7.90237 5.70711 8.29289L6.84457 9.43036L10.1679 4.4453C10.4743 3.98577 11.0952 3.8616 11.5547 4.16795Z" fill="white"/></svg>';
+$icon-checkmark-circle-white: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M11.5547 4.16795C12.0142 4.4743 12.1384 5.09517 11.8321 5.5547L7.83205 11.5547C7.66587 11.804 7.39667 11.9656 7.09854 11.9951C6.8004 12.0247 6.50474 11.919 6.29289 11.7071L4.29289 9.70711C3.90237 9.31658 3.90237 8.68342 4.29289 8.29289C4.68342 7.90237 5.31658 7.90237 5.70711 8.29289L6.84457 9.43036L10.1679 4.4453C10.4743 3.98577 11.0952 3.8616 11.5547 4.16795Z" fill="#002C5A"/></svg>';
+$icon-checkmark-circle-lg: '<svg width="41" height="41" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="20.78" cy="20.42" r="20" fill="#0066B3"/><path d="M29.5 15.45c-.11-.08-.39-.31-.83-.7-.42-.4-.69-.64-.82-.75a.42.42 0 00-.39-.11.53.53 0 00-.4.15l-1.32 1.49A815.49 815.49 0 0020 21.86l-1.29 1.4-.78-.62a97.04 97.04 0 01-3.6-2.9L13.4 19a.52.52 0 00-.43-.11.37.37 0 00-.31.15l-.75.82-.54.63c-.1.1-.16.23-.16.39.03.16.1.27.2.35l.93.98c.63.62 1.32 1.33 2.07 2.1.78.76 1.5 1.48 2.15 2.15.65.66 1.02 1 1.1 1.06.13.13.3.25.54.35.24.08.48.1.74.08.3-.03.53-.08.7-.16.19-.08.35-.18.48-.3l1.56-1.85a1050.07 1050.07 0 007.85-9.45c.1-.13.14-.26.12-.39a.63.63 0 00-.16-.35z" fill="#fff"/></svg>';
 $icon-arrow-down: '<svg width="10" height="5" viewBox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.08124 0.186267C1.63183 -0.134742 1.00728 -0.0306508 0.686267 0.418762C0.365258 0.868174 0.469349 1.49272 0.918762 1.81373L2.08124 0.186267ZM9.08124 1.81373C9.53065 1.49272 9.63474 0.868174 9.31373 0.418762C8.99272 -0.0306508 8.36817 -0.134742 7.91876 0.186267L9.08124 1.81373ZM4.85469 3.39621L4.27345 4.20994L4.85469 3.39621ZM0.918762 1.81373L4.27345 4.20994L5.43593 2.58247L2.08124 0.186267L0.918762 1.81373ZM5.72655 4.20994L9.08124 1.81373L7.91876 0.186267L4.56407 2.58247L5.72655 4.20994ZM4.27345 4.20994C4.70808 4.52039 5.29193 4.52038 5.72655 4.20994L4.56407 2.58247C4.82484 2.39621 5.17515 2.39621 5.43593 2.58247L4.27345 4.20994Z" fill="black"/></svg>';
 $icon-shipping: '<svg width="24" height="23" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.25 6.88045V16.0109L11.25 21.2283M1.25 6.88045L11.25 12.0978M1.25 6.88045L6.46739 4.05436M11.25 21.2283V12.0978M11.25 21.2283L21.6848 15.5761V6.44566M11.25 12.0978L16.4674 9.27175M21.6848 6.44566L11.6848 1.22827L6.46739 4.05436M21.6848 6.44566L16.4674 9.27175M16.4674 9.27175L6.46739 4.05436" stroke="white" stroke-width="2" stroke-linejoin="round"/><path d="M15.5 10.832L17.5 9.75V12.601C17.5 12.6928 17.4497 12.7772 17.369 12.8209L15.7214 13.7123C15.6214 13.7663 15.5 13.694 15.5 13.5803V10.832Z" fill="white"/></svg>';
 $icon-info: '<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.25 7C12.25 10.1756 9.67564 12.75 6.5 12.75C3.32436 12.75 0.75 10.1756 0.75 7C0.75 3.82436 3.32436 1.25 6.5 1.25C9.67564 1.25 12.25 3.82436 12.25 7Z" stroke="white" stroke-width="1.5" stroke-linecap="round"/><rect x="5.75" y="5.7" width="1.5" height="4.75" rx="0.75" fill="white"/><circle cx="6.5" cy="4.3" r="0.75" fill="white"/></svg>';
@@ -208,11 +211,18 @@ $circle-secondary: '<svg width="330" height="331" viewBox="0 0 330 331" fill="no
 
   // Typo
   h1, h2, h3,
+  .h1, .h2, .h3, .h4,
   .heading {
     margin-top: 0;
     margin-bottom: 20px;
     font-size: $font-size-heading;
   }
+  .h4 {
+    font-size: $font-size-heading;
+  }
+  .h1, .h2, .h3, .h4 {
+    font-weight: bold;
+  }
   small {
     font-size: $font-size-xs;
     line-height: $line-height-lg;
@@ -559,6 +569,11 @@ $circle-secondary: '<svg width="330" height="331" viewBox="0 0 330 331" fill="no
   }
 }
 
+// Express Buttons
+easycredit-express-button {
+  overflow: hidden;
+}
+
 // Express Buttons Checkout Modal
 .ec-express-button__modal__checkout {
   .checkout-modal-wrapper,
@@ -664,6 +679,38 @@ $circle-secondary: '<svg width="330" height="331" viewBox="0 0 330 331" fill="no
           }
         }
       }
+
+      .h4 {
+        margin-bottom: 10px;
+        font-size: $font-size-heading;
+        font-weight: bold;
+        color: $white;
+      }
+
+      .ec-usp {
+        list-style: none;
+        margin-top: 0;
+        margin-bottom: 20px;
+        padding: 0;
+
+        @media (min-width: $breakpoint-sm-up) {
+          padding-bottom: 160px;
+        }
+
+        li {
+          margin-bottom: 5px;
+          padding-left: 26px;
+
+          @include background-svg($icon-checkmark-circle-white);
+          background-position: left center;
+          background-repeat: no-repeat;
+          background-size: 16px 16px;
+
+          font-size: $font-size;
+          line-height: $line-height;
+          color: $white;
+        }
+      }
     }
     &.ec-col-agreement {
       .ec-container {

Original file line number	Diff line number	Diff line change
`@@ -87,7 +87,7 @@`
`87`	`87`	`}`
`88`	`88`	`&__content-heading {`
`89`	`89`	`margin-bottom: 15px;`
`90`		`- font-size: $font-size-heading-sm;`
	`90`	`+ font-size: $font-size-lg;`
`91`	`91`	`line-height: $line-height-heading-lg;`
`92`	`92`	`font-weight: bold;`
`93`	`93`	`}`
Original file line number	Diff line number	Diff line change
`@@ -43,7 +43,7 @@ export default {`
`43`	`43`	`}`
`44`	`44`
`45`	`45`	`let args = {`
`46`		`- webshopId: '2.de.9999.9999',`
	`46`	`+ webshopId: '2.de.7387.2',`
`47`	`47`	`amount: 299,`
`48`	`48`	`fullWidth: false,`
`49`	`49`	`// redirectUrl: 'https://easycredit-ratenkauf.de/'`