@payrails/web-sdk 5.41.0 → 5.42.0

package/README.md

@@ -10,14 +10,91 @@ You can integrate Payrails Web in two ways:
 - Elements: One component for each payment method, credit card forms and more.
   Fully customizable solution.
 
-## Importing the SDK
+## Installation
 
-```JavaScript
+```bash
 npm install @payrails/web-sdk
 ```
 
+## Integration
+
+The SDK supports multiple integration methods depending on your setup.
+
+### With a Bundler (Webpack, Vite, Rollup, esbuild, etc.)
+
+If you use a bundler, import the SDK directly using ES module syntax:
+
+```js
+import { Payrails, PayrailsEnvironment } from '@payrails/web-sdk';
+import '@payrails/web-sdk/payrails-styles.css';
+```
+
+### Without a Bundler (Native ESM in the Browser)
+
+If your project uses native ES modules (e.g. `<script type="module">` or a
+`"type": "module"` package), the SDK works out of the box:
+
+```js
+import { Payrails, PayrailsEnvironment } from '@payrails/web-sdk';
+```
+
+This resolves to the ESM build (`index.mjs`) automatically via the `exports`
+field in `package.json`.
+
+### CommonJS (Node.js / Legacy)
+
+For CommonJS environments, use `require`:
+
+```js
+const { Payrails, PayrailsEnvironment } = require('@payrails/web-sdk');
+```
+
+## Quick Start
+
+After installing, initialize the SDK with the response from the
+`/merchant/client/init` API:
+
+```js
+import { Payrails } from '@payrails/web-sdk';
+import '@payrails/web-sdk/payrails-styles.css';
+
+// 1. Initialize the SDK with the client init response
+const payrails = Payrails.init(clientInitResponse, {
+  events: {
+    onClientInitialized: () => console.log('SDK ready'),
+  },
+});
+
+// 2a. Mount the dropin (all-in-one checkout)
+const dropin = payrails.dropin({
+  events: {
+    onAuthorizeSuccess: (action, result) =>
+      console.log('Payment success', result),
+    onAuthorizeFailed: (action, error) => console.log('Payment failed', error),
+  },
+});
+dropin.mount('#dropin');
+
+// 2b. Or mount individual elements for full control
+const cardForm = payrails.cardForm({ showCardHolderName: true });
+cardForm.mount('#card-form');
+
+const paymentButton = payrails.paymentButton({
+  translations: { label: 'Pay Now' },
+  events: {
+    onAuthorizeSuccess: () => console.log('Payment authorized'),
+    onAuthorizeFailed: (e) => console.log('Payment failed', e),
+  },
+});
+paymentButton.mount('#payment-button');
+```
+
 ## Release Notes
 
+### 5.42.0
+
+- FEATURE: Support mjs and cjs outputs.
+
 ### 5.41.0
 
 - FEATURE: Expose payment method configs through headless query API.