angular-klasha 0.0.1 → 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,81 @@
+# Changelog
+
+All notable changes to `angular-klasha` are documented here.
+
+## 1.0.0
+
+This release makes the library work at all. Everything published before it is
+non-functional — see the warning at the top of the README.
+
+### Fixed
+
+- **The checkout script URL.** 0.0.x loaded
+  `https://klastatic.fra1.digitaloceanspaces.com/{test,prod}/js/klasha-integration.js`.
+  That bucket has been deleted and returns `NoSuchBucket` for both the test and
+  the production path, so `window.KlashaClient` was never defined and no
+  payment could ever start. The library now loads
+  `https://js.klasha.com/pay.js`, the single script Klasha currently ships.
+- **`isTestMode` is now forwarded to `KlashaClient`.** It is the 9th
+  constructor argument and the only thing that selects the sandbox over the
+  live gateway. 0.0.x passed eight arguments, so `isTestMode` was `undefined`
+  inside the Klasha script and **every sandbox payment was routed to the live
+  gateway**, the live redirect URL and the live iframe. The flag is coerced
+  with `Boolean()` so a stray string such as `'false'` cannot silently select
+  production.
+- **`kit.phone` is now populated.** The Klasha script reads `kit.phone`;
+  0.0.x only set `kit.phone_number`, which is never read, so the customer's
+  phone number was silently dropped from the exchange-rate request. Both fields
+  are now set, and `phone` is accepted as a top-level option.
+- **Duplicate container elements.** 0.0.x appended a `<div id="ktest">` from
+  the service constructor, on every injection, and hardcoded `'ktest'` as the
+  container id for every instance. Each component/directive instance now owns a
+  unique container id, the element is created lazily on the first payment,
+  reused afterwards, and removed on destroy.
+- **jQuery is no longer loaded.** 0.0.x pulled jQuery 3.5.1 from the Google CDN
+  (twice) even though the Klasha script does not use it.
+- **Removed `console.log` noise** from the service constructor and script
+  loader.
+- Removed the vendored, dead copy of `klasha-integration.js` that was shipped
+  inside the published package.
+- The service no longer performs DOM work in its constructor, so merely
+  injecting it has no side effects.
+
+### Added
+
+- **Standalone support.** `AngularKlashaComponent` and `AngularKlashaDirective`
+  are standalone and can be imported directly. `provideKlasha({ merchantKey,
+  businessId, isTestMode })` configures a standalone application.
+- `AngularKlashaModule.forRoot()` also accepts a config object.
+- `AngularKlashaService.launch()`, `ensureContainer()`, `removeContainer()` and
+  the exported `KLASHA_SCRIPT_URL` / `nextKlashaContainerId()` for programmatic
+  use.
+- `phone` as a top-level option and as an input, alongside the deprecated
+  `phone_number`.
+- `tx_ref` is generated when the merchant does not supply one.
+- Regression tests covering the 9th argument, `kit.phone`, the script URL and
+  single-container behaviour.
+
+### Changed
+
+- **Angular 16, 17, 18, 19 and 20 are supported.** `peerDependencies` were
+  pinned to `~12.0.1`.
+- **`ng-packagr` is no longer a `peerDependency`.** Consumers were being forced
+  to install a build tool to use a runtime library.
+- The package now ships modern Ivy partial-compilation output (`fesm2022` +
+  `exports` map). The hand-written View-Engine-era `main`/`module`/`esm5`/
+  `fesm5`/`metadata` entry points have been removed — Angular 13 dropped
+  support for all of them.
+- Most `KlashaOptions` fields are now optional; only `merchantKey`,
+  `businessId`, `amount` and `email` are required.
+- `PrivateKlashaOptions` is renamed `ResolvedKlashaOptions`; the old name
+  remains as a deprecated alias.
+- `tx_ref` is no longer a validation error when omitted.
+
+### Removed
+
+- `TestComponent`, test scaffolding that was being compiled into the library
+  source tree.
+
+## 0.0.1
+
+Initial release. Non-functional — see above.

package/LICENSE.md

@@ -0,0 +1,21 @@
+# The MIT License (MIT)
+
+Copyright (c) 2020 Dansteve Adekanbi <danstevea@gmail.com>
+
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.

package/README.md

@@ -1,245 +1,392 @@
 # angular-klasha
 
-> This is an angular module that abstracts the complexity of making klasha payments.
+> Angular component, directive and service for accepting [Klasha](https://klasha.com) payments.
 
-## Demo
+[![npm](https://img.shields.io/npm/v/angular-klasha.svg)](https://www.npmjs.com/package/angular-klasha)
+[![license](https://img.shields.io/npm/l/angular-klasha.svg)](LICENSE.md)
 
-![Demo](App.png?raw=true "Demo Image")
+---
 
-## USAGE
+## ⚠️ Upgrade from 0.0.x immediately — 0.0.x is completely non-functional
 
-### 1. Install the module
+**`angular-klasha@0.0.1` cannot process a payment at all, and never warns you.**
+
+1. **Its checkout script no longer exists.** 0.0.x loaded
+   `https://klastatic.fra1.digitaloceanspaces.com/{test,prod}/js/klasha-integration.js`.
+   That DigitalOcean Spaces bucket has been deleted and both URLs now return
+   `NoSuchBucket`. `window.KlashaClient` is therefore never defined and the
+   checkout silently never opens.
+2. **The 9th `isTestMode` argument is missing.** `KlashaClient` takes
+   `isTestMode` as its 9th constructor argument, and on the current `pay.js`
+   it is the *only* thing that selects the sandbox. 0.0.x passes **eight**.
+   That matters now, because the current script serves one URL for both
+   environments — repointing without adding the argument would send sandbox
+   traffic to production. 1.0.0 passes it, coerced to a real boolean.
+
+   For the avoidance of doubt about the past: while the old CDN existed, 0.0.x
+   selected `/test/js/` or `/prod/js/` correctly from `isTestMode`, and that
+   script was environment-specific by URL. There is no evidence historical
+   sandbox payments reached production.
+3. **The customer phone number was dropped.** 0.0.x set `kit.phone_number`;
+   the Klasha script only ever reads `kit.phone`.
+4. **Duplicate DOM ids.** 0.0.x appended a `<div id="ktest">` from the service
+   constructor on every injection, so more than one payment button meant more
+   than one element with the same id.
+5. **It loaded jQuery** from the Google CDN for no reason — the Klasha script
+   does not use jQuery.
+6. It also `console.log`'d on construction and shipped a stale vendored copy of
+   the dead integration script inside the published package.
+
+`1.0.0` fixes all of the above: it loads the current script
+`https://js.klasha.com/pay.js`, forwards `isTestMode` as a real boolean 9th
+argument, sets `kit.phone`, gives every instance its own container element, and
+loads no jQuery.
+
+**There is no safe way to stay on 0.0.x. Upgrade.**
+
+---
+
+## Requirements
+
+| | |
+| --- | --- |
+| Angular | **16, 17, 18, 19 or 20** (`@angular/common` and `@angular/core`) |
+| Environment | Browser. The checkout script cannot run during server-side rendering; call `pay()` from a browser-only code path. |
+
+Published as Ivy partial-compilation output, so it works with both
+NgModule-based and standalone applications.
+
+## Install
 
 ```sh
 npm install --save angular-klasha
 ```
 
-### 2. Import the module
+No script tag, no jQuery and no extra setup: `https://js.klasha.com/pay.js` is
+injected lazily the first time a payment is started.
+
+## 1. Configure your merchant credentials
+
+### Standalone applications
+
+```ts
+import { bootstrapApplication } from '@angular/platform-browser';
+import { provideKlasha } from 'angular-klasha';
+
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideKlasha({
+      merchantKey: 'YOUR_MERCHANT_KEY',
+      businessId: '1',
+      isTestMode: true, // false (or omitted) targets the LIVE gateway
+    }),
+  ],
+});
+```
+
+### NgModule applications
 
-In your `app.module.ts` or any module where the component or directive would be used like so:
+`forRoot()` still works exactly as it did in 0.0.x, so existing code does not
+have to change:
 
 ```ts
 import { NgModule } from '@angular/core';
-
 import { AngularKlashaModule } from 'angular-klasha';
-...
 
 @NgModule({
   imports: [
-    AngularKlashaModule.forRoot('merchantKey','businessId',false),
-  ]
+    AngularKlashaModule.forRoot('YOUR_MERCHANT_KEY', '1', true),
+    // a config object also works:
+    // AngularKlashaModule.forRoot({ merchantKey: 'YOUR_MERCHANT_KEY', businessId: '1', isTestMode: true }),
+  ],
 })
-
 export class AppModule {}
 ```
 
-### 3. Implement in your project
+> `isTestMode` here is what gets forwarded to `KlashaClient` as its 9th
+> argument. Leaving it out means **live payments**.
 
-There are two available options
+## 2. Use the component or the directive
 
-- **AngularKlashaComponent**: Renders a button which when clicked loads klasha Inline in an iframe
+Both are **standalone**, so you can import either one directly into a
+standalone component — or get both by importing `AngularKlashaModule`.
 
-  ```html
-  <angular-klasha
-    [fullname]="'some-random-str'"
-    [phone_number]="'some-random-str'"
-    [paymentDescription]="'some-random-str'"
-    [email]="'mailexample@mail.com'"
-    [amount]="'1000000'"
-    [merchantKey]="'some-random-str'"
-    [businessId]="'some-random-str'"
-    [tx_ref]="'some-random-str'"
-    (paymentInit)="paymentInit()"
-    (callBack)="paymentDone($event)"
-  >
-    Pay with Klasha
-  </angular-klasha>
-  ```
+### `AngularKlashaComponent`
 
-- **AngularKlashaDirective**: A directive that loads klasha inline in an iframe when clicked
-
-```html
-<button
-  angular-klasha
-  [fullname]="'some-random-str'"
-  [phone_number]="'some-random-str'"
-  [paymentDescription]="'some-random-str'"
-  [email]="'mailexample@mail.com'"
-  [amount]="'1000000'"
-  [merchantKey]="'some-random-str'"
-  [businessId]="'some-random-str'"
-  [tx_ref]="'some-random-str'"
-  (paymentInit)="paymentInit()"
-  [class]="'btn btn-primary'"
-  (callBack)="paymentDone($event)"
->
-  Pay with Klasha
-</button>
-```
-
-And then in your `component.ts`
+Renders a `<button>` that opens the Klasha checkout when clicked.
 
 ```ts
-import { Component, OnInit } from "@angular/core";
+import { Component } from '@angular/core';
+import { AngularKlashaComponent, KlashaOptions } from 'angular-klasha';
 
 @Component({
-  selector: "app-root",
-  templateUrl: "./app.component.html",
-  styleUrls: ["./app.component.css"],
+  selector: 'app-checkout',
+  standalone: true,
+  imports: [AngularKlashaComponent],
+  templateUrl: './checkout.component.html',
 })
-export class AppComponent implements OnInit {
-  tx_ref = '' + Math.floor((Math.random() * 1000000000) + 1);
-  constructor() {}
+export class CheckoutComponent {
+  options: KlashaOptions = this.buildOptions();
 
-  paymentInit() {
-    console.log("Payment initialized");
+  paymentInit(): void {
+    console.log('Payment initialised');
   }
 
-  paymentDone(info: any) {
-    this.title = "Payment Done";
-    console.log(this.title, info);
+  paymentDone(response: unknown): void {
+    console.log('Payment done', response);
+    // Build a fresh options object for the next payment: `tx_ref` must be
+    // unique and the Klasha script mutates the `kit` object it is given.
+    this.options = this.buildOptions();
   }
 
-  ngOnInit() {
-     this.tx_ref ='' + Math.floor((Math.random() * 1000000000) + 1);
+  private buildOptions(): KlashaOptions {
+    return {
+      merchantKey: 'YOUR_MERCHANT_KEY',
+      businessId: '1',
+      amount: 10000,
+      email: 'customer@example.com',
+      fullname: 'Some Customer',
+      phone: '+2348000000000',
+      sourceCurrency: 'NGN',
+      destinationCurrency: 'NGN',
+      tx_ref: `klasha-${Date.now()}`,
+      paymentDescription: 'Order #1234',
+      isTestMode: true,
+    };
   }
 }
 ```
 
-Also you can use the `klashaOptions` object like so:
-
 ```html
-<button
-  angular-klasha
+<angular-klasha
   [klashaOptions]="options"
-  (paymentInit)="paymentCancel()"
+  [class]="'btn btn-primary'"
+  (paymentInit)="paymentInit()"
   (callBack)="paymentDone($event)"
 >
   Pay with Klasha
-</button>
+</angular-klasha>
 ```
 
-And then in your `component.ts`
+### `AngularKlashaDirective`
+
+Same behaviour, applied to your own element so you keep full control of the
+markup:
 
 ```ts
-import { Component } from "@angular/core";
-import { KlashaOptions } from "angular-klasha";
+import { Component } from '@angular/core';
+import { AngularKlashaDirective } from 'angular-klasha';
 
 @Component({
-  selector: "app-root",
-  templateUrl: "./app.component.html",
-  styleUrls: ["./app.component.css"],
+  selector: 'app-checkout',
+  standalone: true,
+  imports: [AngularKlashaDirective],
+  templateUrl: './checkout.component.html',
 })
-export class AppComponent {
-  options: KlashaOptions = {
-    email: 'some-random-str',
-    phone_number: 'some-random-str',
-    merchantKey: 'some-random-str',
-    amount: 1000,
-    sourceCurrency: '',
-    destinationCurrency: '',
-    tx_ref: '' + Math.floor((Math.random() * 1000000000) + 1),
-    businessId: '1',
-    fullname: 'some-random-str',
-    paymentDescription: '',
-    kit: {
-      currency: '',
-      phone_number: 'some-random-str',
-      email: 'some-random-str',
-      fullname: 'some-random-str',
-      tx_ref: '',
-      paymentType: '',
-    }
-  ;
-  constructor() {}
-
-  paymentInit() {
-    console.log("Payment initialized");
-  }
-
-  paymentDone(info: any) {
-    this.title = "Payment Done";
-    console.log(this.title, info);
-  }
-
-}
+export class CheckoutComponent { /* … same class body as above … */ }
 ```
 
-Also, you can pass in a merchantKey and businessId in the component and the directive, in such situation, this merchantKey and businessId is given a higher ptx_ref over the global `forRoot` merchantKey and businessId. For example, if you have this is your file
-
-```ts
-@NgModule({
-  imports: [
-    AngularKlashaModule.forRoot('merchantKey','businessId',false),
-  ]
-})
+```html
+<button
+  type="button"
+  angular-klasha
+  [klashaOptions]="options"
+  (paymentInit)="paymentInit()"
+  (callBack)="paymentDone($event)"
+>
+  Pay with Klasha
+</button>
 ```
 
-and this in your component
+### Individual inputs instead of `klashaOptions`
+
+Every field of `KlashaOptions` is also available as its own input:
 
 ```html
 <button
+  type="button"
   angular-klasha
-  [fullname]="'some-random-str'"
-  [phone_number]="'some-random-str'"
-  [paymentDescription]="'some-random-str'"
-  [email]="'mailexample@mail.com'"
-  [amount]="'1000000'"
-  [merchantKey]="'merchantKey2'"
-  [businessId]="'businessId2'"
-  [tx_ref]="'some-random-str'"
+  [merchantKey]="'YOUR_MERCHANT_KEY'"
+  [businessId]="'1'"
+  [amount]="10000"
+  [email]="'customer@example.com'"
+  [fullname]="'Some Customer'"
+  [phone]="'+2348000000000'"
+  [tx_ref]="txRef"
+  [isTestMode]="true"
+  (paymentInit)="paymentInit()"
   (callBack)="paymentDone($event)"
 >
   Pay with Klasha
 </button>
 ```
 
-Then `merchantKey2` and `businessId2` would be used instead
+`merchantKey`, `businessId` and `isTestMode` set on the component/directive
+take priority over the values given to `provideKlasha()` / `forRoot()`.
+
+> **`(callBack)` is required.** Without a subscriber, `pay()` refuses to open
+> the checkout and returns
+> `angular-klasha: Insert a callBack output like so (callBack)='PaymentComplete($event)' to check payment status`.
+
+## Options
+
+`KlashaOptions` — `merchantKey`, `businessId`, `amount` and `email` are
+required; everything else is optional.
+
+| Option | Type | Description |
+| --- | --- | --- |
+| `merchantKey` | `string` | Your Klasha merchant key. Falls back to the globally provided one. |
+| `businessId` | `string` | Your Klasha business id. Falls back to the globally provided one. |
+| `amount` | `number` | Amount to charge. |
+| `email` | `string` | Customer email address. |
+| `fullname` | `string` | Customer full name. |
+| `phone` | `string` | Customer phone number. **This is the field the Klasha script reads.** |
+| `phone_number` | `string` | *Deprecated* alias of `phone`, still accepted. |
+| `sourceCurrency` | `string` | Currency you price in. Defaults to `NGN`. |
+| `destinationCurrency` | `string` | Currency the customer is charged in. Defaults to `NGN`. |
+| `tx_ref` | `string` | Unique transaction reference. Generated for you when omitted. |
+| `callbackUrl` | `string` | URL the customer is redirected to after paying. |
+| `paymentDescription` | `string` | Human readable description of the payment. |
+| `isTestMode` | `boolean` | `true` = Klasha sandbox, `false`/omitted = **live gateway**. |
+| `metadata` | `unknown` | Free-form data kept on the instance; not sent to Klasha. |
+| `kit` | `KlashaKitOptions` | Advanced: extra fields merged into the payload handed to the Klasha script. |
+
+### `kit`
+
+You rarely need to set `kit` yourself — the service builds it from the options
+above. It ends up containing:
+
+| Field | Source |
+| --- | --- |
+| `currency` | `sourceCurrency` |
+| `phone` | `phone` (or the deprecated `phone_number`) |
+| `phone_number` | the same value, kept only for backwards compatibility |
+| `email` | `email` |
+| `fullname` | `fullname` |
+| `tx_ref` | `tx_ref`, generated when omitted |
+| `productType` | `kit.productType` (or the deprecated `kit.paymentType`) |
+| `amount` | `kit.amount`, defaulting to `amount` |
+| `sourceAmount` | `kit.sourceAmount`, when you supply one |
+| `callBack` | wired to the `(callBack)` output for you |
+
+> The Klasha script **mutates** the `kit` object it is given (it assigns
+> `businessId`, `currency` and `redirect_url` onto it). `angular-klasha` builds
+> a brand new `kit` for every payment, so never share one between payments.
+
+## Outputs
+
+| Output | Fires |
+| --- | --- |
+| `(paymentInit)` | Immediately before the Klasha checkout is opened. |
+| `(callBack)` | With the Klasha response once the payment flow finishes. **Required.** |
+
+## The checkout container
+
+The Klasha script renders into a container element looked up by id. Each
+component/directive instance gets its own id (`klasha-container-1`,
+`klasha-container-2`, …): the element is created on the first payment, reused
+on every subsequent one, and removed on destroy. 0.0.x hardcoded `ktest` for
+every instance and appended a new element each time.
+
+If you need the id — for styling, say — read it off the instance:
 
-## OPTIONS
+```ts
+@ViewChild(AngularKlashaDirective) klasha!: AngularKlashaDirective;
+// this.klasha.containerId
+```
+
+## Programmatic use
+
+`AngularKlashaService` is `providedIn: 'root'` and can be used without the
+component or the directive:
+
+```ts
+import { inject } from '@angular/core';
+import { AngularKlashaService } from 'angular-klasha';
+
+const klasha = inject(AngularKlashaService);
 
->The function accepts some parameters necessary for processing payment, and they include the following:
+async function pay(): Promise<void> {
+  const options = klasha.getKlashaOptions({
+    merchantKey: 'YOUR_MERCHANT_KEY',
+    businessId: '1',
+    amount: 10000,
+    email: 'customer@example.com',
+    fullname: 'Some Customer',
+    phone: '+2348000000000',
+    isTestMode: true,
+  });
+  options.kit.callBack = (response) => console.log('done', response);
+
+  const containerId = 'my-klasha-container';
+  await klasha.loadScript();
+  klasha.launch(options, containerId); // creates the container if needed
+}
+```
 
-| Parameters      | Description                                                                                                                 |
-| --------------- | --------------------------------------------------------------------------------------------------------------------------- |
-| merchantKey    | The key generated by the merchant after creating a business in the merchant dashboard. It can be the public or private key. |
-| amount          | The amount that is paid by the customer to the merchant.                                                                    |
-| Container id    | The id of an empty container div in your code. by default it is generated                                                                             |
-| callbackUrl    | The url your customers are being redirected to after processing payment.                                                    |
-| destinationCurrency    | The country code e.g NGN (Nigeria).                                                                                         |
-| sourceCurrency | The currency set by the merchant in which the price of goods is displayed.                                                  |
-| phone_number          | The customer’s phone number.                                                                                                                                                                                                                 |
-| email                 | The customer’s email address.                                                                                                                                                                                                                |
-| fullname             | The customer’s full name.                                                                                                                                                                                                                    |
-| tx_ref | The transaction reference number. It calls a javascript function `makeid(8)` where 8 is the length of the id. The length can be any number you desire and an example format is; klasha-8 to 12 digits-datetime (klasha-0123456789-01022021). |
-| Kit             | A JSONArray containing the customer’s info as well as the transaction reference.|
+| Member | Description |
+| --- | --- |
+| `loadScript()` | Injects `https://js.klasha.com/pay.js` once and resolves when `window.KlashaClient` is available. |
+| `getKlashaOptions(options)` | Resolves defaults and builds a fresh `kit`. |
+| `checkInput(options)` | Returns `''` when the options are usable, otherwise an error message. |
+| `launch(resolvedOptions, containerId)` | Constructs `KlashaClient` (with all **nine** arguments) and calls `init()`. |
+| `ensureContainer(id)` / `removeContainer(id)` | Container lifecycle. |
+| `makeId(length?)` | Random transaction reference generator. |
 
-> Kit can further be broken down into:
+Also exported: `KLASHA_SCRIPT_URL`, `nextKlashaContainerId()`, and the
+`MERCHANT_KEY`, `BUSINESS_ID` and `IS_TEST_MODE` injection tokens.
 
-| Parameters            | Description                                                                                                                                                                                                                                  |
-| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| currency              | The currency in which payment is made.                                                                                                                                                                                                       |
-| phone_number          | The customer’s phone number.                                                                                                                                                                                                                 |
-| email                 | The customer’s email address.                                                                                                                                                                                                                |
-| fullname            | The customer’s full name.                                                                                                                                                                                                                    |
-| tx_ref | The transaction reference number. It calls a javascript function `makeid(8)` where 8 is the length of the id. The length can be any number you desire and an example format is; klasha-8 to 12 digits-datetime (klasha-0123456789-01022021). |
-| Call back             | A javascript function that is called after the payment has been made. It can return a successful or failed message depending on the status of the transaction.                                                                               |
+## Migrating from 0.0.x
 
-> For more information checkout [klasha's documentation](https://documenter.getpostman.com/view/8963555/TzJoFgHh)
+| 0.0.x | 1.0.0 |
+| --- | --- |
+| `AngularKlashaModule.forRoot(key, biz, isTest)` | Unchanged — still works. |
+| `<angular-klasha>` / `[angular-klasha]` | Unchanged; now standalone as well. |
+| `(callBack)`, `(paymentInit)` | Unchanged. |
+| `phone_number` | Still accepted; prefer `phone`. |
+| `KlashaOptions` required almost every field | Only `merchantKey`, `businessId`, `amount` and `email` are required. |
+| `tx_ref` had to be supplied | Generated when omitted. |
+| Container was always `ktest` | Per-instance id, available as `.containerId`. |
+| `isTestMode` was ignored by the Klasha script | Forwarded as the 9th constructor argument. |
+| `PrivateKlashaOptions` | Renamed `ResolvedKlashaOptions` (old name kept as a deprecated alias). |
+
+Nothing that worked before has been removed.
+
+## Testing your integration
+
+You cannot complete a real payment without live merchant credentials. Mock
+`window.KlashaClient` and assert on the constructor arguments — argument index
+8 is `isTestMode`:
+
+```ts
+const calls: unknown[][] = [];
+(window as any).KlashaClient = function (this: any, ...args: unknown[]) {
+  calls.push(args);
+  this.init = () => undefined;
+};
+
+// … trigger a payment …
+
+expect(calls[0].length).toBe(9);
+expect(calls[0][8]).toBe(true);          // isTestMode
+expect((calls[0][7] as any).phone).toBe('+2348000000000');
+```
 
 ## Contributing
 
-Please feel free to fork this package and contribute by submitting a pull request to enhance the functionalities.
+Fork the repository and open a pull request — contributions are welcome.
 
 ## How can I thank you?
 
-Why not star the github repo? I'd love the attention! Why not share the link for this repository on Twitter or anywhere? Spread the word!
-
-Don't forget to [follow me on twitter](https://twitter.com/dansteveade)!
+Star the GitHub repository, and share it. Don't forget to
+[follow me on twitter](https://twitter.com/dansteveade)!
 
 Thanks!
 Dansteve Adekanbi.
 
 ## License
 
-The MIT License (MIT). Please see [License File](LICENSE.md) for more information.
+The MIT License (MIT). Please see the [License File](LICENSE.md) for more
+information.