customize

christina-grannas · Dec 3, 2020 · ba1e982 · ba1e982
1 parent b890bc6
commit ba1e982
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 16 deletions.
diff --git a/user-testing/customize-payment-form.md b/user-testing/customize-payment-form.md
@@ -14,7 +14,7 @@ If you are not familiar with Easy Checkout and the Easy portal, please read the
 
 ## Set a display language
 
-You can change the language of the checkout page by changing the 
+You can change the **language** of the checkout page by changing the 
 
 ## Configure UI theme
 
@@ -35,26 +35,27 @@ However, the Checkout styler is easier to use and also contains an accessibility
 ### Specify theme using the Checkout JS API
 
 If you are using an embedded checkout page, you can pass a `theme` object to the `Checkout` constructor or to the method `setTheme()`. 
-The following example changes the background color of the panel:
-
-```json
-
-var checkout = new Checkout();
-
+The following example defines a gray background color but keeps the panel elements white:
+
+```javascript
+// ...
+var checkout = new Dibs.Checkout(checkoutOptions);
+var theme = {
+  "backgroundColor": "#F2F2F2",
+  "panelColor": "white",
+};
+checkout.setTheme(theme);
+// ...
 ```
 
+---
 
-### The anatomy of the checkout form
-
-
-Panel
-Footer
-
-
-For example, if you have a site with a dark background and light foreground colors, you might want to adjust the styling of the embedded checkout form so that it matches the rest of your site.
+**Trouble shooting:**
 
+It's not possible to combine style settings from the Checkout styler and the Checkout JS API. If you have defined a style in Checkout styler you cannot override the style using the setTheme(). In order to use the setTheme() API you have to **delete** all your custom themes from the [Checkout styler](https://portal.dibspayment.eu/account/checkout-styler).
+![Delete theme](images/delete-theme.png)
 
-The following example shows how you can specify a dark theme with custom 
+---
 
 
 

diff --git a/user-testing/images/delete-theme.png b/user-testing/images/delete-theme.png