You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
|`redirect_uri`| yes | yes |`redirect_uri` should be the same as `Direct installation URL` defined in the Authorization block during app configuration. The LiveChat OAuth Server will redirect the user back to this URI after successful authorization. |
318
-
|`state`| no | no | Any value that might be useful to your application. It's strongly recommended to include an anti-forgery token to mitigate the [cross-site request forgery](https://en.wikipedia.org/wiki/Cross-site_request_forgery). |
319
-
|`code_challenge`| no | yes | A string between 43 and 128 characters long. |
320
-
|`code_challenge_method`| - | no | Possible values: `s256` or `plain`; default: `plain`. |
318
+
|`state`| no | no | Any value that might be useful to your application. It's strongly recommended to include an anti-forgery token to mitigate the [cross-site request forgery](https://en.wikipedia.org/wiki/Cross-site_request_forgery). |
319
+
|`code_challenge`| no | yes | A string between 43 and 128 characters long. |
320
+
|`code_challenge_method`| - | no | Possible values: `s256` or `plain`; default: `plain`. |
Gets the most recently recorded main window page data and returns the `IPageData` object (identical to the one emitted by the `page_data` event). If no data was recorded, it returns `null`.
464
+
465
+
<CodeSamplepath={'GET PAGE DATA'}>
466
+
467
+
```js
468
+
widget.getPageData();
469
+
```
470
+
471
+
</CodeSample>
472
+
446
473
## Settings widgets
447
474
448
475
If you want to connect a Settings widget to the LiveChat App, you should use the `createSettingsWidget` function. It returns a promise resolving to a Settings widget instance.
@@ -511,6 +538,117 @@ widget.redirect(target);
511
538
512
539
# Advanced use
513
540
541
+
## Payments
542
+
543
+
All widgets allow you to pass a registered charge and display its summary to the customer within the payment modal, directly in the LiveChat App. This flow enables customers to complete or decline the transaction without leaving the LiveChat App context.
Emitted when a payment transaction is approved by the customer and successfully processed by the Billing API.
554
+
555
+
<CodeSamplepath={'TRANSACTION_ACCEPTED'}>
556
+
557
+
```ts
558
+
typeTransactionEvent {
559
+
chargeId: string;
560
+
}
561
+
```
562
+
563
+
</CodeSample>
564
+
565
+
#### `transaction_declined`
566
+
567
+
Emitted when a payment transaction is declined by the customer (e.g., the user closes the payment modal or clicks the cancel button), and the charge is subsequently marked as declined in the Billing API.
568
+
569
+
<CodeSamplepath={'TRANSACTION_DECLINED'}>
570
+
571
+
```ts
572
+
typeTransactionEvent {
573
+
chargeId: string;
574
+
}
575
+
```
576
+
577
+
</CodeSample>
578
+
579
+
#### `transaction_failed`
580
+
581
+
Emitted when a payment transaction fails and cannot be processed by the Billing API.
582
+
583
+
<CodeSamplepath={'TRANSACTION_FAILED'}>
584
+
585
+
```ts
586
+
typeTransactionError {
587
+
error: unknown;
588
+
}
589
+
```
590
+
591
+
</CodeSample>
592
+
593
+
#### `update_billing_cycle`
594
+
595
+
This event is triggered when a customer selects a different billing cycle for a transaction. It only emits if the `showBillingCyclePicker` flag is set to `true` in the `metadata` object at the start of the transaction. The event includes the new billing cycle number and key charge details, allowing you to register the updated charge with the provided information.
This method allows you to pass a registered charge and accompanying metadata to the Agent App. The payment modal will then be displayed to the customer, enabling them to complete the transaction. For more information on registering a charge, refer to the [Billing API](/monetization/billing-api).
630
+
631
+
<CodeSample>
632
+
633
+
```ts
634
+
const charge = {...} // Billing API charge object
635
+
const metadata = {
636
+
icon: "https://icon.url";
637
+
description: "This is a description of the transaction.";
638
+
showBillingCyclePicker: true; // optional, use if you want to display the billing cycle picker to the customer
639
+
}
640
+
641
+
widget.startTransaction(charge, metadata);
642
+
```
643
+
644
+
</CodeSample>
645
+
646
+
You can follow this flow to create and monitor your in-app transactions:
647
+
648
+
1.**Create a charge**: use the [Billing API](/monetization/billing-api) to create a new charge object.
649
+
2.**Initiate a transaction**: call `startTransaction` with the registered charge and any metadata. This triggers a modal in the LiveChat App (or the parent object).
650
+
3.**Monitor events**: Set up listeners for transactions related events. You can listen to available [app webhooks](/getting-started/app-guides/app-webhooks) or built-in [transaction events](/extending-agent-app/products-sdk/agent-app-sdk#events-3) from the Agent App SDK.
651
+
514
652
## Developing your own widget
515
653
516
654
If you're building your own widget and you need to interact with the Agent App, be sure to use the [Agent App SDK](#top).
0 commit comments