Recurring PayPal Payments

This page will explain in 3 steps how to implement PayPal recurring payments into your Bubble app using SubSocket Checkout.

Switching from sandbox mode to live:

PayPal offers a sandbox and live mode (like the test and live mode in Stripe). In this documentation we will create a sandbox integration. Sandbox mode is used for testing while live mode is for receiving real payments. To test the sandbox integration you will need your sandbox credentials. Best practice is to first implement the sandbox environment and after successfully testing replace it with the live environment. When switching from sandbox to live, you will need to upgrade to the Launch plan in SubSocket and add your live Client ID and Secret to SubSocket if you have not already. You will also need to, for example, replace your sandbox Checkout URL for a Checkout URL you created in live mode in SubSocket. SubSocket makes switching really easy as you can copy your products with plans and webhooks to live with one click.

Step 1/3: Sign up for a SubSocket account and create your first application

Visit SubSocket.io and create an account. Once you have created an account, you will see a screen where you can create your first application. You will need an application name and your PayPal API keys. Your live keys aren't needed immediately, you can always add them later. You can read here more on how to retrieve your PayPal API keys.

Create a product, plan and a SubSocket Checkout.

Inside your SubSocket dashboard, you can go to the Products tab and click on the button Create product to create your first product.

Next, you can create a plan when you scroll all the way down inside the product details. Alternatively, you can click on the Plans tab inside the left sidebar to create a plan for your product.

Now that you have create a plan, you can convert this plan into a Checkout. This can be done by clicking on the Convert to checkout button inside the plan details, or by clicking on the Checkout tab inside the left sidebar. After creation, you can see your Checkout details like the Checkout ID and Checkout URL.

Step 2/3: Subscribing a user to a PayPal plan using the Bubble plugin

Keep in mind that in Bubble you have a version-test and version-live. So make sure you are using the correct Return/cancel URL in your live app.

To subscribe a user to a PayPal plan you can redirect your users to the Checkout URL. Our plugin make handling these URLs super easy. To subscribe a user to a plan, you need to do the following inside your Bubble editor:

1 - Place a button (or any other element) on your page.

2 - Create a workflow for this button with the 'Open an external website' workflow action:

3 - Inside the properties for this action, you can place your Checkout URL you can find in your SubSocket dashboard. When this action is run your user is redirected to the Checkout URL. As simple as that! The user will be returned to the return URL you have specified in SubSocket for this Checkout.

Keep in mind that in Bubble you have a version-test and version-live. So make sure you are using the correct Return/cancel URL in your live app.

To make sure that the payment is completed, we need to do one last thing when the user is redirected to the return URL.

Check that the payment succeeded

To check that the payment succeeded when the user is redirected back to the return URL, you need to implement the following workflow on page-load on the page of your return URL:

Create a workflow on page-load:

Add the following expression as a conditional:

Inside this expression you will have to add your API key (which you can find under 'Integrations' in the dashboard) and the subscription_id that you can retrieve from the return URL when the payment is made:

Finally, complete the expression like you see here:

When this workflow is run, you know that the payment is completed and you can make your database changes etc.!

Step 3/3: Setup endpoints that will be triggered when a subscription gets activated, suspended or cancelled.

It is recommended to setup webhook(s) inside SubSocket for certain subscription related events. This way you can, for example, account for the situation where a user cancels the plan through their PayPal account and not your application.

Setting up endpoints in your Bubble app is rather easy, just make sure you are on a paid Bubble plan as free Bubble plans do not have this ability.

First, enable the API in your Bubble application if you haven't already:

Your root URL will look something like this (notice the 'version-test' part of the URL, remove this part for the live part of your app):

https://www.your-application.com/version-test/api/1.1/wf

Next, you will create a backend workflow. In this example we will call it webhook_demo.

As a result, our Bubble endpoint URL will be:

https://www.your-application.com/version-test/api/1.1/wf/webhook_demo

We now need to initialize this endpoint in SubSocket and after that change the Bubble endpoint URL back to its original format, we have created a video to show you exactly how to do this. If the video is not playing, you can also watch it here.

Video on how to initialize the Bubble endpoint in SubSocket and how to change the Bubble endpoint URL back to its original format (also in SubSocket).

Make sure you have checked the following 2 options for your endpoint:

Your endpoint is now ready to receive requests from SubSocket! 🎉

When you go live:

If you still have 'version-test' in your Bubble endpoint URL, please note that you will need to remove the 'version-test' part from your URL to receive events for your live application (as 'version-test' points to the test version of your app that has a different database).

For this, you can edit the existing endpoint in SubSocket and remove the 'version-test' from the endpoint URL. Or, you can create a new endpoint in SubSocket for the same Bubble endpoint URL but without the 'version-test' part.

If you have any questions you can reach out to use here.

Want to see a live demo? You can visit the demo page here.