@seaverse/payment-sdk 0.5.0 → 0.6.0

package/README.md

@@ -152,6 +152,61 @@ interface CheckoutClientConfig {
 | `development` | `https://aiart-openresty.dev.seaart.dev` |
 | `production` | `https://www.seaart.ai` |
 
+## Styling and CSS
+
+### Style Isolation
+
+The SDK uses the bundled `@seaart/payment-component` Web Component for the payment UI. The component's styles (30KB) are optimized for minimal global impact:
+
+**✅ Well-isolated styles:**
+- 218 component-scoped selectors using Vue's `[data-v-*]` attributes
+- All component-specific styles are scoped to avoid conflicts
+- Major global resets (`*{...}`, `html,body{...}`) have been removed
+
+**⚠️ Remaining global styles (low risk):**
+
+The following global styles are included and may affect your application:
+
+```css
+/* App root container (may conflict if you use #app as root element ID) */
+#app {
+  width: 100%;
+  height: 100%;
+  background: transparent;
+}
+
+/* Custom scrollbar styling (WebKit browsers only) */
+::-webkit-scrollbar { width: 6px; height: 6px }
+::-webkit-scrollbar-track { background: transparent }
+::-webkit-scrollbar-thumb { background: #d0d0d0; border-radius: 3px }
+
+/* Text selection color */
+::selection {
+  background: #6366f1;
+  color: #fff;
+}
+```
+
+**Risk assessment:**
+- `#app` selector: **Medium risk** - Only conflicts if your root element uses `id="app"`
+- Scrollbar styles: **Low risk** - Only affects scrollbar appearance in WebKit browsers
+- Selection color: **Low risk** - Only changes text selection highlight color
+
+**Recommendations:**
+1. ✅ Avoid using `id="app"` for your application's root element
+2. ✅ If you encounter conflicts, please report them as an issue
+3. ✅ Future SDK versions may provide additional isolation options if needed
+
+### CSS Import
+
+Always import the SDK styles in your application:
+
+```typescript
+import '@seaverse/payment-sdk/style.css';
+```
+
+**Note:** The Web Component is already bundled into the SDK, so you do **not** need to install `@seaart/payment-component` separately.
+
 ## Usage with Frameworks
 
 ### Vue 3