PHPackages                             ether/web-payments - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Payment Processing](/categories/payments)
4. /
5. ether/web-payments

ActiveCraft-plugin[Payment Processing](/categories/payments)

ether/web-payments
==================

Use the Web Payments API and Google / Apply Pay to vastly improve your checkout process!

4.0.0(3y ago)521.8k7[19 issues](https://github.com/ethercreative/web-payments/issues)proprietaryPHP

Since Apr 23Pushed 3y ago2 watchersCompare

[ Source](https://github.com/ethercreative/web-payments)[ Packagist](https://packagist.org/packages/ether/web-payments)[ RSS](/packages/ether-web-payments/feed)WikiDiscussions master Synced 4d ago

READMEChangelog (10)Dependencies (2)Versions (15)Used By (0)

[![Web Payments](./resources/imgs/banner.jpg)](./resources/imgs/banner.jpg)

Web Payments for Craft Commerce
===============================

[](#web-payments-for-craft-commerce)

Use the Web Payments API and Apply & Google Pay to vastly improve your checkout process!

Usage
-----

[](#usage)

### Setup

[](#setup)

After installing the plugin:

1. Create a [Stripe payment gateway](https://plugins.craftcms.com/commerce-stripe).
2. Select the gateway in the plugin options.
3. Register your domain with Stripe and Apple Pay (Simply add your domain [here](https://dashboard.stripe.com/account/apple_pay)).
4. Output the button where ever you want using the template tag below.
5. ???
6. Profit.

### `{{ craft.webPayments.button(options) }}`

[](#-craftwebpaymentsbuttonoptions-)

Place this twig where you want the payments button to appear.

#### Options

[](#options)

Pass a twig object as the only parameter to configure the button.

##### `items`

[](#items)

An array of items to buy. Use this **OR** `cart`.

##### `items[x].id`

[](#itemsxid)

The ID of the purchasable.

##### `items[x].qty`

[](#itemsxqty)

The Qty being purchased.

##### `cart`

[](#cart)

A Craft Commerce Order (i.e. the current cart). Use this **OR** `items`.

##### `requestShipping`

[](#requestshipping)

A boolean or string. If true a shipping address will be required. Can also be set to one of: `'shipping'`, `'delivery'`, `'pickup'`, `true`, `false` (default). This will also change how the UI refers to the shipping of the products. For example, in English speaking countries you would say "pizza delivery" not "pizza shipping". Setting this to true will default the working to "shipping".

##### `requestDetails`

[](#requestdetails)

An array of additional details to request. Any of: `name`, `email` (email is always collected, so you don't need to add it), `phone`.

##### `onComplete`

[](#oncomplete)

An object of events to trigger once the payment is complete.

##### `onComplete.redirect`

[](#oncompleteredirect)

A URL to redirect to once the payment is completed. Can include `{number}`, which will output the order number.

##### `onComplete.js`

[](#oncompletejs)

JavaScript that will be executed once the payment is complete. Has access to the `cwp` object. Currently this only has `cwp.number` (the order number).

##### `js`

[](#js)

The variable the button will be set to in JS. Useful if you want to dynamically update the items in the virtual cart.

##### `style`

[](#style)

Customize the appearance of the button:

```
{
    type: 'default' | 'donate' | 'buy', // default: 'default'
    theme: 'dark' | 'light' | 'light-outline', // default: 'dark'
    height: '64px', // default: '40px', the width is always '100%'
}
```

Example
-------

[](#example)

```
{{ craft.webPayments.button({
    items: [
        {
            id: product.defaultVariant.id,
            qty: 1,
            options: {
                giftWrapped: 'yes',
            },
         },
    ],
    requestShipping: 'delivery',
    js: 'window.pay_item_' ~ product.id,
}) }}
```

```
{{ craft.webPayments.button({
    cart: craft.commerce.carts.cart,
    requestDetails: ['name', 'phone'],
    onComplete: {
        redirect: '/thanks?number={number}',
        js: 'window.paymentCompleted(cwp.number);',
    },
}) }}
```

Dynamic Updating
----------------

[](#dynamic-updating)

You can dynamically update the button via JS.

Use the `js` option to define the variable you want the button to be bound to:

```
{{ craft.webPayments.button({
    items: [{ id: 1, qty: 1 }],
    js: 'window.payButton',
}) }}
```

You can then get the current items and update them:

```
const items = [ ...window.payButton.items ];
items[0].options = { giftWrapped: 'yes' };
window.payButton.items = items;
```

You **can't** update the items directly (i.e. `window.payButton.items[0].id = 2`). The `items` are immutable, and therefore must be set to a new array if you want to update them. Above we are cloning the existing items into a new array before modifying them.

If you passed in a cart you can simply call `refresh()` to update the button with the latest contents of the cart.

```
window.payButton.refresh();
```

Note that you can't update the button while the payment dialog is active.

If you need to reload the button (i.e. if the DOM has changed) you can use the `reload()` function.

```
window.payButton = window.payButton.reload();
```

`reload()` will return a new instance of the button, so you'll want to replace your existing variable with that new instance.

TODO
----

[](#todo)

- When using a cart, actually use the cart to keep fields / options persistent
    - Remove cart option (if items isn't set, use active cart)
    - Remove clear cart option
- Support line item options when using items
- On payment complete event (i.e. clear active cart, redirect to thanks)
- JS hooks to update items (if not using commerce cart)
- JS hook to refresh cart data (if using commerce cart)
- Option to use default Apple / Google Pay buttons (rather that Stripe's button)
- Use billing address from Stripe (don't set billing address to shipping)
- Make shipping address optional
- Settings:
    - Select Stripe gateway
    - Button config defaults
    - Map request details (name, phone) to order fields
- Write setup instructions
- Browser test JS
- Test with Commerce Lite
- Add flag to order marking this as an order completed via web payments
- Add subscription support

###  Health Score

32

—

LowBetter than 72% of packages

Maintenance0

Infrequent updates — may be unmaintained

Popularity31

Limited adoption so far

Community16

Small or concentrated contributor base

Maturity67

Established project with proven stability

 Bus Factor1

Top contributor holds 87.3% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~121 days

Recently: every ~216 days

Total

13

Last Release

1130d ago

Major Versions

1.0.9.2 → 4.0.02023-04-12

### Community

Maintainers

![](https://www.gravatar.com/avatar/30c8191e4ff2ab8c26533caccdb3d82972acfb51bc5dc9650cb1d63b6ec48e82?d=identicon)[ether](/maintainers/ether)

---

Top Contributors

[![Tam](https://avatars.githubusercontent.com/u/977594?v=4)](https://github.com/Tam "Tam (48 commits)")[![jaydensmith](https://avatars.githubusercontent.com/u/16344913?v=4)](https://github.com/jaydensmith "jaydensmith (4 commits)")[![alexjcollins](https://avatars.githubusercontent.com/u/12031196?v=4)](https://github.com/alexjcollins "alexjcollins (2 commits)")[![yoannisj](https://avatars.githubusercontent.com/u/3032696?v=4)](https://github.com/yoannisj "yoannisj (1 commits)")

---

Tags

webgooglepaymentsApple Paypayapplegoogle-pay

### Embed Badge

![Health badge](/badges/ether-web-payments/health.svg)

```
[![Health](https://phpackages.com/badges/ether-web-payments/health.svg)](https://phpackages.com/packages/ether-web-payments)
```

###  Alternatives

[amzn/amazon-pay-sdk-php

Amazon Pay SDK (PHP)

20512.1M3](/packages/amzn-amazon-pay-sdk-php)[recurly/recurly-client

The PHP client library for the Recurly API

1736.3M7](/packages/recurly-recurly-client)[amzn/amazon-pay-api-sdk-php

Amazon Pay API SDK (PHP)

505.1M9](/packages/amzn-amazon-pay-api-sdk-php)[enupal/stripe

Allows customers sign up for recurring and one-time payments with Stripe, perfect for orders, donations, subscriptions, and events. Create simple payment forms in seconds easily without coding. For Craft CMS 3.x

3416.5k1](/packages/enupal-stripe)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)