How to add Payment Gateways to your Outgrow Content using Custom Widgets

Using a Custom Widget, you can now integrate Paypal and PayU payment gateway on a Custom HTML page in Outgrow. This document will help you understand how this can be done in Outgrow.

How to add a Custom HTML page and then a Widget on the page

1. Login to your Outgrow account and open the respective content in Build mode.

2. Click on Add New and then click on Widgets. Navigate to the Payment Widget option.


3. You can choose between adding PayU Payment Gateway, Paypal Payment Gateway, Chargebee Payment Gateway or Strip Payment Gateway button on your Custom HTML page.


3.1.1. Paypal Payment Gateway: You can add a button for processing payment using Paypal by authenticating the integration using a Client ID and Secret Key. You can configure the currency denomination and amount as well. Also, you can configure if you want to use Live or Test mode. For the Paypal button, you can go to the Advanced tab and configure Smart Button Style as well.

3.1.2. PayU Payment Gateway For adding the PayU Payment Gateway button on the Custom HTML page, you need to authenticate the integration using Merchant POS ID, Secondary Key, oAuth Client ID, oAuth Client Secret. You can choose whether to use the integration in Test or Live mode.


3.1.3. Chargebee Payment Gateway: For adding the Chargebee Payment Gateway button on the Custom HTML page, you need to authenticate the integration using Header Script & Chargebee Button Code.

3.1.4. Stripe Payment Gateway: For adding the Stripe Payment Gateway button on the Custom HTML page, you need to authenticate the integration using Stripe Publishable Key & Secret Key.

3.2.Under the Advanced tab, you can configure whether you want to redirect the user once the user clicks on the button.


4. Make sure you click on the Publish button to save the changes.



For processing payments, the availability of Payment Gateways for selection is a layout-based restriction. Real-time templates do not support Chargebee or PayPal, whereas non-Real-time layouts support integration with all 4 Payment Gateways.

Some Common Use-cases

1. If you are creating an interactive content piece asking for donations on behalf of your organization, you can add a Payment Button at the end by using the Custom HTML feature. This will make the payment process convenient as the user will be able to navigate to the payment page by simply clicking on a button.

2. You can add a Payment Button to your e-commerce recommendation quiz like an Add to Cart button or a Buy Now button. This will help increase your sales as the process will become more accessible and less time-consuming for the users.

3. If you are creating a quiz, assessment, or any other type of content to market the courses your institution offers, you can add some details about your course and attach a payment button at the end so that the users can easily buy it.

Feel free to reach out to us at [email protected] in case you have any questions, and we will be happy to assist you further.