feat(payment): PAYPAL-2195 added classes for applepay button

CHANGELOG.md

@@ -6,6 +6,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Draft
 - Removed accelerated checkout integration [#2341](https://github.com/bigcommerce/cornerstone/pull/2341)
+- Added css classes for ApplePay Button [[#2344]](https://github.com/bigcommerce/cornerstone/pull/2344)
 
 ## 6.10.0 (03-23-2023)
 - A bug with the display of the product quantity on the PDP [#2340](https://github.com/bigcommerce/cornerstone/pull/2340)

assets/scss/components/stencil/applePay/_applePay.scss

@@ -1,4 +1,6 @@
 .apple-pay-checkout-button {
+    background-color: $applePay-black;
+    background-image: -webkit-named-image(apple-pay-logo-white);
     background-position: 50% 50%;
     background-repeat: no-repeat;
     background-size: 100% 60%;
@@ -10,19 +12,17 @@
     min-width: 90px;
     padding: spacing("single");
     width: 160px;
-    @if stencilString("applePay-button") == "white" {
-        background-color: $applePay-white;
-        background-image: -webkit-named-image(apple-pay-logo-black);
-    }
-    @else if stencilString("applePay-button") == "white-border" {
-        background-color: $applePay-white;
-        background-image: -webkit-named-image(apple-pay-logo-black);
-        border: 0.5px solid $applePay-black;
-    }
-    @else {
-        background-color: $applePay-black;
-        background-image: -webkit-named-image(apple-pay-logo-white);
-    }
+}
+
+.apple-pay-checkout-button--white {
+    background-color: $applePay-white;
+    background-image: -webkit-named-image(apple-pay-logo-black);
+}
+
+.apple-pay-checkout-button--white-border {
+    background-color: $applePay-white;
+    background-image: -webkit-named-image(apple-pay-logo-black);
+    border: 0.5px solid $applePay-black;
 }
 
 .apple-pay-supported {