Implemented stripe checkout handling for members

no-issue

* Installed members-api@0.5.0 members-ssr@0.3.1
* Supported multiple members-forms
* Used members canary api
* Added GET handler to /members/ssr for id token
The identity token will be used to ensure that a payment is linked to the correct member
* Added stripe.js to ghost_head when members enabled
* Added basic support for linking to stripe checkout
* Removed listener to title and icon settings changes
* Added stripe subscription config

core/frontend/helpers/ghost_head.js

@@ -57,6 +57,7 @@ function getAjaxHelper(clientId, clientSecret) {
 
 function getMembersHelper() {
     return `
+        <script src="https://js.stripe.com/v3/"></script>
         <script defer src="${getAssetUrl('public/members.js')}"></script>
     `;
 }

core/server/public/members.js

@@ -1,5 +1,5 @@
-const form = document.querySelector('form[data-members-form]');
-if (form) {
+const forms = [...document.querySelectorAll('form[data-members-form]')];
+forms.forEach(function (form){
     form.addEventListener('submit', function (event) {
         event.preventDefault();
         form.classList.remove('success', 'invalid', 'error');
@@ -11,7 +11,7 @@ if (form) {
             return;
         }
 
-        fetch('{{admin-url}}/api/v2/members/send-magic-link/', {
+        fetch('{{admin-url}}/api/canary/members/send-magic-link/', {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -27,7 +27,48 @@ if (form) {
             }
         });
     });
-}
+});
+
+const subscriptionButtons = [...document.querySelectorAll('[data-members-subscription]')];
+
+subscriptionButtons.forEach(function (button) {
+    button.addEventListener('click', function (event) {
+        event.preventDefault();
+
+        const {
+            membersSubscriptionPlan: plan
+        } = event.target.dataset;
+
+        fetch('{{blog-url}}/members/ssr', {
+            credentials: 'same-origin'
+        }).then(function (res) {
+            if (!res.ok) {
+                throw new Error('Could not get identity token');
+            }
+            return res.text();
+        }).then(function (identity) {
+            return fetch('{{admin-url}}/api/canary/members/create-stripe-checkout-session/', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    plan, identity
+                })
+            }).then(function (res) {
+                if (!res.ok) {
+                    throw new Error('Could not create stripe checkout session');
+                }
+                return res.json();
+            });
+        }).then(function ({sessionId, publicKey}) {
+            const stripe = Stripe(publicKey);
+            return stripe.redirectToCheckout({
+                sessionId
+            });
+        });
+    });
+});
 
 const magicLinkRegEx = /token=([a-zA-Z0-9_\-]+\.[a-zA-Z0-9_\-]+\.[a-zA-Z0-9_\-]+)/;
 const [isMagicLink, token] = location.search.match(magicLinkRegEx) || [false, null];

core/server/services/members/api.js

@@ -59,6 +59,30 @@ const membersApiUrl = getApiUrl({version: 'v2', type: 'members'});
 
 const ghostMailer = new mail.GhostMailer();
 
+function getStripePaymentConfig() {
+    const subscriptionSettings = settingsCache.get('members_subscription_settings');
+    if (!subscriptionSettings || subscriptionSettings.isPaid === false) {
+        return null;
+    }
+
+    const stripePaymentProcessor = subscriptionSettings.paymentProcessors.find(
+        paymentProcessor => paymentProcessor.adapter === 'stripe'
+    );
+
+    if (!stripePaymentProcessor || !stripePaymentProcessor.config) {
+        return null;
+    }
+
+    return {
+        publicKey: stripePaymentProcessor.config.public_token,
+        secretKey: stripePaymentProcessor.config.secret_token,
+        checkoutSuccessUrl: siteUrl,
+        checkoutCancelUrl: siteUrl,
+        product: stripePaymentProcessor.config.product,
+        plans: stripePaymentProcessor.config.plans
+    };
+}
+
 module.exports = createApiInstance;
 
 function createApiInstance() {
@@ -82,6 +106,9 @@ function createApiInstance() {
                 }
             }
         },
+        paymentConfig: {
+            stripe: getStripePaymentConfig()
+        },
         createMember,
         getMember,
         deleteMember,

core/server/services/members/index.js

@@ -9,7 +9,7 @@ let membersApi;
 
 // Bind to events to automatically keep subscription info up-to-date from settings
 common.events.on('settings.edited', function updateSettingFromModel(settingModel) {
-    if (!['members_subscription_settings', 'title', 'icon'].includes(settingModel.get('key'))) {
+    if (!['members_subscription_settings'].includes(settingModel.get('key'))) {
         return;
     }
 

core/server/web/site/app.js

@@ -93,6 +93,16 @@ module.exports = function setupSiteApp(options = {}) {
 
     // @TODO only loads this stuff if members is enabled
     // Set req.member & res.locals.member if a cookie is set
+    siteApp.get('/members/ssr', shared.middlewares.labs.members, function (req, res) {
+        membersService.ssr.getIdentityTokenForMemberFromSession(req, res).then((token) => {
+            res.writeHead(200);
+            res.end(token);
+        }).catch((err) => {
+            common.logging.warn(err.message);
+            res.writeHead(err.statusCode);
+            res.end(err.message);
+        });
+    });
     siteApp.post('/members/ssr', shared.middlewares.labs.members, function (req, res) {
         membersService.ssr.exchangeTokenForSession(req, res).then(() => {
             res.writeHead(200);

package.json

@@ -41,8 +41,8 @@
   "dependencies": {
     "@nexes/nql": "0.3.0",
     "@tryghost/helpers": "1.1.8",
-    "@tryghost/members-api": "0.4.1",
-    "@tryghost/members-ssr": "0.3.0",
+    "@tryghost/members-api": "0.5.0",
+    "@tryghost/members-ssr": "0.3.1",
     "@tryghost/social-urls": "0.1.2",
     "@tryghost/string": "^0.1.3",
     "@tryghost/url-utils": "0.3.0",

yarn.lock

@@ -194,10 +194,10 @@
     jsonwebtoken "^8.5.1"
     lodash "^4.17.15"
 
-"@tryghost/members-api@0.4.1":
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/@tryghost/members-api/-/members-api-0.4.1.tgz#d1cee9ab451dc1e00c745f826c86325a7065a162"
-  integrity sha512-6DiMDsiLxPyw7nUdQP2t8iXqyhHWJPH6hVvcJmZf6jk0/PViXUXp5SRBxSFF3DOmrbH6Hna5R9kYQ4JZtZ3c8Q==
+"@tryghost/members-api@0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@tryghost/members-api/-/members-api-0.5.0.tgz#3d45847831082a8345a20b251c234e125223030c"
+  integrity sha512-l8X67ixWRsqoJMPTRBYxx5OrhbKQSXuyH7rD70w4JJMVT5+89QGBkCpSBtFsIuscuorXEACEA0rBSDAJR97E3A==
   dependencies:
     "@tryghost/magic-link" "^0.1.0"
     bluebird "^3.5.4"
@@ -210,10 +210,10 @@
     node-jose "^1.1.3"
     stripe "^7.4.0"
 
-"@tryghost/members-ssr@0.3.0":
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/@tryghost/members-ssr/-/members-ssr-0.3.0.tgz#92e972a35c4eb571c25678f6864c183a0dc2a8df"
-  integrity sha512-0HzdwwCoF1AkydGKYnq9Q45/dlAidtBPDizvBna796ElUSskz0p1j7u4BLENmO39mSZ10b2gbf394yN7V7lgDg==
+"@tryghost/members-ssr@0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@tryghost/members-ssr/-/members-ssr-0.3.1.tgz#08f80ba1a17196f57db41b360b6b5ddf31582b0f"
+  integrity sha512-Exs3Kxv10lYqVWYMIyEp4htPCFoNdGRqg82cOrNdgkYwZYxo5nevMikuWKhQpgoEafqhjEeWZ1awCeUxji5sGw==
   dependencies:
     bluebird "^3.5.3"
     concat-stream "^2.0.0"