Customizing Thank You Page

From the previous tutorials, we learned that SKM Payment Forms support a default payment page. However, what if you would like to redirect your customers to your own page to perform some additional business logic? In that case, we would have to do some additional work, in order to ensure that a) it’s a real transaction and b) it’s not a duplicate transaction.

Recap – The Default Workflow

Let’s start by looking at the workflow (when the default page was used):

payforms

To sum up, the user fills in their details, and once the transaction is successful, SKM calls the defined requests (webhooks) in the Web API or a third party (other services), and, displays a thank you page (with a new license key, for instance). Finally, the user enters the key into the application, and it is successfully activated.

Customized Page Workflow

In order to get your own thank you page, there are a very few changes that have to be made:

customthankyou

The changes are:

  • Instead of showing the default page, the user will be sent to your own thank you page. The request will include additional variables (sent as a HTTP GET, i.e. yourwebsite.com?name=value).
  • You would have to confirm these values with the Web API (Check Payment method, in this case).
  • You would have to save the transaction id and the orderId, in order to avoid processing the same payment twice. Eg. imagine if the user would refresh the page; in this case, you don’t want to generate a new key, but instead display an existing license key, etc.

Requirements in Your Application

In order to make sure that the process is safe, here are some important guidelines:

  • (simple static page) If you simply want to redirect your user to your page once the transaction is finished, and, assuming that you’ve used the Data Requests (webhooks) to generate new licenses keys (or anything else that may only be called once for each successful order), you don’t need to do anything special on the server side. In this case, you will be fine with a simple static web page (please see the tips under Tips and Sample Code).
  • (dynamic page + database) If, however, you want to perform all the business logic on your server, you would have to do the following:
    • Use Check Payment method to ensure that the order is successful and comes directly from SKM.
    • Keep track of each transactionId and orderId, in order to ensure that the same operation is not performed twice (eg. one key generation per successful transaction)

Tips and Sample Code

Once a transaction is complete, you will receive the following values:

  • id – the payment form id. This is good when you want to determine what the user has purchased, i.e. payment form with id=1 might be the Standard subscription, whereas payment form with id=3 is the Professional subscription, etc.
  • res – this is the data collected from the data requests (webhooks), which is a JSON formatted list of dictionaries (key-value). For instance, it can contain the new license key, it’s creation date, etc. A good thing about the Web API is that all results are in JSON by default.
  • reference – aka transactionId, is a string that identifies each transaction in either Stripe or PayPal. This can be used when you want to find a particular transaction in your control panel in Stripe or PayPal.
  • orderId – this is an integer that is unique to all transactions. You can use it to find a particular transaction in SKM’s control panel.

Let’s recall the way a custom message could be shown based on the data from the requests (webhooks). It was described in here.

The message above is the custom message, where the  [key] will be replaced by a value in res. Especially when using a static web page, it turns out that your own Thank You page can be easily customized with some basic Java Script. Here’s some methods will be useful. All comments and documentation of how they can be used is hosted on GitHub.

So, the only thing you have to do is to pass the message template and the content of res, and it all will work!

About The Author

Most Helpful User

Rate This Article

(65 out of 93 people found this article helpful)

Leave A Comment?