@artaio/arta-browser 2.22.0 → 2.23.1

package/README.md

@@ -1,9 +1,10 @@
 # arta-browser
 
-arta-browser is a TypeScript SDK providing easy setup for Arta's Estimates and Tracking widgets.
+arta-browser is a TypeScript SDK providing easy setup for Arta's Estimates and Tracking widgets and the Arta Pay checkout.
 
 * Use [Arta Estimates](https://manual.arta.io/guides/solutions/no-code/estimates/estimates-widget) to dynamically generate shipping estimates (non-bookable) on your own website.
 * Use [Arta Tracking](https://manual.arta.io/guides/solutions/no-code/post-sale/tracking) to easily present clear and up-to-date tracking information on your own website.
+* Use [Arta Pay](#arta-pay-checkout) to let buyers pay a deposit and finance the rest with their Arta credit line, in a modal on your checkout page.
 
 ## Installation
 
@@ -11,12 +12,18 @@ arta-browser is a TypeScript SDK providing easy setup for Arta's Estimates and T
 
 Copy and paste the following snippet before the closing `</body>` HTML tag wherever you want the Estimates widget available for your users (typically on your product pages):
 
-```
-<script src="https://cdn.jsdelivr.net/npm/@artaio/arta-browser@latest/dist/bundle.js"></script>
+```html
+<script
+  src="https://cdn.jsdelivr.net/npm/@artaio/arta-browser@2.23.1/dist/bundle.js"
+  integrity="sha384-Z3euTa2mVIbuvRrH9S3yGX3I3w3BlmrlMRpJGvrIIy5SCX6XLcfwVoVlKzTsTsCL"
+  crossorigin="anonymous"
+></script>
 ```
 
 And once the above script is loaded the `Arta` object should be available.
 
+The snippet pins the latest published version and verifies it with [Subresource Integrity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity); the version and `integrity` hash above are updated automatically on every release.
+
 ### With `npm`
 
 In your project run
@@ -134,6 +141,34 @@ tracking.isReady && <Button onClick={() => tracking.open()}>Track</Button>;
 
 The Arta Tracking widget has many configuration options to customize the look and feel of the widget. You can view the full list of options in [/lib/trackingConfig.ts](/lib/trackingConfig.ts).
 
+### Arta Pay checkout
+
+Arta Pay lets a buyer pay a deposit on your order and finance the rest with their Arta credit line, in an Arta-hosted modal on your page. It has a server half and a page half:
+
+1. **Your server** creates a purchase request with your **private** API key (`POST https://api.arta.io/purchase_requests`, with the order amounts, buyer email and line items) and gets back an `id` and a short-lived `client_token`. Pass only `{ purchaseRequestId, clientToken }` to the page — the private key never leaves your server.
+2. **Your page** initializes with your **public** key and opens the checkout:
+
+```js
+Arta.init('<PUBLIC_KEY>');
+
+const checkout = Arta.pay(
+  { purchaseRequestId, clientToken },
+  {
+    onReady: () => (payButton.disabled = false),
+    onComplete: ({ purchaseRequestId, purchaseId, status }) => {
+      // status: 'confirmed' | 'processing' | 'declined' — confirm server-side
+    },
+    onClose: ({ reason }) => {}, // 'customer' | 'complete' | 'error'
+    onError: ({ code, message, recoverable }) => {},
+  },
+  { position: 'center' }
+);
+
+payButton.addEventListener('click', () => checkout.open());
+```
+
+The widget mounts hidden and validates the purchase request, so `onReady` means "ready to open". `open()` shows the modal, `close()` hides it (reopening resumes) and `destroy()` removes it. `onComplete` fires once when the outcome is known; the callbacks are advisory, so confirm the order server-side with `GET /purchase_requests/:id`. `position` accepts `'center'` (default), `'left'`, `'right'` or `'full_screen'`. The `PayCompletion`, `PayCloseEvent` and `PayError` types are exported from the package.
+
 ## Contributing
 
 Please ensure that all the examples available on [github.com/artaio/arta-browser-examples](https://github.com/artaio/arta-browser-examples) are still working before opening a PR.

package/dist/arta.d.ts

@@ -2,9 +2,15 @@ import { type EstimateBody, type PartialEstimateConfig } from './estimateConfig'
 import { type PartialTrackingConfig } from './trackingConfig';
 import Estimate from './estimate';
 import Tracking from './tracking';
+import Pay from './pay';
+import InfoModal from './infoModal';
+import { type PartialPayConfig, type PayCallbacks, type PayInput } from './payConfig';
+import { type InfoInput } from './infoConfig';
+import { type MonthlyEstimate, type MonthlyEstimateInput } from './monthlyEstimate';
 export interface ArtaJsConfig {
     host: string;
     httpSchema?: 'http' | 'https';
+    payOrigin?: string;
 }
 export interface ArtaJsFullConfig extends ArtaJsConfig {
     apiKey: string;
@@ -14,5 +20,8 @@ export default class Arta {
     private config;
     init(apiKey: string, config?: Partial<ArtaJsConfig>): void;
     estimate(estimateBody: EstimateBody, estimateConfig?: PartialEstimateConfig): Estimate;
+    pay(payInput: PayInput, payCallbacks?: PayCallbacks, payConfig?: PartialPayConfig): Pay;
+    getArtaPayMonthlyEstimate(input: MonthlyEstimateInput): Promise<MonthlyEstimate>;
+    openArtaPayInfoModal(input?: InfoInput): InfoModal;
     tracking(shipmentId: string, trackingConfig?: PartialTrackingConfig): Tracking;
 }

package/dist/arta.js

@@ -6,15 +6,24 @@ var estimateConfig = require('./estimateConfig.js');
 var trackingConfig = require('./trackingConfig.js');
 var estimate = require('./estimate.js');
 var tracking = require('./tracking.js');
+var pay = require('./pay.js');
+var infoModal = require('./infoModal.js');
+var payConfig = require('./payConfig.js');
+var infoConfig = require('./infoConfig.js');
+var monthlyEstimate = require('./monthlyEstimate.js');
 
 const defaultConfig = {
     host: 'api.arta.io',
     httpSchema: 'https',
+    payOrigin: 'https://collectors.arta.io',
 };
 class Arta {
     el;
     config;
     init(apiKey, config) {
+        if (!apiKey || !apiKey.trim()) {
+            throw new Error('Please provide your Arta public API key to Arta.init');
+        }
         this.config = Object.assign({ ...defaultConfig, apiKey }, config);
         if (document.querySelectorAll('#arta-widget').length) {
             return;
@@ -32,6 +41,38 @@ class Arta {
             throw new Error('Please initialize the SDK with Arta.init before creating estimates');
         }
     }
+    // Creates an Arta Pay checkout for a purchase request the seller's server
+    // created with its private key. The widget iframe mounts immediately
+    // (hidden) and validates the purchase request; `onReady` is the signal to
+    // enable the "Pay with Arta" button, and `open()` shows the modal.
+    pay(payInput, payCallbacks = {}, payConfig$1 = {}) {
+        if (this.config) {
+            return new pay.default(payInput, payCallbacks, payConfig.getFullPayConfig(this.config, payConfig$1));
+        }
+        else {
+            throw new Error('Please initialize the SDK with Arta.init before creating Arta Pay checkouts');
+        }
+    }
+    // A "from $X/mo" Arta Pay estimate for a price, for placements and CTAs (e.g.
+    // "From $1,246/mo with Arta Pay"). The checkout shows the buyer's exact,
+    // quoted schedule. Resolves from local math today; it returns a promise so
+    // that computing it server-side later does not change this signature.
+    getArtaPayMonthlyEstimate(input) {
+        return monthlyEstimate.monthlyEstimate(input);
+    }
+    // Opens the login-free Arta Pay info modal: a marketing modal explaining
+    // Arta Pay, optionally showing a financing estimate when `totalPrice` is
+    // given. It only needs the public key from `Arta.init` — no purchase request.
+    openArtaPayInfoModal(input = {}) {
+        if (this.config) {
+            const modal = new infoModal.default(input, infoConfig.getFullInfoConfig(this.config));
+            modal.open();
+            return modal;
+        }
+        else {
+            throw new Error('Please initialize the SDK with Arta.init before opening the Arta Pay info modal');
+        }
+    }
     tracking(shipmentId, trackingConfig$1 = {}) {
         if (this.config && this.el) {
             const fullTrackingConfig = trackingConfig.getFullTrackingConfig(this.config, trackingConfig$1);