Start Selling Subscriptions From Your Website FAST!
Tags: javascript, beginners, tutorial
Published: 2022-10-24 15:03:13

In this guide, I will show you how to get subscriptions to your products and services up and running fast! [PayPal](https://paypal.com) provides a straightforward way to sell subscriptions. You shall configure your subscription plan within PayPal's sandbox environment, so that you can thoroughly test your subscription flow without any financial risk.

Once your sandbox subscription setup is working properly, you need only to duplicate the steps we took from within your PayPal Business account.

## Guide Overview
[Part 1. Get Sandbox Credentials](#part-1-get-sandbox-credentials)
[Part 2. Create Subscription Product & Plan](#part-2-create-subscription-product-amp-plan)
[Part 3. Generate and Embed Subscription Buttons](#part-3-generate-and-embed-subscription-buttons)
[Part 4. Test Your Subscription Flow](#part-4-test-your-subscription-flow)
[Part 5. Collect Live PayPal Subscriptions](#part-5-collect-live-payPal-subscriptions)

---

### Part 1. Get Sandbox Credentials

Sign into your [PayPal Developer](https://developer.paypal.com) account. If you do not have one yet, [sign up](https://paypal.com) for a Business PayPal account, then navigate to the PayPal Developer site.

From the [Developer Dashboard](https://developer.paypal.com/dashboard/accounts), you will grab the credentials for your sandbox accounts.

PayPal has automatically created 2 sandbox accounts for you: one called **Business** and the other **Personal**. The **Business** sandbox represents the Merchant (seller) perspective, while the **Personal** sandbox account represents the buyer's perspective.

For this guide, I shall refer to the Business sandbox account as the ***Merchant*** **sandbox account**, to avoid clashing terms with the Business-type PayPal account that grants Developer Dashboard access. 

Click on the three dots to the right of each sandbox account type, then choose `View/Edit account`. 

![GIF showing selection of View/Edit account](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qd4rg2tgwjs9k1itvlff.gif)

Copy the email and password for both sandbox accounts to a safe place for use later. Then sign out of your PayPal Developer account.

---

### Part 2. Create Subscription Product & Plan

Next, you shall create both a Subscription product and plan. The product is the item/service you are selling, while the plan governs the details of your customers' subscription to your product.

Sign into [PayPal's Sandbox](https://sandbox.paypal.com/signin) using your Merchant sandbox account. Navigate to **Pay & Get Paid** => **Accept Payments** => **Subscriptions**. Select **Subscription plans**, then click the button **Create Plan**.

If you already have a subscription product, select it; else, click on **Create a subscription product**. For this guide, fill out just the required fields: Product name & Product type. The Product ID is filled automatically (unless you desire a specific product ID). Then choose your newly-created product on the next page:

![Subscription Product selection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5s8wvu54z15xstbok6m1.png)

Next, you build your Subscription Plan. For the purposes of this guide, I recommend the following features:
- Fixed Pricing
- Unlimited billing cycles
- Billing every 1 month
- 1 missed billing cycle before subscription paused
- Auto billing of outstanding payments

---

### Part 3. Generate and Embed Subscription Buttons

After configuring your subscription plan, click **Turn Plan On**. PayPal then generates your Subscription buttons! 🎉 Configure your buttons to your preferred design, then click `Copy Code`. This is the code you will paste in your application. A sample of this code is below:

```html
<div id="paypal-button-container-P-1M286691T85502507MNG3SQA"></div>

<script src="https://www.paypal.com/sdk/js?client-id=AQW7aBOHsXSUZx9awY6GCwAlfDlbSvHnOwcSqLl99ZBD4CCsDaht0EAPdhYKkd3fo_Zdk8zYMFnCz7_x&vault=true&intent=subscription" data-sdk-integration-source="button-factory"></script>
<script>
  paypal.Buttons({
      style: {
          shape: 'rect',
          color: 'gold',
          layout: 'vertical',
          label: 'subscribe'
      },
      createSubscription: function(data, actions) {
        return actions.subscription.create({
          plan_id: 'P-1M286691T85502507MNG3SQA'
        });
      },
      onApprove: function(data, actions) {
        alert(data.subscriptionID);
      }
  }).render('#paypal-button-container-P-1M286691T85502507MNG3SQA');
</script>
```

There are 2 `<script>` tags. The first `<script>` tag details the PayPal Software Developer Kit (SDK) that you are using, and contains your `client-id`, which the button generator inserted automatically for you:

```html
<script src="https://www.paypal.com/sdk/js?client-id=AQW7aBOHsXSUZx9awY6GCwAlfDlbSvHnOwcSqLl99ZBD4CCsDaht0EAPdhYKkd3fo_Zdk8zYMFnCz7_x&vault=true&intent=subscription" data-sdk-integration-source="button-factory"></script>
```

The second `<script>` tag confers the buttons' functionality, and also renders your Subscribe buttons at the `<div>` with an `id` that starts `paypal-button-container...`:

```html
<div id="paypal-button-container-P-1M286691T85502507MNG3SQA"></div>
```

Move this `<div>` to where you wish your buttons to be displayed. Just ensure that this location is on the SAME page as the two `<script>` tags.

Within the `onApprove` value in the 2nd `<script>` tag, you may configure the action to occur after your customers subscribe. For example, you may want to update your UI with a confirmation message. The default `onApprove` behavior displays an alert containing the ID of the newly-activated subscription.

```js
onApprove: function(data, actions) {
   alert(data.subscriptionID);
}
```

---

### Part 4. Test Your Subscription Flow

Now for the fun part! 💃🏽 Click on the **PayPal Subscribe** button within your app. A window should popup allowing you to pay with a PayPal account. Sign in with your Personal sandbox account:

![PayPal Sign-In Popup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/14lzuzfsbybfzr9ugf7m.png)

You should see details of your pending subscription purchase, with options to choose either your sandbox bank account, or sandbox credit card, for payment:

![PayPal Subscription Screens](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zyor0ki4dh2k6vfkkgrj.png)

Complete the checkout flow. If you left the default behavior for `onApprove` in place, you should see an alert popup.

To verify that your sandbox subscription purchase was successful, sign into your [Personal sandbox Account](https://sandbox.paypal.com) in an **incognito** tab, using your Personal sandbox credentials. You should see that your sandbox account was debited by the cost of your subscription. Over in your Merchant sandbox account, you should also see that your balance has increased by the same amount! 🥳

---

### Part 5. Collect Live PayPal Subscriptions

To configure a PayPal Subscription Plan that accepts live payments, simply repeat the steps above using your PayPal Business account. Sign into https://paypal.com (notice there is no `sandbox` subdomain), navigate to  **Pay & Get Paid** => **Accept Payments** => **Subscriptions** and continue the steps as above.

Bear in mind that to test your live Subscription configuration, you would need an actual PayPal account (not the sandbox kind) and/or an actual credit/debit card. Also, the purchase will be real. I strongly recommend using your sandbox accounts to do all the testing and adjustments you wish, before going live with your subscription.

Have fun! And get that money! 😉

---

> #### Join the PayPal Developer Community
Our Developer Community members support each other in integrating PayPal technologies, contributing to open source, expanding knowledge and networks, and improving PayPal's products and documentation. We'd love to have you join us! 💙 
- Website: https://developer.paypal.com
- Twitter: [@paypaldev](https://twitter.com/paypaldev)
- Github: [@paypal](https://github.com/paypal)