@paynext/sdk 0.0.95 → 0.0.96

package/README.md

@@ -112,6 +112,7 @@ interface PayNextConfig {
   variant?: 'default' | 'compact' 
   locale?: Locale                
   translate?: CheckoutTranslate   
+  errorMessageText?: string
   styles?: StylesConfig          
   onCheckoutLoaded?: (result: LoadedResult) => void
   onCheckoutAttempt?: (result: AttemptResult) => void
@@ -125,6 +126,45 @@ interface LoadedResult {
 }
 ```
 
+### Add a Submit Button Icon
+
+Provide inline SVG markup via `styles.SubmitButton.iconSvg` to render an icon to the left of the "Pay with card" button label. The SDK hides the icon and shows a spinner while a payment request is in flight, then restores the icon once processing finishes. A 24x24px viewBox keeps the layout balanced.
+
+```ts
+const checkout = new PayNextCheckout(container)
+
+await checkout.mount({
+  ...config,
+  styles: {
+    SubmitButton: {
+      iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+        <path d="M6 12L10 16L18 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>`
+    }
+  }
+})
+```
+
+### Customize the Back Button
+
+Pass `styles.BackButton` to adjust the container that wraps the default arrow icon. Both `className` and `styles` map directly onto that wrapper `<div>`, letting you add global CSS hooks or inline overrides without replacing the built-in markup.
+
+```ts
+const checkout = new PayNextCheckout(container)
+
+await checkout.mount({
+  ...config,
+  styles: {
+    BackButton: {
+      className: 'my-back-button',
+      styles: {
+        color: '#111827'
+      }
+    }
+  }
+})
+```
+
 ## Supported Payment Methods
 
 - **Cards**: Visa, Mastercard, American Express, Discover, JCB, Diners Club, UnionPay, Maestro

package/dist/index.d.ts

@@ -545,6 +545,7 @@ export declare interface StylesConfig {
     GooglePayButton?: IGooglePayButtonStyles;
     WalletButton?: HTMLStyles;
     BraintreeButton?: HTMLStyles;
+    BackButton?: HTMLStyles;
 }
 
 declare class StylesState extends State<StylesConfig> {

package/dist/index.es.js

@@ -5011,7 +5011,7 @@ class vl {
   }
 }
 class gl {
-  constructor() {
+  constructor(t) {
     C(this, "template", `
     <svg
       xmlns='http://www.w3.org/2000/svg'
@@ -5030,7 +5030,7 @@ class gl {
     <span class="${ne.srOnly}">Back</span>
   `);
     C(this, "element", document.createElement("div"));
-    this.element.classList.add(ne.backButton), this.element.innerHTML = this.template;
+    this.element.classList.add(ne.backButton), t != null && t.className && this.element.classList.add(t.className), t != null && t.styles && Object.assign(this.element.style, t.styles), this.element.innerHTML = this.template;
   }
   render() {
     return this.element;
@@ -5040,10 +5040,10 @@ const yl = "_button_125my_1", bl = {
   button: yl
 };
 class El {
-  constructor() {
+  constructor(t) {
     C(this, "element");
-    C(this, "icon", new gl());
-    this.element = document.createElement("div"), this.element.classList.add(bl.button), this.element.appendChild(this.icon.render());
+    C(this, "icon");
+    this.element = document.createElement("div"), this.element.classList.add(bl.button), this.icon = new gl(t), this.element.appendChild(this.icon.render());
   }
   addEventListener(t) {
     return this.element.addEventListener("click", t);
@@ -5825,7 +5825,7 @@ class gd {
       close: new oe()
     });
     const s = r.getState();
-    this.element = document.createElement("form"), this.onPaymentAttempt = i, this.submit = new Il(t, s.SubmitButton), this.back = new El(), this.number = new rd(t, s.Input), this.name = new Ul(t, s.Input), this.cardSecurity = new vd(t, s.Input), this.element.classList.add(Oe.cardForm, e || "");
+    this.element = document.createElement("form"), this.onPaymentAttempt = i, this.submit = new Il(t, s.SubmitButton), this.back = new El(s.BackButton), this.number = new rd(t, s.Input), this.name = new Ul(t, s.Input), this.cardSecurity = new vd(t, s.Input), this.element.classList.add(Oe.cardForm, e || "");
     const o = this.back.render();
     a && (this.isBackVisible = !1, o.classList.add(Oe.hidden), this.element.classList.add(Oe.topOffset)), this.element.append(
       o,