DEV Community: karan kartikeya

Build a paid membership site using SAWO and Stripe

karan kartikeya — Thu, 25 Nov 2021 08:17:21 +0000

Build a paid membership site with Stripe and Sawo

Stripe: Online payment processing for internet businesses. Stripe is a suite of payment APIs that powers commerce for online businesses of all sizes.

Requirements

Node.js 15.5+ or later
MacOS, Windows (including WSL), and Linux are supported
npm (comes bundled with node.js) or yarn

Steps

1. Generate SAWO API key

Navigate to SAWO Dashboard or create a new account here and log in.
In the SAWO dashboard, click on the create project button at the bottom left to create a new project.
Choose web and then code since we're working with react framework and will be writing the custom code ourselves.

Click continue. You'll see a similar prompt like the one below.

Name your project with a relevant name. 2.1 For development in a local machine, the hostname should be set to 'localhost'.

If using "localhost" as hostname is not working for you, try "127.0.0.1"

2.2 For production, the hostname should be set to your domain.

If you are adding your domain do not add 'https://', ''http://', 'www' or even trailing backslash. Example: https://dev.sawolabs.com/ should be kept as dev.sawolabs.com

On clicking the create button, we can successfully see the API key created prompt and SAWO keys csv file downloaded.

2. Generate Stripe API key and create a product with price

Navigate to Stripe Dashboard or create a new account here and log in.
In the Stripe dashboard, click on the developers option.
In the developers section head to API keys, and there you can find the secret key and publishable key.
Move to the products option to create your products with prices.
You will be able to see your price id in front of the price info after creating the product.

3. Install the dependencies

Enter the following command in the terminal to create a Next.js app.

npm i stripe, express

4. Make endpoints in index.js file and serve your HTML files

Now, create an instance of express and path

  const express = require("express");
  const app = express();
  const path = require("path");

Serve the html files

  app.use(express.static(path.join(__dirname, "public")));
  app.get("/", (req, res) => {
  res.sendFile(__dirname + "/index.html");
  });
  app.get("/login", (req, res) => {
  res.sendFile(__dirname + "/public/login.html");
  });
  app.get("/success", (req, res) => {
  res.sendFile(__dirname + "/public/success.html");
  });
  app.listen("3000", console.log("Listening on port 3000."));

Next, let's create an instance of stripe

  const stripe = require('stripe')('YOUR_STRIPE_SECRET_KEY');

Import the price id generated above

  const priceId = 'YOUR_PRICE_ID';

Create a Checkout Session for Stripe

  const session = await stripe.checkout.sessions.create({
    billing_address_collection: 'auto',
    line_items: [
      {
        price: prices.data[0].id,
        // For metered billing, do not pass quantity
        quantity: 1,

      },
    ],
    mode: 'subscription',
    success_url: `${YOUR_DOMAIN}/success.html?session_id={CHECKOUT_SESSION_ID}`,
    cancel_url: `${YOUR_DOMAIN}/cancel.html`,
  });

  res.redirect(303, session.url);
  });

Get the price from lookup key

  const prices = await stripe.prices.list({
    lookup_keys: [req.body.lookup_key],
    expand: ['data.product'],
  });

Define the line items:

  line_items: [
      {
        price: prices.data[0].id,
        // For metered billing, do not pass quantity
        quantity: 1,

      },
    ],

Define the success and cancel urls:

    success_url: `${YOUR_DOMAIN}/success.html?session_id={CHECKOUT_SESSION_ID}`,
    cancel_url: `${YOUR_DOMAIN}/cancel.html`,

Create a customer portal session:

  const returnUrl = YOUR_DOMAIN;

  const portalSession = await stripe.billingPortal.sessions.create({
    customer: checkoutSession.customer,
    return_url: returnUrl,
  });

Provision access:

  app.post(
  '/webhook',
  express.raw({ type: 'application/json' }),
  (request, response) => {
    const event = request.body;
    // Replace this endpoint secret with your endpoint's unique secret
    // If you are testing with the CLI, find the secret by running 'stripe listen'
    // If you are using an endpoint defined with the API or dashboard, look in your webhook settings
    // at https://dashboard.stripe.com/webhooks
    const endpointSecret = 'whsec_12345';
    // Only verify the event if you have an endpoint secret defined.
    // Otherwise use the basic event deserialized with JSON.parse
    if (endpointSecret) {
      // Get the signature sent by Stripe
      const signature = request.headers['stripe-signature'];
      try {
        event = stripe.webhooks.constructEvent(
          request.body,
          signature,
          endpointSecret
        );
      } catch (err) {
        console.log(`⚠️  Webhook signature verification failed.`, err.message);
        return response.sendStatus(400);
      }
    }
    let subscription;
    let status;
    // Handle the event
    switch (event.type) {
      case 'customer.subscription.trial_will_end':
        subscription = event.data.object;
        status = subscription.status;
        console.log(`Subscription status is ${status}.`);
        // Then define and call a method to handle the subscription trial ending.
        // handleSubscriptionTrialEnding(subscription);
        break;
      case 'customer.subscription.deleted':
        subscription = event.data.object;
        status = subscription.status;
        console.log(`Subscription status is ${status}.`);
        // Then define and call a method to handle the subscription deleted.
        // handleSubscriptionDeleted(subscriptionDeleted);
        break;
      case 'customer.subscription.created':
        subscription = event.data.object;
        status = subscription.status;
        console.log(`Subscription status is ${status}.`);
        // Then define and call a method to handle the subscription created.
        // handleSubscriptionCreated(subscription);
        break;
      case 'customer.subscription.updated':
        subscription = event.data.object;
        status = subscription.status;
        console.log(`Subscription status is ${status}.`);
        // Then define and call a method to handle the subscription update.
        // handleSubscriptionUpdated(subscription);
        break;
      default:
        // Unexpected event type
        console.log(`Unhandled event type ${event.type}.`);
    }
    // Return a 200 response to acknowledge receipt of the event
    response.send();
  }
  );

If you have followed the tutorial well, you'll see a checkout form similar to the one given below when you head to buying membership button on homepage.

Conclusion

Congratulations! You have made it till the end and have learnt how to implement authentication in SAWO and also integrated Stripe API for paid membership. In case you're facing difficulties, here's a working demo of the tutorial you just went over. Find the source code for the same here.

What's Next?

Now that you've learnt how to build a paid-membership site using Stripe and Sawo, feel free to look at the SAWO documentation and integrate some new features in this demo application by forking it in your repo.

How to contribute to a NodeJS project uploaded on the Github account of an organization or developer using Git?

karan kartikeya — Thu, 24 Dec 2020 11:31:20 +0000

STEPS

Installation of the dependencies and IDE
Forking the Project
Cloning it on your local system
Make changes
Committing changes to the Forked repository
Make a pull request

1. Installation of the dependencies

Dependencies that are to be installed for a NodeJs project are:

Install the above dependencies as per your operating system.

2. Forking the Project

This step is not necessary for those wishing to directly contribute and does not want to just pile up the repositories in their account.Those people can skip to the 3rd step directly.
Now suppose we have to contribute to the below repository, therefore we would need to fork this on our own repository first to edit it. Forking is just like making a copy of something. Therefore we click the Fork button available at the top right corner.

Then choose the account in which you want to fork it.

Well done!!! You have successfully forked the repository.

3. Cloning it on your local system

Now lets start cloning it to our local system.
Head to the forked repository in your account and click on option 'Code' which would result in a dropdown menu. Select the notepad like icon next to the given link and the given link would be copied.

Next, open your VS code and click the 'clone repository' option available next to the 'Open folder'.

After clicking it paste the link to the dialog box which appears and press the Enter key.

A pop-up window appears asking for the local storage of the repository. Choose the desired location and wait for the cloning process to finish.
Great job!!! You have successfully cloned the repository and it's showing in the sidebar.

4.Make Changes

Now we are good to make the changes in the project. So I would be showing you how to make this project a NodeJs project.
So follow these steps:

Click the Terminal option and choose New Terminal
Type npm init
After this fill in the asked details according to your preference or just keep pressing the Enter key.
Now you can see a package.json file created in the root directory.
After this you can install Express.js(NodeJs Framework) by typing npm install express. This would install the Express.js framework in your package file.

For users who get an error like:

 npm is not recognized as an internal command...

can get it solved from here.

For users who get an error like:

 git is not recognized as an internal command...

can get it solved from here.

After installing Express.Js, Make an index.js file in the root directory by clicking the new file option in the sidebar above package.json file.
In the index.js file paste the code given here.
Now again head to the terminal window and type node index.js. You will see a output like this

Example app listening at http://localhost:3000

Open up your browser and open the port 3000 and congrats you have successfully set up an express app. Move back to the terminal in the VS code and press ctrl+c to close the server.

5.Committing changes to the Forked repository

Now what's left is just committing your work to the Github repository of yours. So let's begin:

Open the terminal and type

   git add .

This command would add all the changes made to the Local
Repository.

Next command is

  git commit -m "Project Upload"

This command would commit your changes which are ready to be pushed to the main branch. You can change the message("Project Upload") according to your convenience.

In the end type

  git push -u origin main

This command would push all the changes to your Github account Repository. Refresh your Github Repository page and you would see the changes like this.

6. Making a pull request

Click on the pull requests option from above and click the New Pull Request option.

Click the Create Pull Request option and your works done.
Great Job!!! You have successfully made changes to the project and created a pull request. Now just relax and wait for your pull request to get merged by the organization.

So now you all know how to set up the environment for a NodeJs project and some of the git commands.

DEV Community: karan kartikeya

Build a paid membership site using SAWO and Stripe

Build a paid membership site with Stripe and Sawo

Requirements

Steps

1. Generate SAWO API key

2. Generate Stripe API key and create a product with price

3. Install the dependencies

4. Make endpoints in index.js file and serve your HTML files

Conclusion

What's Next?

How to contribute to a NodeJS project uploaded on the Github account of an organization or developer using Git?

STEPS

1. Installation of the dependencies

2. Forking the Project

3. Cloning it on your local system

4.Make Changes

5.Committing changes to the Forked repository

6. Making a pull request

Contact me: