> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# $wsStripe - Stripe

> Reference for $wsStripe: retrieve Stripe configuration for Stripe.js, evaluate payment status and integrate Stripe payments in the WEBSALE frontend.

With the `$wsStripe` module, you can retrieve payment information related to Stripe. It provides the configuration data for the Stripe.js integration as well as status information about the current payment process. In this section, you will learn how to initialize Stripe in the frontend and evaluate the payment status.

***

## Module overview

**Example / excerpt of** `$wsStripe`

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{= $wsStripe | json }}
```

**JSON output**

```json theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{
  "configuration": {
    "publishableKey": "...",
    "targetAccount": "..."
  },
  "createCustomerSession": "ƒ()",
  "paymentCanceled": false,
  "paymentFailed": false,
  "paymentPending": false
}
```

Note: `"ƒ()"` denotes a function.

**Variables and methods overview**

| **Name**                  | **Type** | **Description**                                                         |
| ------------------------- | -------- | ----------------------------------------------------------------------- |
| `configuration`           | map      | Map with Stripe configuration data.                                     |
| `publishableKey`          | string   | Public Stripe key for the integration in the frontend.                  |
| `targetAccount`           | string   | Stripe Connected Account ID (for platform payments).                    |
| `paymentCanceled`         | bool     | `true` if the payment was canceled.                                     |
| `paymentFailed`           | bool     | `true` if the payment failed.                                           |
| `paymentPending`          | bool     | `true` if the payment is still pending.                                 |
| `createCustomerSession()` | map      | Creates a Stripe Customer Session for the currently logged-in customer. |

***

## Templates

The `$wsStripe` module is typically used in the checkout area,\
in particular on the payment page. The configuration data is required to\
initialize the Stripe.js object in the frontend.

***

## Variables

### \$wsStripe.configuration

Returns the Stripe configuration data. Used to initialize the Stripe object in the frontend.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{ var $myStripeConfig = $wsStripe.configuration }}
```

#### \$wsStripe.configuration.publishableKey

Returns the public Stripe key. This key is required to initialize Stripe.js in the browser and is safe to use in the frontend.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
Publishable Key: {{= $wsStripe.configuration.publishableKey }}
```

#### \$wsStripe.configuration.targetAccount

Returns the Stripe Connected Account ID. Only required for platform or marketplace payments, when payments are forwarded to a connected account.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
Target Account: {{= $wsStripe.configuration.targetAccount }}
```

### \$wsStripe.paymentCanceled

Returns `true` if the payment was canceled.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{ if $wsStripe.paymentCanceled }}
  // The payment was canceled
{{ /if }}
```

### \$wsStripe.paymentFailed

Returns `true` if the payment failed.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{ if $wsStripe.paymentFailed }}
  // The payment failed
{{ /if }}
```

### \$wsStripe.paymentPending

Returns `true` if the payment is still pending.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{ if $wsStripe.paymentPending }}
  // The payment is being processed
{{ /if }}
```

***

## Methods

### \$wsStripe.createCustomerSession()

Creates a Stripe Customer Session for the currently logged-in customer. The session enables secure access to stored payment methods and customer data directly in the frontend.

**Signature**\
`$wsStripe.createCustomerSession()`

**Return value**\
`map` - Customer Session object with the following attributes:

| **Attribute**  | **Type**  | **Description**                                      |
| -------------- | --------- | ---------------------------------------------------- |
| client\_secret | string    | Secret key for secure access to the customer.        |
| components     | object    | Configuration for enabled Stripe components.         |
| customer       | string    | ID of the customer for whom the session was created. |
| expires\_at    | timestamp | Time at which the session expires.                   |

**Example** that creates a Customer Session.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{ var $myCustomerSession = $wsStripe.createCustomerSession() }}
const customerSessionClientSecret = "{{= $myCustomerSession.client_secret }}";
```

***

## Actions

No actions are available for `$wsStripe`.

***

## Examples

### Check payment status

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{ if $wsStripe.paymentCanceled }}
  <div class="alert">The payment was canceled.</div>
{{ /if }}

{{ if $wsStripe.paymentFailed }}
  <div class="alert error">The payment failed.</div>
{{ /if }}

{{ if $wsStripe.paymentPending }}
  <div class="alert info">The payment is being processed.</div>
{{ /if }}
```

***

## Related links

* [payment - Payment methods](/en/konfiguration/payment-zahlungsmethoden)
* [\$wsCheckout](/en/frontend/referenz/module/wscheckout)
* [https://docs.stripe.com/api](https://docs.stripe.com/api)