@payrails/web-sdk 5.47.0 → 5.48.0-RC-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payrails/web-sdk",
-  "version": "5.47.0",
+  "version": "5.48.0-RC-1",
   "description": "SDK providing tokenization options on the client for merchants",
   "main": "index.js",
   "types": "payrails.d.ts",
@@ -8,12 +8,7 @@
   "author": "Payrails GitHub Bot <github@payrails.com>",
   "license": "MIT",
   "dependencies": {
-    "@payrails/fraud-sdk": "1.4.2",
-    "@payrails/web-cse": "1.2.4",
-    "@rollup/plugin-html": "2.0.0",
-    "@types/applepayjs": "14.0.9",
-    "@types/googlepay": "0.7.5",
-    "rollup-plugin-import-css": "3.5.8"
+    "dompurify": "3.4.10"
   },
   "module": "index.mjs",
   "exports": {

package/payrails-styles.css

@@ -6,12 +6,14 @@
   align-items: center;
 }
 
-.payrails-container-wrapper {
+.payrails-container-wrapper,
+.payrails-collect-frames-container {
   width: 100%;
   min-height: 90px;
 }
 
-.with-card-holder .payrails-container-wrapper {
+.with-card-holder .payrails-container-wrapper,
+.with-card-holder .payrails-collect-frames-container {
   width: 100%;
   height: min-content;
   min-height: 120px;
@@ -313,6 +315,26 @@
   margin-bottom: 4px;
 }
 
+/*
+ * When present, visually moves the save-instrument checkbox above the payment
+ * button using CSS flex order — without touching the DOM structure.
+ * Default (no class): checkbox sits below the button (natural DOM order).
+ */
+.payrails-checkbox-above-button {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Google Pay / Apple Pay: .payrails-store-instrument is a direct child */
+.payrails-checkbox-above-button > .payrails-store-instrument {
+  order: -1;
+}
+
+/* PayPal: checkbox is wrapped inside its own container div */
+.payrails-checkbox-above-button > #payrails-paypal-checkbox-wrapper {
+  order: -1;
+}
+
 .payrails-address-selector-wrapper {
   display: flex;
   flex-wrap: wrap;
@@ -838,6 +860,77 @@
   }
 }
 
+.payrails-order-summary-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 16px 0;
+}
+
+.payrails-order-summary-header {
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #6b7280;
+  margin: 0 0 12px 0;
+}
+
+.payrails-order-summary-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 4px 0;
+}
+
+.payrails-order-summary-label {
+  font-size: 14px;
+  color: #374151;
+}
+
+.payrails-order-summary-amount {
+  font-size: 14px;
+  color: #111827;
+  font-variant-numeric: tabular-nums;
+}
+
+.payrails-order-summary-total-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 12px;
+  padding: 4px 0;
+}
+
+.payrails-order-summary-total-label {
+  font-size: 15px;
+  font-weight: 700;
+  color: #111827;
+}
+
+.payrails-order-summary-total-amount {
+  font-size: 15px;
+  font-weight: 700;
+  color: #111827;
+  font-variant-numeric: tabular-nums;
+}
+
+.payrails-terms-and-conditions {
+  width: 100%;
+  text-align: center;
+  line-height: 1.5;
+  font-size: 14px;
+  color: #4b5563;
+  margin: 0 8px;
+}
+
+.payrails-terms-and-conditions .payrails-terms-link,
+.payrails-terms-and-conditions a {
+  color: #2563eb;
+  text-decoration: none;
+}
+
 button.payrails-generic-button {
   border: none;
   outline: none;