PHPackages craft-unit/craft-stripe-express-checkout - 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. craft-unit/craft-stripe-express-checkout ActiveCraft-plugin[Payment Processing](/categories/payments) craft-unit/craft-stripe-express-checkout ======================================== Adding the Stripe Express Checkout to Commerce-Stripe. 1.0.2(5mo ago)016[3 issues](https://github.com/craftunit/stripe-express-checkout/issues)proprietaryPHPPHP >=8.2CI passing Since Sep 22Pushed 5mo agoCompare [ Source](https://github.com/craftunit/stripe-express-checkout)[ Packagist](https://packagist.org/packages/craft-unit/craft-stripe-express-checkout)[ RSS](/packages/craft-unit-craft-stripe-express-checkout/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (3)Dependencies (10)Versions (5)Used By (0) Stripe Express Checkout ======================= [](#stripe-express-checkout) Adding the [Stripe Express Checkout Element](https://docs.stripe.com/elements/express-checkout-element) to Commerce-Stripe. Table of Contents ----------------- [](#table-of-contents) - [Features](#features) - [Showcase](#showcase) - [Requirements](#requirements) - [Installation](#installation) - [Setup](#setup) - [Products page](#products-page) - [Cart page](#cart-page) - [Order complete](#order-complete) - [Configuration](#configuration) - [Global Settings](#global-settings) - [Local Settings](#local-settings) - [Extending and Customizing](#extending-and-customizing) - [Event Hooks](#event-hooks) - [Frontend JS](#frontend-js) - [Events](#events) - [Public Methods](#public-methods) - [Example](#example) Features -------- [](#features) - Adds the Stripe Express Checkout Element to your Craft Commerce site. - Checkout products and carts with a single click. - Supports Apple Pay, Google Pay, PayPal and much more. - Supports shipping address and phone number requirements. - Supports all the options from the Stripe Express Checkout Element. - Intercept request through event hooks. - Automatically adjusts costs based on configured shipping rules. - Restrict deliveries to allowed countries in your Commerce settings. Showcase -------- [](#showcase) **TODO: Add gif/webm of the express checkout; Maybe a YouTube Video showcasing the plugin would be neat** Requirements ------------ [](#requirements) - PHP >= 8.2 - [Stripe Account](https://stripe.com) - [Craft CMS ^5.0.0](https://github.com/craftcms/cms) - [Craft Commerce ^5.0.0](https://github.com/craftcms/commerce) - [Craft Commerce Stripe ^5.0.0](https://github.com/craftcms/commerce-stripe) Installation ------------ [](#installation) You can install this plugin from the Plugin Store or with Composer. #### From the Plugin Store [](#from-the-plugin-store) e Go to the Plugin Store in your project’s Control Panel and search for “Stripe Express Checkout”. Then press “Install”. #### With Composer [](#with-composer) Open your terminal and run the following commands: ``` # go to the project directory cd /path/to/my-project.test # tell Composer to load the plugin composer require craft-unit/craft-stripe-express-checkout # tell Craft to install the plugin ./craft plugin/install stripe-express-checkout ``` Setup ----- [](#setup) 1. Create a [Stripe Account](https://stripe.com) or use an existing one. 2. Install [Craft Commerce](https://github.com/craftcms/commerce) and the [Stripe Gateway Plugin](https://github.com/craftcms/commerce-stripe). 3. Follow the [setup](https://github.com/craftcms/commerce-stripe#setup) instruction for the [Stripe Gateway Plugin](https://github.com/craftcms/commerce-stripe). 4. Go to the plugin settings in the sidebar and select the gateway you just created. 5. Render the buttons on your products and cart page. 6. Be sure to handle the order complete event. You can use the `fetch` API to ask for the order and return it to the success page. See the [Order complete](#order-complete) section for more information. ### Products page [](#products-page) **`products/_product.twig`** ``` {{ craft.expressCheckout.buttons({ itemsId: product.defaultVariant.id }) | raw }} {# or... #} {{ craft.expressCheckout.buttons({ items: [{ id: product.defaultVariant.id, qty: 1, }], }) | raw }} ``` [![Product Page](https://camo.githubusercontent.com/8e729ceea1768b6bcfc7a32f2e3fc0c36545c13d0a01e829f4ad305a46c6030f/68747470733a2f2f692e696d6775722e636f6d2f577861667a61692e706e67)](https://camo.githubusercontent.com/8e729ceea1768b6bcfc7a32f2e3fc0c36545c13d0a01e829f4ad305a46c6030f/68747470733a2f2f692e696d6775722e636f6d2f577861667a61692e706e67) ### Cart page [](#cart-page) **`cart.twig`** ``` {{ craft.expressCheckout.buttons({ cart: craft.commerce.carts.cart, }) | raw }} ``` [![Cart Page](https://camo.githubusercontent.com/618b48147f690053a95c8a3e37f2665095a1ce5b0d8ddb47e74b9ed0ad0e55b5/68747470733a2f2f692e696d6775722e636f6d2f58387751724f6d2e706e67)](https://camo.githubusercontent.com/618b48147f690053a95c8a3e37f2665095a1ce5b0d8ddb47e74b9ed0ad0e55b5/68747470733a2f2f692e696d6775722e636f6d2f58387751724f6d2e706e67) ### Order complete [](#order-complete) After the order is completed, the user will be redirected to the `success_url` you set in the options. At this point in time your order might not be completed in Craft Commerce hence why you won't see the completed order. You can use `fetch` to ask for the order and return it to the success page. Use the `number` query parameter to get the order number. ``` // Get the order number from the query parameter const orderNumber = new URLSearchParams(window.location.search).get('number'); const order = await fetch(`/actions/commerce/stripe-express-checkout/get-order?number=${orderNumber}`); ``` Configuration ------------- [](#configuration) Configuration can be done globally in the plugin settings or locally by passing settings to the `craft.expressCheckout.buttons` function. Passing the settings to the function will override the global settings. You can find all the options in the [Stripe documentation](https://docs.stripe.com/js/element/express_checkout_element). Setting NameDescription`items`List of item object with and `id` and `qty`.`itemId`ID of the variant to sell.`gatewayId`Select the gateway through which payments will be processed.`shippingAddressRequired`Checking this will prompt the user for their shipping address.`phoneNumberRequired`Checking this box will prompt the user for their phone number.`restrictCountries`Checking this will restrict the Stripe 'allowedCountries' to your country list in Commerce -> Store Settings -> Store -> Country List.`successUrl`The URL that Stripe redirects to after a successful transaction. The 'successUrl' gets a query parameter called 'number' that contains the order number.`loaderTemplate`The path to the loader template.`buttonHeight`The height of the buttons.`applePayTheme`The theme of the Apple Pay button.`googlePayTheme`The theme of the GooglePay button.`paypalTheme`The theme of the PayPal button.`applePayType`The type of the Apple Pay button.`googlePayType`The type of the GooglePay button.`paypalType`The type of the PayPal button.`maxColumns`The maximum number of columns.`maxRows`The maximum number of rows.`overflow`Choose how the overflow should be handled.`paymentMethodOrder`The order of the payment methods.`showApplePay`Show the Apple Pay button.`showGooglePay`Show the GooglePay button.`phoneField`Map the phone number to plain text on the order field layout. This will only take effect if you enable 'Phone Number Required'.### Global Settings [](#global-settings) [![Stripe Express Checkout Settings Page](https://camo.githubusercontent.com/58f0d037520d7f2d5847ba8905e20130731781fc6cb0f0efc45f11eec0ca882e/68747470733a2f2f692e696d6775722e636f6d2f556f6f797947682e706e67)](https://camo.githubusercontent.com/58f0d037520d7f2d5847ba8905e20130731781fc6cb0f0efc45f11eec0ca882e/68747470733a2f2f692e696d6775722e636f6d2f556f6f797947682e706e67) ### Local settings [](#local-settings) ``` {% set settings = { name: product.slug ~ '-express-checkout', shippingAddressRequired: true, phoneNumberRequired: false, paymentMethodOrder: ['paypal', 'googlePay', 'link'], buttonTheme: { paypal: 'blue', }, buttonHeight: 55, buttonType: { paypal: 'pay', googlePay: 'order', }, wallets: { applePay: 'always', googlePay: 'always', } {# and more... #} } %} ``` Extending and Customizing ------------------------- [](#extending-and-customizing) ### Event Hooks [](#event-hooks) ClassEventStripeController`EVENT_BEFORE_UPDATE_SHIPPING_RATE`StripeController`EVENT_AFTER_UPDATE_SHIPPING_RATE`StripeController`EVENT_UPDATE_SHIPPING_ADDRESS_ORDER_BEFORE_SAVE`StripeController`EVENT_UPDATE_SHIPPING_ADDRESS_ORDER_AFTER_SAVE`ProcessStripeWebhook`EVENT_MODIFY_ORDER_DETAILS`ProcessStripeWebhook`EVENT_BEFORE_SAVE_SHIPPING_ADDRESS`ProcessStripeWebhook`EVENT_AFTER_SAVE_SHIPPING_ADDRESS`ProcessStripeWebhook`EVENT_BEFORE_SAVE_BILLING_ADDRESS`ProcessStripeWebhook`EVENT_AFTER_SAVE_BILLING_ADDRESS`ProcessStripeWebhook`EVENT_BEFORE_SET_ORDER_CUSTOMER`ProcessStripeWebhook`EVENT_WEBHOOK_FAILED`ProcessStripeWebhook`EVENT_RECEIVED_WEBHOOK`ProcessStripeWebhook`EVENT_BEFORE_UPDATE_ORDER_WITH_ORDER_DETAILS`### Frontend JS [](#frontend-js) Each button uses the `StripeExpressCheckout` class. This class is responsible for creating the Stripe Element and handling the payment intent. The instance gets added to the `window.stripeExpressCheckouts` object. You can give your express checkout buttons a custom name by passing the `name` option to the `craft.expressCheckout.buttons` function. You can then access the instance by calling `window.stripeExpressCheckouts['your-custom-name']`or `StripeExpressCheckout.getByName('your-custom-name')`. Take a look at the [`StripeExpressCheckout`](https://github.com/craftunit/stripe-express-checkout/blob/main/src/web/assets/expresscheckout/js/main.js)class to see all the available events and methods. #### Events [](#events) EventDescriptionstripe-express-checkout:initCalled after instance was created and added to `window` objectstripe-express-checkout:successCalled after successful `onConfirm`stripe-express-checkout:errorCalled after failure in `onConfirm`All Events get dispatched on the window object. You can listen to them by adding an event listener to the window object. ``` window.addEventListener('stripe-express-checkout:init', event => { const {name, instance} = event.detail; console.log(name, instance); }); ``` #### Public Methods [](#public-methods) Method NameParametersDescription`setItemQty`id: number, qty: numberSet the quantity of an item.#### Example [](#example) Below is a example showing how to manipulate the quantity of a product in the cart using the `setItemQty` method. ``` {% set params = requiredParams | merge(optionalParams) %} {{ craft.expressCheckout.buttons({ name: 'foo', items: [{ id: variant.id, qty: 1, }] }) | raw }} // Wait for the express checkout to initialize window.addEventListener('stripe-express-checkout:init', event => { // Get the instance by name const {name, instance} = event.detail; if (name !== 'product-express-checkout') return; const quantityInput = document.querySelector('.quantity input'); quantityInput.addEventListener('input', event => { const qty = parseInt(event.target.value, 10); // Set the quantity of the item instance.setItemQty({{ variant.id }}, qty); }); }); ``` ### Health Score 36 — LowBetter than 82% of packages Maintenance71 Regular maintenance activity Popularity8 Limited adoption so far Community6 Small or concentrated contributor base Maturity51 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% 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 ~35 days Total 3 Last Release 161d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/10020fb15b7297318116116949aa6620bb632389bc58c623ce0843acf89c6100?d=identicon)[craft-unit](/maintainers/craft-unit) --- Top Contributors [![craftunit-liam](https://avatars.githubusercontent.com/u/163422306?v=4)](https://github.com/craftunit-liam "craftunit-liam (66 commits)") ### Code Quality TestsCodeception ### Embed Badge ![Health badge](/badges/craft-unit-craft-stripe-express-checkout/health.svg) ``` [![Health](https://phpackages.com/badges/craft-unit-craft-stripe-express-checkout/health.svg)](https://phpackages.com/packages/craft-unit-craft-stripe-express-checkout) ``` ### Alternatives [craftcms/commerce-stripe Stripe integration for Craft Commerce 5.0+ 32157.4k3](/packages/craftcms-commerce-stripe) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)