Here is my code based on the documentation

        const appearance = {
            theme: 'stripe',
            variables: {
                borderRadius: '36px',
            },
        };
        const expressCheckoutOptions = {
            buttonHeight: 50,
            buttonType: {
                applePay: 'buy',
                googlePay: 'buy',
                paypal: 'checkout',
                klarna: 'pay',
            },
        };
        const elements = stripe.elements({
            mode: 'payment',
          //  mode: 'subscription', DOES NOT WORK despite documentation saying it does?
            amount: amount * 100, // Convert to smallest currency unit
            currency: currency,
            appearance,
        });
        const expressCheckoutElement = elements.create('expressCheckout', expressCheckoutOptions);
        expressCheckoutElement.mount(mountElementId);

It does not work if I change mode to subscription. Im not sure why. The element will not be created and it will return an empty element. However with payment, I can see my express checkout, like so:

Here is my code based on the documentation https://docs.stripe/elements/express-checkout-element/accept-a-payment#additional-options

        const appearance = {
            theme: 'stripe',
            variables: {
                borderRadius: '36px',
            },
        };
        const expressCheckoutOptions = {
            buttonHeight: 50,
            buttonType: {
                applePay: 'buy',
                googlePay: 'buy',
                paypal: 'checkout',
                klarna: 'pay',
            },
        };
        const elements = stripe.elements({
            mode: 'payment',
          //  mode: 'subscription', DOES NOT WORK despite documentation saying it does?
            amount: amount * 100, // Convert to smallest currency unit
            currency: currency,
            appearance,
        });
        const expressCheckoutElement = elements.create('expressCheckout', expressCheckoutOptions);
        expressCheckoutElement.mount(mountElementId);

It does not work if I change mode to subscription. Im not sure why. The element will not be created and it will return an empty element. However with payment, I can see my express checkout, like so:

• javascript
• html
• stripe-payments

• What is the issue you are facing when passing subscription as a mode ? Can you share the error message you got ? – os4m37 Commented Mar 26 at 8:18

1 Answer 1

you can do it like this

first Set Up the Elements Instance for Subscriptions

    mode: 'setup',
    amount: amount * 100,
    currency: currency,
    appearance,
});

Create and Mount the Express Checkout Element

const expressCheckoutElement = elements.create('expressCheckout', expressCheckoutOptions);
expressCheckoutElement.mount(mountElementId);

then Handle the Confirmation Event

    const { error: submitError } = await elements.submit();
    if (submitError) {
        handleError(submitError);
        return;
    }
    
    const { error, paymentMethod } = await stripe.createPaymentMethod({
        elements,
        params: {
            billing_details: event.billingDetails,
        },
    });
    if (error) {
        handleError(error);
        return;
    }
    // Use the paymentMethod.id to create a subscription on your server
});