Wired up gift subscription checkout end-to-end

ref https://linear.app/ghost/issue/BER-3484

Wired up the gift subscription checkout end-to-end

Author: mike182uk

apps/portal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tryghost/portal",
-  "version": "2.67.5",
+  "version": "2.67.7",
   "license": "MIT",
   "repository": "https://github.com/TryGhost/Ghost",
   "author": "Ghost Foundation",

apps/portal/src/actions.js

@@ -223,6 +223,24 @@ async function checkoutPlan({data, state, api}) {
     }
 }
 
+async function checkoutGift({data, state, api}) {
+    try {
+        const {tierId, cadence, email} = data;
+        await api.member.checkoutGift({tierId, cadence, email});
+        return {
+            action: 'checkoutGift:success'
+        };
+    } catch (e) {
+        return {
+            action: 'checkoutGift:failed',
+            popupNotification: createPopupNotification({
+                type: 'checkoutGift:failed', autoHide: false, closeable: true, state, status: 'error',
+                message: t('Failed to process checkout, please try again')
+            })
+        };
+    }
+}
+
 async function updateSubscription({data, state, api}) {
     try {
         const {plan, planId, subscriptionId, cancelAtPeriodEnd} = data;
@@ -678,6 +696,7 @@ const Actions = {
     editBilling,
     manageBilling,
     checkoutPlan,
+    checkoutGift,
     updateNewsletterPreference,
     showPopupNotification,
     removeEmailFromSuppressionList,

apps/portal/src/components/pages/gift-page.js

@@ -3,6 +3,7 @@ import AppContext from '../../app-context';
 import CloseButton from '../common/close-button';
 import SiteTitleBackButton from '../common/site-title-back-button';
 import InputForm from '../common/input-form';
+import ActionButton from '../common/action-button';
 import LoadingPage from './loading-page';
 import {ReactComponent as CheckmarkIcon} from '../../images/icons/checkmark.svg';
 import {getAvailableProducts, getCurrencySymbol, formatNumber, getStripeAmount, isCookiesDisabled, getActiveInterval} from '../../utils/helpers';
@@ -61,7 +62,7 @@ function GiftProductCardPrice({product, selectedInterval}) {
     );
 }
 
-function GiftProductCard({product, selectedInterval, onPurchase, disabled}) {
+function GiftProductCard({brandColor, product, selectedInterval, isDisabled, isPurchasing, onPurchase}) {
     let productDescription = product.description;
 
     if ((!product.benefits || !product.benefits.length) && !productDescription) {
@@ -84,14 +85,15 @@ function GiftProductCard({product, selectedInterval, onPurchase, disabled}) {
                     <GiftProductCardBenefits product={product} />
                 </div>
                 <div className='gh-portal-btn-product'>
-                    <button
-                        data-test-button='purchase-gift'
-                        className='gh-portal-btn'
-                        disabled={disabled}
-                        onClick={onPurchase}
-                    >
-                        Purchase gift
-                    </button>
+                    <ActionButton
+                        dataTestId='purchase-gift'
+                        label='Purchase gift'
+                        onClick={e => onPurchase(e, product)}
+                        disabled={isDisabled}
+                        isRunning={isPurchasing}
+                        brandColor={brandColor}
+                        style={{width: '100%'}}
+                    />
                 </div>
             </div>
         </div>
@@ -132,10 +134,11 @@ function GiftPriceSwitch({selectedInterval, setSelectedInterval, products}) {
 }
 
 const GiftPage = () => {
-    const {site, member} = useContext(AppContext);
+    const {site, member, brandColor, action, doAction} = useContext(AppContext);
     const [email, setEmail] = useState(member?.email || '');
     const [emailError, setEmailError] = useState('');
     const [selectedInterval, setSelectedInterval] = useState(null);
+    const [selectedProduct, setSelectedProduct] = useState(null);
 
     if (!site) {
         return <LoadingPage />;
@@ -176,7 +179,8 @@ const GiftPage = () => {
 
     const siteIcon = site.icon;
     const siteTitle = site.title || '';
-    const disabled = isCookiesDisabled();
+    const isPurchasing = action === 'checkoutGift:running';
+    const isDisabled = isCookiesDisabled() || isPurchasing;
 
     const emailField = [{
         type: 'email',
@@ -190,7 +194,7 @@ const GiftPage = () => {
         errorMessage: emailError
     }];
 
-    const handlePurchase = (e) => {
+    const handlePurchase = (e, product) => {
         e.preventDefault();
 
         const errors = ValidateInputForm({fields: emailField});
@@ -201,7 +205,13 @@ const GiftPage = () => {
         }
 
         setEmailError('');
-        // TODO: implement gift checkout using priceId and email
+        setSelectedProduct(product.id);
+
+        doAction('checkoutGift', {
+            tierId: product.id,
+            cadence: activeInterval,
+            email
+        });
     };
 
     return (
@@ -243,10 +253,12 @@ const GiftPage = () => {
                                 {products.map(product => (
                                     <GiftProductCard
                                         key={product.id}
+                                        brandColor={brandColor}
                                         product={product}
                                         selectedInterval={activeInterval}
+                                        isDisabled={isDisabled}
+                                        isPurchasing={isPurchasing && selectedProduct === product.id}
                                         onPurchase={handlePurchase}
-                                        disabled={disabled}
                                     />
                                 ))}
                             </div>

apps/portal/src/utils/api.js

@@ -509,6 +509,55 @@ function setupGhostApi({siteUrl = window.location.origin, apiUrl, apiKey}) {
             });
         },
 
+        async checkoutGift({tierId, cadence, email: customerEmail} = {}) {
+            const url = endpointFor({type: 'members', resource: 'create-stripe-checkout-session'});
+
+            let identity = null;
+            try {
+                identity = await api.member.identity();
+            } catch (e) {
+                // Not authenticated - that's fine for gift purchases
+            }
+
+            const body = {
+                identity,
+                metadata: {
+                    requestSrc: 'portal'
+                },
+                type: 'gift',
+                tierId,
+                cadence,
+                customerEmail
+            };
+
+            const response = await makeRequest({
+                url,
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(body)
+            });
+
+            const responseJson = await response.json();
+
+            if (!response.ok) {
+                const error = responseJson?.errors?.[0];
+
+                if (error) {
+                    throw error;
+                }
+
+                throw new Error('Failed to process gift checkout, please try again.');
+            }
+
+            if (responseJson.url) {
+                return window.location.assign(responseJson.url);
+            }
+
+            throw new Error('Failed to process gift checkout, please try again.');
+        },
+
         async checkoutDonation({successUrl, cancelUrl, metadata = {}, personalNote = ''} = {}) {
             const identity = await api.member.identity();
             const url = endpointFor({type: 'members', resource: 'create-stripe-checkout-session'});

apps/portal/test/actions.test.ts

@@ -343,3 +343,47 @@ describe('verifyOTC action', () => {
         });
     });
 });
+
+describe('checkoutGift action', () => {
+    test('calls api.member.checkoutGift with correct data', async () => {
+        const mockApi = {
+            member: {
+                checkoutGift: vi.fn(() => Promise.resolve())
+            }
+        };
+
+        const result = await ActionHandler({
+            action: 'checkoutGift',
+            data: {tierId: 'tier_123', cadence: 'month', email: 'buyer@example.com'},
+            state: {},
+            api: mockApi
+        });
+
+        expect(mockApi.member.checkoutGift).toHaveBeenCalledWith({
+            tierId: 'tier_123',
+            cadence: 'month',
+            email: 'buyer@example.com'
+        });
+        expect(result.action).toBe('checkoutGift:success');
+    });
+
+    test('returns failed action with notification on error', async () => {
+        const mockApi = {
+            member: {
+                checkoutGift: vi.fn(() => Promise.reject(new Error('Stripe error')))
+            }
+        };
+
+        const result = await ActionHandler({
+            action: 'checkoutGift',
+            data: {tierId: 'tier_123', cadence: 'month', email: 'buyer@example.com'},
+            state: {},
+            api: mockApi
+        });
+
+        expect(result.action).toBe('checkoutGift:failed');
+        expect(result.popupNotification).toBeDefined();
+        expect(result.popupNotification.type).toBe('checkoutGift:failed');
+        expect(result.popupNotification.status).toBe('error');
+    });
+});

ghost/core/core/server/services/members/members-api/controllers/router-controller.js

@@ -29,6 +29,7 @@ const messages = {
     memberNotFound: 'No member exists with this e-mail address.',
     invalidType: 'Invalid checkout type.',
     notConfigured: 'This site is not accepting payments at the moment.',
+    giftSubscriptionsNotEnabled: 'Gift subscriptions are not enabled on this site.',
     invalidNewsletters: 'Cannot subscribe to invalid newsletters {newsletters}',
     archivedNewsletters: 'Cannot subscribe to archived newsletters {newsletters}',
     otcNotSupported: 'OTC verification not supported.',
@@ -598,14 +599,47 @@ module.exports = class RouterController {
         }
     }
 
+    /**
+     * @param {object} options
+     * @param {object} options.tier
+     * @param {string} options.cadence
+     * @param {string} options.successUrl Base URL for success redirect (payments service appends gift token params)
+     * @param {string} options.cancelUrl URL to redirect to after cancelled checkout
+     * @param {string} [options.email] Email address of the purchaser
+     * @param {object} [options.member] Currently authenticated member
+     * @param {boolean} options.isAuthenticated
+     * @param {object} options.metadata Metadata to be passed to Stripe
+     * @returns
+     */
+    async _createGiftCheckoutSession(options) {
+        if (!this._paymentsService.stripeAPIService.configured) {
+            throw new DisabledFeatureError({
+                message: tpl(messages.notConfigured)
+            });
+        }
+
+        try {
+            const paymentLink = await this._paymentsService.getGiftPaymentLink(options);
+
+            return {url: paymentLink};
+        } catch (err) {
+            logging.error(err);
+            this._sentry?.captureException?.(err);
+            throw new BadRequestError({
+                err,
+                message: tpl(messages.unableToCheckout)
+            });
+        }
+    }
+
     async createCheckoutSession(req, res) {
         const type = req.body.type ?? 'subscription';
         const metadata = req.body.metadata ?? {};
         const identity = req.body.identity;
         const membersEnabled = true;
 
         // Check this checkout type is supported
-        if (typeof type !== 'string' || !['subscription', 'donation'].includes(type)) {
+        if (typeof type !== 'string' || !['subscription', 'donation', 'gift'].includes(type)) {
             throw new BadRequestError({
                 message: tpl(messages.invalidType)
             });
@@ -682,6 +716,36 @@ module.exports = class RouterController {
         } else if (type === 'donation') {
             options.personalNote = parsePersonalNote(req.body.personalNote);
             response = await this._createDonationCheckoutSession(options);
+        } else if (type === 'gift') {
+            if (!this.labsService.isSet('giftSubscriptions')) {
+                throw new BadRequestError({
+                    message: tpl(messages.giftSubscriptionsNotEnabled)
+                });
+            }
+
+            if (req.body.offerId) {
+                throw new BadRequestError({
+                    message: tpl(messages.badRequest),
+                    context: 'Offers cannot be applied to gift subscriptions'
+                });
+            }
+
+            const data = await this._getSubscriptionCheckoutData(req.body);
+
+            // Gifts require a paid tier
+            if (!data.tier.getPrice(data.cadence)) {
+                throw new BadRequestError({
+                    message: tpl(messages.badRequest),
+                    context: 'Gift subscriptions require a paid tier'
+                });
+            }
+
+            response = await this._createGiftCheckoutSession({
+                ...options,
+                ...data,
+                successUrl: this._urlUtils.getSiteUrl(),
+                cancelUrl: this._urlUtils.getSiteUrl()
+            });
         }
 
         res.writeHead(200, {