@paynext/sdk 0.0.94 → 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

@@ -310,6 +310,10 @@ declare interface IPayPalButtonStyles {
     styles?: PayPalButtonStyle;
 }
 
+declare interface ISubmitButtonStyles extends HTMLStyles {
+    iconSvg?: string;
+}
+
 declare type Listener<TData> = (data: TData) => void;
 
 declare interface LoadedResult {
@@ -508,6 +512,7 @@ export declare interface PayNextConfig {
     styles?: StylesConfig;
     translate?: CheckoutTranslateOverrides;
     locale?: Locale;
+    errorMessageText?: string;
     onCheckoutLoaded?: (result: LoadedResult) => void;
     onCheckoutAttempt?: (result: AttemptResult) => void;
     onCheckoutComplete?: (result: PaymentResult) => void;
@@ -534,12 +539,13 @@ declare abstract class State<TState> {
 
 export declare interface StylesConfig {
     Input?: InputStyles;
-    SubmitButton?: HTMLStyles;
+    SubmitButton?: ISubmitButtonStyles;
     ApplePayButton?: IApplePayButtonStyles;
     PayPalButton?: IPayPalButtonStyles;
     GooglePayButton?: IGooglePayButtonStyles;
     WalletButton?: HTMLStyles;
     BraintreeButton?: HTMLStyles;
+    BackButton?: HTMLStyles;
 }
 
 declare class StylesState extends State<StylesConfig> {