# Payments

Open a Stripe or Asaas payment or subscription checkout with one call.

URL: https://webrad.atentor.com/docs/payments
Updated: 2026-11-07

WebPayments · Nonvisual · Nonvisual · 13 events

## Quick start

Add **Payments1** in the Designer. Use the example in a page method.

```ts
// In the payment button's async OnClick handler.
// Edit1 contains the purchase source key from your application backend.
await Payments1.Pay(Edit1.value);
```

Configure Gateway slug and sign in with the customer session. Pay() and Subscribe() open checkout automatically; the input is a backend purchase source key. Opening checkout does not confirm payment.

## Configure once

1. In RestGo, configure and activate a Stripe or Asaas gateway, its payment source, credentials, webhooks, and HTTP(S) success/cancel URLs. The trusted application backend creates the purchase.
2. In WebRAD, enable **RestGo integration → Connection → Application SDK** and configure the instance URL. The customer must sign in through Authentication; the component uses that shared session.
3. Add **Payments** from **Nonvisual**. Select **Payments1** and set **Gateway slug** to the configured gateway's slug.
4. Add an **Edit** named **Edit1** and a **Button** named **Button1**. Open the button's **Interaction** tab and double-click **OnClick**. Paste the quick-start statement into the generated method body.

Edit1 contains a purchase **source key**, such as 123, kept as a string. Price, currency, ownership and recurrence come from the configured RestGo source. The input is not a provider payment ID or an amount. Keys returned as PostgreSQL int8 values must stay strings to preserve precision.

Both Payments1 and this.Payments1 refer to the concrete typed component in the page or reusable. Type Payments1. and use **Ctrl+Space** for Monaco completion. Public method names are case-sensitive.

## Pay with one call

To pay a known purchase from an async button handler:

```ts
await Payments1.Pay('123');
```

To use the purchase key entered in Edit1:

```ts
await Payments1.Pay(Edit1.value);
```

Pay restores an existing customer session, recovers or prepares the attempt, preserves its idempotency key, creates the checkout when necessary, waits for its URL, saves the operation ID and opens the hosted provider checkout. The customer completes payment there. Normal button code needs no manual PrepareCheckout, WaitForCheckout, OpenCheckout, checkpoint storage or StopWatching calls.

## Start a subscription

Use this in the subscription button's async OnClick handler:

```ts
await Payments1.Subscribe(Edit1.value);
```

The purchase source must contain the configured subscription product and recurrence. To use the Inspector's **Mode** setting instead of choosing a method explicitly:

```ts
await Payments1.Checkout(Edit1.value);
```

Pay always selects payment, Subscribe selects subscription, and Checkout uses the configured mode. These calls return a RestGoPaymentOperation. If a saved operation is already confirmed, they return it without creating another charge or reopening checkout. Matching concurrent actions share one workflow; a conflicting action reports busy.

## Confirm the payment

Select Payments1, open **Interaction**, and double-click **OnPaymentSucceeded**, the default event. In the generated handler body:

```ts
import type { WebPayments, WebPaymentsCheckoutEventDetail } from '@webrad/runtime';
// Keep the signature generated by Interaction; copy the body into that method.
class Example {
  public async Payments1PaymentSucceeded(
    sender: WebPayments,
    event: CustomEvent<WebPaymentsCheckoutEventDetail>,
  ): Promise<void> {
    Message('Payment confirmed: ' + event.detail.operation.id);
  }
}
```

This body belongs to the generated Payments event handler, whose event is a CustomEvent<WebPaymentsCheckoutEventDetail>. Use **OnSubscriptionActivated** for subscription confirmation and **OnSubscriptionCanceled** for cancellation or its scheduling. The full typed signatures appear in Events below.

Opening checkout is not financial confirmation. checkoutState describes checkout preparation, status describes financial state, and synchronizationPending / synchronizationError describe updating the application's purchase source. A confirmed payment may still have a pending source update. Backend authorization and fulfillment remain authoritative.

On a return page or in a refresh action, code can wait for confirmation:

```ts
const operation = await Payments1.WaitForConfirmation();
Message(operation.status);
```

To also wait for the purchase's source update:

```ts
const operation = await Payments1.WaitForConfirmation({
  waitForSynchronization: true,
});
Message(operation.status);
```

WaitForConfirmation understands payment success and subscription activation. A timeout is local and never changes the financial state or creates another charge. The backend continues processing after a local wait stops.

## Return, refresh and recovery

Automatic resume restores this instance's saved attempt after session restoration, queries an already known operation ID and observes pending changes. It never creates a charge or redirects back to checkout. Automatic lookup uses the component's runtime ID, including reusable placement identity.

On another return page, or to recover explicitly:

```ts
const operation = await Payments1.Resume();
if (operation) Message(operation.status);
```

Resume can use the selected attempt or the most recent saved attempt for the API, customer and gateway. To choose a purchase:

```ts
const operation = await Payments1.Resume(Edit1.value);
if (operation) Message(operation.status);
```

For a subscription saved under a different Inspector mode:

```ts
const operation = await Payments1.Resume(Edit1.value, { mode: 'subscription' });
if (operation) Message(operation.status);
```

Explicit Resume can recover a lost creation response by replaying the original saved key and body. It never opens checkout. Refresh only queries a known operation and does not create one:

```ts
const operation = await Payments1.Refresh();
if (operation) Message(operation.status);
```

The gateway uses fixed return URLs configured in RestGo. A redirect or success flag in the URL is not payment proof. Preview/F9 has changing loopback addresses; the configured return URL does not automatically return into that Preview. Hosted provider checkout is subject to browser/frame restrictions. Native custom-scheme return handling requires a separate platform/server contract.

## History and cancellation

Load the first page from a history action:

```ts
const items = await Payments1.LoadHistory();
Message(items.length);
```

Load the next page from a separate Load more action:

```ts
const items = await Payments1.LoadMore();
Message(items.length);
```

LoadHistory replaces history with one page. LoadMore appends and deduplicates records, returns the accumulated readonly array and does nothing on the final page. history, nextCursor, hasMore and **OnHistoryChange** support the application's list UI. Pages contain up to 50 operations ordered by UUID and omit checkout URLs. GetOperation(id) selects a history operation without inventing a purchase association; cross-device purchase lookup still requires an application-owned durable link.

In the cancel button's handler, after the customer chooses cancellation:

```ts
const operation = await Payments1.CancelSubscription();
Message(operation.provider.cancelAtPeriodEnd
  ? 'Cancellation scheduled for the paid period.'
  : operation.status);
```

The selected or resumed subscription supplies the operation ID automatically. Stripe schedules cancellation with the provider; Asaas removes recurrence while preserving the paid period in the normalized result. Inspect provider.periodEnd and provider.cancelAtPeriodEnd. Cancellation does not request a refund. Refresh, history and cancellation coordinate background observation internally.

## Defaults and UI state

**Auto resume**, **Auto watch** and **Persist attempts** default to true. **Poll interval (ms)** defaults to 2000 and **Poll timeout (ms)** to 60000. The timeout bounds local workflow/observation, not the purchase's financial lifetime. **Enabled** never initiates a charge by itself.

Use state, busy and watching for activity; status and checkoutState for the selected operation; canOpenCheckout and canCancelSubscription for actions; and synchronizationPending / synchronizationError for source updates. **OnStateChange** and **OnHistoryChange** provide typed changes. Each page/reusable placement owns its runtime state and shares the project's RestGO customer session.

Default persistence stores recovery data before POST and before navigation, scoped to API, customer, gateway, source and mode. Browser storage and Web Locks, or a runtime-only custom storage adapter, preserve the same purchase key across participating instances/tabs. Tokens, provider secrets and checkout URLs are excluded. Browser records are not cross-device storage or Project Model configuration. Unavailable storage/locking or corrupt recovery data raises an error instead of silently generating another key. Disabling Persist attempts is an explicit advanced choice that makes the application responsible for durable recovery.

Clear, StopWatching, abort and disposal affect local state/work; they do not cancel the server transaction. Clear retains durable attempts. Logout, account changes and replacing the RestGO client cancel obsolete work and prevent late checkout opening.

## Handle errors in one place

Use try/catch in the click handler, or bind **OnError** in Interaction. Choose one place to display a message:

```ts
try {
  await Payments1.Pay(Edit1.value);
} catch (error: unknown) {
  Message(error instanceof Error ? error.message : String(error));
}
```

HTTP failures retain RestGoError status, code and message; local workflow failures use WebPaymentsError.kind. An uncertain checkout keeps its original recovery data and requires observation/support. Neither a network failure nor an unknown financial status starts another charge automatically.

## Advanced control

Pay, Subscribe and Checkout open checkout by default. An authored custom UI can opt out of navigation:

```ts
const operation = await Payments1.Pay(Edit1.value, { openCheckout: false });
Message(operation.checkoutState);
```

The existing lower-level APIs remain available. PrepareCheckout is synchronous, CreateCheckout sends a prepared attempt without opening checkout, and WaitForCheckout / OpenCheckout provide manual control. ExportCheckpoint / RestoreCheckpoint support custom recovery integration. Prefer the one-call actions for the standard flow.

For direct transport-level calls, see the [RestGO SDK payments API](https://webrad.atentor.com/docs/restgo-sdk#payments). It uses the customer's Authentication JWT exclusively. Administrative and provider credentials stay in RestGo. The documentation's editable examples do not execute payments on this website.

## More examples

Payment button with error feedback

```ts
// Paste into Button1Click; Edit1 contains a backend purchase key.
Button1.enabled = false;
try {
  await Payments1.Pay(Edit1.value);
} catch (error: unknown) {
  Message(error instanceof Error ? error.message : String(error));
} finally {
  Button1.enabled = true;
}
```

Typed payment confirmation event

```ts
import type { WebPayments, WebPaymentsCheckoutEventDetail } from '@webrad/runtime';
class Example {
  public async Payments1PaymentSucceeded(
    sender: WebPayments,
    event: CustomEvent<WebPaymentsCheckoutEventDetail>,
  ): Promise<void> {
    Message('Payment confirmed: ' + event.detail.operation.id);
    console.log(sender.synchronizationPending);
  }
}
```

Typed error event

```ts
import type { WebPayments, WebPaymentsErrorEventDetail } from '@webrad/runtime';
class Example {
  public async Payments1Error(
    sender: WebPayments,
    event: CustomEvent<WebPaymentsErrorEventDetail>,
  ): Promise<void> {
    Message(event.detail.error.message);
    console.log(event.detail.action, event.detail.operationId, sender.state);
  }
}
```

Refresh without restarting background observation

```ts
const operation = await Payments1.Refresh();
if (operation) {
  Message(operation.status);
  console.log(operation.synchronizationPending, operation.synchronizationError);
}
```

Resume without automatic observation

```ts
const operation = await Payments1.Resume(undefined, { watch: false });
if (operation) Message(operation.status);
```

Target a subscription explicitly

```ts
// The operation must belong to the authenticated customer.
const operation = await Payments1.CancelSubscription('00000000-0000-4000-8000-000000000001');
console.log(operation.provider.periodEnd, operation.provider.cancelAtPeriodEnd);
```

## Inspector properties

Component options and defaults. Fields without runtime access are configured in the Inspector.

| Property / source | Type and options | Default | Runtime access |
| --- | --- | --- | --- |
| `name` — Name · Identity | `string` | `—` | name |
| `gatewaySlug` — Gateway slug · Payments — Gateway configured in RestGo. Uses the project connection and customer Authentication session. | `string` | `""` | gatewaySlug |
| `mode` — Mode · Payments — Default for new attempts. Existing attempts keep their original mode. | `enum` — `payment` `subscription` | `"payment"` | mode |
| `enabled` — Enabled · Behavior — Allows explicit operations. Never creates a charge automatically. | `boolean` | `true` | enabled |
| `autoResume` — Auto resume · Behavior — Restores and queries a saved operation after session restoration. Never creates a charge or opens checkout automatically. | `boolean` | `true` | autoResume |
| `autoWatch` — Auto watch · Behavior — Automatically follows pending financial confirmation and source synchronization for the selected operation. | `boolean` | `true` | autoWatch |
| `persistAttempts` — Persist attempts · Behavior — Automatically saves recovery data before requests and checkout navigation. Requires browser storage. | `boolean` | `true` | persistAttempts |
| `pollInterval` — Poll interval (ms) · Behavior — Interval for explicit checkout waiting or operation observation. | `number` | `2000` | pollInterval |
| `pollTimeout` — Poll timeout (ms) · Behavior — Local observation deadline. A timeout never marks a payment failed. | `number` | `60000` | pollTimeout |

## API in code

| Member | Signature | Access |
| --- | --- | --- |
| `gatewaySlug` | `get gatewaySlug(): string;` | Read and write |
| `mode` | `get mode(): import("@webrad/restgo-sdk").RestGoPaymentMode;` | Read and write |
| `enabled` | `get enabled(): boolean;` | Read and write |
| `pollInterval` | `get pollInterval(): number;` | Read and write |
| `pollTimeout` | `get pollTimeout(): number;` | Read and write |
| `busy` | `get busy(): boolean;` | Read-only |
| `autoResume` | `get autoResume(): boolean;` | Read and write |
| `autoWatch` | `get autoWatch(): boolean;` | Read and write |
| `persistAttempts` | `get persistAttempts(): boolean;` | Read and write |
| `state` | `get state(): WebPaymentsState;` | Read-only |
| `status` | `get status(): string \| null;` | Read-only |
| `checkoutState` | `get checkoutState(): string \| null;` | Read-only |
| `synchronizationPending` | `get synchronizationPending(): boolean;` | Read-only |
| `synchronizationError` | `get synchronizationError(): string \| null;` | Read-only |
| `canOpenCheckout` | `get canOpenCheckout(): boolean;` | Read-only |
| `canCancelSubscription` | `get canCancelSubscription(): boolean;` | Read-only |
| `history` | `get history(): readonly import("@webrad/restgo-sdk").RestGoPaymentOperation[];` | Read-only |
| `nextCursor` | `get nextCursor(): string;` | Read-only |
| `hasMore` | `get hasMore(): boolean;` | Read-only |
| `watching` | `get watching(): boolean;` | Read-only |
| `operation` | `get operation(): import("@webrad/restgo-sdk").RestGoPaymentOperation \| null;` | Read-only |
| `checkoutUrl` | `get checkoutUrl(): string \| null;` | Read-only |
| `error` | `get error(): Error \| null;` | Read-only |
| `attempt` | `get attempt(): import("@webrad/restgo-sdk").RestGoCheckoutInput \| null;` | Read-only |
| `onCheckoutCreated` | `set onCheckoutCreated(handler: WebComponentEventHandler<this> \| null);` | Read and write |
| `onCheckoutReady` | `set onCheckoutReady(handler: WebComponentEventHandler<this> \| null);` | Read and write |
| `onOperationChange` | `set onOperationChange(handler: WebComponentEventHandler<this> \| null);` | Read and write |
| `onSynchronizationChange` | `set onSynchronizationChange(handler: WebComponentEventHandler<this> \| null);` | Read and write |
| `onError` | `set onError(handler: WebComponentEventHandler<this> \| null);` | Read and write |
| `onRequestComplete` | `set onRequestComplete(handler: WebComponentEventHandler<this> \| null);` | Read and write |
| `onPaymentSucceeded` | `set onPaymentSucceeded(handler: WebComponentEventHandler<this> \| null);` | Read and write |
| `onSubscriptionActivated` | `set onSubscriptionActivated(handler: WebComponentEventHandler<this> \| null);` | Read and write |
| `onSubscriptionCanceled` | `set onSubscriptionCanceled(handler: WebComponentEventHandler<this> \| null);` | Read and write |
| `onCheckoutOpened` | `set onCheckoutOpened(handler: WebComponentEventHandler<this> \| null);` | Read and write |
| `onHistoryChange` | `set onHistoryChange(handler: WebComponentEventHandler<this> \| null);` | Read and write |
| `onStateChange` | `set onStateChange(handler: WebComponentEventHandler<this> \| null);` | Read and write |
| `onRestored` | `set onRestored(handler: WebComponentEventHandler<this> \| null);` | Read and write |

### `Pay`

method

```ts
Pay(sourceKey: string, options?: WebPaymentsCheckoutOptions): Promise<import("@webrad/restgo-sdk").RestGoPaymentOperation>;
```

Prepare/recover the purchase, persist its key, wait for checkout and open it.

Example

```ts
await Payments1.Pay('123');
```

### `Subscribe`

method

```ts
Subscribe(sourceKey: string, options?: WebPaymentsCheckoutOptions): Promise<import("@webrad/restgo-sdk").RestGoPaymentOperation>;
```

Subscribe through the hosted checkout with the same automatic recovery flow.

Example

```ts
await Payments1.Subscribe('123');
```

### `Checkout`

method

```ts
Checkout(sourceKey: string, options?: WebPaymentsCheckoutOptions): Promise<import("@webrad/restgo-sdk").RestGoPaymentOperation>;
```

Use the mode selected in the Inspector. Opens checkout by default.

Example

```ts
await Payments1.Checkout('123');
```

### `Resume`

method

```ts
Resume(sourceKey?: string, options?: WebPaymentsResumeOptions): Promise<import("@webrad/restgo-sdk").RestGoPaymentOperation | null>;
```

Recover a purchase or the last saved attempt; never redirects back to checkout.

Example

```ts
await Payments1.Resume();
```

### `Refresh`

method

```ts
Refresh(options?: import("@webrad/restgo-sdk").RestGoPaymentRequestOptions): Promise<import("@webrad/restgo-sdk").RestGoPaymentOperation | null>;
```

Refresh the selected/saved operation without creating a charge.

Example

```ts
await Payments1.Refresh();
```

### `LoadHistory`

method

```ts
LoadHistory(options?: import("@webrad/restgo-sdk").RestGoPaymentListOptions): Promise<readonly import("@webrad/restgo-sdk").RestGoPaymentOperation[]>;
```

Load customer history and expose its cursor without changing selection.

Example

```ts
await Payments1.LoadHistory();
```

### `LoadMore`

method

```ts
LoadMore(options?: import("@webrad/restgo-sdk").RestGoPaymentRequestOptions): Promise<readonly import("@webrad/restgo-sdk").RestGoPaymentOperation[]>;
```

Append the next page, deduplicating operations. Last page is a harmless no-op.

Example

```ts
await Payments1.LoadMore();
```

### `WaitForConfirmation`

method

```ts
WaitForConfirmation(options?: WebPaymentsConfirmationOptions): Promise<import("@webrad/restgo-sdk").RestGoPaymentOperation>;
```

Await payment success or subscription activation, optionally including source synchronization.

Example

```ts
await Payments1.WaitForConfirmation();
```

### `PrepareCheckout`

method

```ts
PrepareCheckout(sourceKey: string, mode?: import("@webrad/restgo-sdk").RestGoPaymentMode): WebPaymentsCheckpoint;
```

Advanced preparation without HTTP. Default persistence saves its recovery checkpoint.

Example

```ts
Payments1.PrepareCheckout('123', 'payment');
```

### `CreateCheckout`

method

```ts
CreateCheckout(options?: import("@webrad/restgo-sdk").RestGoPaymentRequestOptions): Promise<import("@webrad/restgo-sdk").RestGoPaymentOperation>;
```

Example

```ts
// Advanced: the normal one-call action is Payments1.Pay('123').
Payments1.PrepareCheckout('123', 'payment');
const operation = await Payments1.CreateCheckout();
console.log(operation.id, operation.checkoutState);
```

### `GetOperation`

method

```ts
GetOperation(id: string, options?: import("@webrad/restgo-sdk").RestGoPaymentRequestOptions): Promise<import("@webrad/restgo-sdk").RestGoPaymentOperation>;
```

Example

```ts
await Payments1.GetOperation('00000000-0000-4000-8000-000000000001');
```

### `ListOperations`

method

```ts
ListOperations(options?: import("@webrad/restgo-sdk").RestGoPaymentListOptions): Promise<import("@webrad/restgo-sdk").RestGoPaymentOperationList>;
```

Example

```ts
await Payments1.ListOperations();
```

### `CancelSubscription`

method

```ts
CancelSubscription(options?: import("@webrad/restgo-sdk").RestGoPaymentRequestOptions): Promise<import("@webrad/restgo-sdk").RestGoPaymentOperation>;
CancelSubscription(id: string, options?: import("@webrad/restgo-sdk").RestGoPaymentRequestOptions): Promise<import("@webrad/restgo-sdk").RestGoPaymentOperation>;
```

Example

```ts
await Payments1.CancelSubscription();
```

### `WaitForCheckout`

method

```ts
WaitForCheckout(id?: string, options?: WebPaymentsObservationOptions): Promise<import("@webrad/restgo-sdk").RestGoPaymentOperation>;
```

Example

```ts
await Payments1.WaitForCheckout();
```

### `StartWatching`

method

```ts
StartWatching(id?: string, options?: WebPaymentsObservationOptions): void;
```

Starts one bounded loop. Background failures are delivered through OnError.

Example

```ts
Payments1.StartWatching();
```

### `StopWatching`

method

```ts
StopWatching(): void;
```

Local observation cancellation only; never cancels the backend transaction.

Example

```ts
Payments1.StopWatching();
```

### `OpenCheckout`

method

```ts
OpenCheckout(): void;
```

Example

```ts
Payments1.OpenCheckout();
```

### `ExportCheckpoint`

method

```ts
ExportCheckpoint(): WebPaymentsCheckpoint;
```

Example

```ts
Payments1.ExportCheckpoint();
```

### `RestoreCheckpoint`

method

```ts
RestoreCheckpoint(value: unknown): WebPaymentsCheckpoint;
```

Validates recovery data against this API, gateway and customer. Performs no HTTP.

Example

```ts
// Advanced: normal Pay/Subscribe/Resume manage persistence automatically.
const checkpoint = Payments1.ExportCheckpoint();
Payments1.Clear();
Payments1.RestoreCheckpoint(checkpoint);
```

### `Clear`

method

```ts
Clear(): void;
```

Save recovery data first. This only clears local state and never cancels a charge.

Example

```ts
Payments1.Clear();
```

### `dispose`

method

```ts
dispose(): void;
```

Example

```ts
// Call only when disposing of an instance whose lifecycle you control.
Payments1.dispose();
```

Inherited members (4)

| Member | Signature | Access |
| --- | --- | --- |
| `id` | `readonly id: string;` | Read-only |
| `name` | `readonly name: string;` | Read-only |

### `bindEvent`

method

```ts
bindEvent(eventName: string, handler: WebComponentEventHandler<this> | null): () => void;
```

### `emit`

method

```ts
emit(eventName: string, detail?: unknown): boolean;
```

## Events

Link methods in **Interaction**. [How to use events](https://webrad.atentor.com/docs/interactions).

### OnPaymentSucceeded

[WebPaymentsCheckoutEventDetail](https://webrad.atentor.com/docs/types#webpaymentscheckouteventdetail) in `event.detail` · `operation`

Signature and example

```ts
import type { WebPayments, WebPaymentsCheckoutEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Payments1PaymentSucceeded(
    sender: WebPayments,
    event: CustomEvent<WebPaymentsCheckoutEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
    const { operation } = event.detail;
    console.log(operation);
  }
}
```

### OnSubscriptionActivated

[WebPaymentsCheckoutEventDetail](https://webrad.atentor.com/docs/types#webpaymentscheckouteventdetail) in `event.detail` · `operation`

Signature and example

```ts
import type { WebPayments, WebPaymentsCheckoutEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Payments1SubscriptionActivated(
    sender: WebPayments,
    event: CustomEvent<WebPaymentsCheckoutEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
    const { operation } = event.detail;
    console.log(operation);
  }
}
```

### OnSubscriptionCanceled

[WebPaymentsCheckoutEventDetail](https://webrad.atentor.com/docs/types#webpaymentscheckouteventdetail) in `event.detail` · `operation`

Signature and example

```ts
import type { WebPayments, WebPaymentsCheckoutEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Payments1SubscriptionCanceled(
    sender: WebPayments,
    event: CustomEvent<WebPaymentsCheckoutEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
    const { operation } = event.detail;
    console.log(operation);
  }
}
```

### OnCheckoutCreated

[WebPaymentsCheckoutEventDetail](https://webrad.atentor.com/docs/types#webpaymentscheckouteventdetail) in `event.detail` · `operation`

Signature and example

```ts
import type { WebPayments, WebPaymentsCheckoutEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Payments1CheckoutCreated(
    sender: WebPayments,
    event: CustomEvent<WebPaymentsCheckoutEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
    const { operation } = event.detail;
    console.log(operation);
  }
}
```

### OnCheckoutReady

[WebPaymentsCheckoutEventDetail](https://webrad.atentor.com/docs/types#webpaymentscheckouteventdetail) in `event.detail` · `operation`

Signature and example

```ts
import type { WebPayments, WebPaymentsCheckoutEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Payments1CheckoutReady(
    sender: WebPayments,
    event: CustomEvent<WebPaymentsCheckoutEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
    const { operation } = event.detail;
    console.log(operation);
  }
}
```

### OnCheckoutOpened

[WebPaymentsCheckoutEventDetail](https://webrad.atentor.com/docs/types#webpaymentscheckouteventdetail) in `event.detail` · `operation`

Signature and example

```ts
import type { WebPayments, WebPaymentsCheckoutEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Payments1CheckoutOpened(
    sender: WebPayments,
    event: CustomEvent<WebPaymentsCheckoutEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
    const { operation } = event.detail;
    console.log(operation);
  }
}
```

### OnOperationChange

[WebPaymentsOperationEventDetail](https://webrad.atentor.com/docs/types#webpaymentsoperationeventdetail) in `event.detail` · `previous`, `operation`

Signature and example

```ts
import type { WebPayments, WebPaymentsOperationEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Payments1OperationChange(
    sender: WebPayments,
    event: CustomEvent<WebPaymentsOperationEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
    const { previous, operation } = event.detail;
    console.log(previous, operation);
  }
}
```

### OnSynchronizationChange

[WebPaymentsSynchronizationEventDetail](https://webrad.atentor.com/docs/types#webpaymentssynchronizationeventdetail) in `event.detail` · `operation`, `pending`, `error`

Signature and example

```ts
import type { WebPayments, WebPaymentsSynchronizationEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Payments1SynchronizationChange(
    sender: WebPayments,
    event: CustomEvent<WebPaymentsSynchronizationEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
    const { operation, pending, error } = event.detail;
    console.log(operation, pending, error);
  }
}
```

### OnHistoryChange

[WebPaymentsHistoryEventDetail](https://webrad.atentor.com/docs/types#webpaymentshistoryeventdetail) in `event.detail` · `items`, `nextCursor`, `hasMore`

Signature and example

```ts
import type { WebPayments, WebPaymentsHistoryEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Payments1HistoryChange(
    sender: WebPayments,
    event: CustomEvent<WebPaymentsHistoryEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
    const { items, nextCursor, hasMore } = event.detail;
    console.log(items, nextCursor, hasMore);
  }
}
```

### OnStateChange

[WebPaymentsStateEventDetail](https://webrad.atentor.com/docs/types#webpaymentsstateeventdetail) in `event.detail` · `previous`, `state`

Signature and example

```ts
import type { WebPayments, WebPaymentsStateEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Payments1StateChange(
    sender: WebPayments,
    event: CustomEvent<WebPaymentsStateEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
    const { previous, state } = event.detail;
    console.log(previous, state);
  }
}
```

### OnRestored

[WebPaymentsResumeEventDetail](https://webrad.atentor.com/docs/types#webpaymentsresumeeventdetail) in `event.detail` · `checkpoint`, `operation`, `automatic`

Signature and example

```ts
import type { WebPayments, WebPaymentsResumeEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Payments1Restored(
    sender: WebPayments,
    event: CustomEvent<WebPaymentsResumeEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
    const { checkpoint, operation, automatic } = event.detail;
    console.log(checkpoint, operation, automatic);
  }
}
```

### OnError

[WebPaymentsErrorEventDetail](https://webrad.atentor.com/docs/types#webpaymentserroreventdetail) in `event.detail` · `action`, `operationId`, `error`

Signature and example

```ts
import type { WebPayments, WebPaymentsErrorEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Payments1Error(
    sender: WebPayments,
    event: CustomEvent<WebPaymentsErrorEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
    const { action, operationId, error } = event.detail;
    console.log(action, operationId, error);
  }
}
```

### OnRequestComplete

[WebPaymentsRequestEventDetail](https://webrad.atentor.com/docs/types#webpaymentsrequesteventdetail) in `event.detail` · `action`, `operationId`, `error`

Signature and example

```ts
import type { WebPayments, WebPaymentsRequestEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Payments1RequestComplete(
    sender: WebPayments,
    event: CustomEvent<WebPaymentsRequestEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
    const { action, operationId, error } = event.detail;
    console.log(action, operationId, error);
  }
}
```