How to configure discount coupons for one-off payments and subscriptions with Stripe

Need to set up discounts for one-off or subscription payments in Stripe? Now you can easily integrate them in your forms with Arengu.

‍
In this tutorial, you will learn how to configure coupons with Stripe with both one-off payments and subscriptions.

Discounts for one-off payments

Thanks to the Arengu editor, you can easily apply discount coupons to Stripe payments by creating a single flow and connecting it to the form.

1.  Create the payment form

Go to the form editor in Arengu to build the form. To manage the discount payment you just need one step in the form, which you can replicate or integrate in the forms of other use cases.

In this step, we will include an Email field to ask for the user’s email, with these settings:

• ID: change it to ‘email’ in order to simplify it.
• Required: enable this checkbox to make it mandatory.
  

Next, add a Text field to ask for the coupon code and configure it as follows:

• ID: change it to “coupon” to make it easier to reference.
• Min. length & Max. length: use these fields to personalize both the minimum and maximum length of the discount code.
  

Include also the Payment field with the following settings:

• Publishable key: copy it from your Stripe account and paste it in this field.
• Secret key: copy it from your Stripe account too and paste it in this field.
• Payment type: choose ‘Charge’.
• Amount: reference the {{state.amount}} variable. Although it will not be available until we create and execute the flow once, we will already include the reference here.
• Customer action: choose ‘Create customer’.
• Customer email: reference the {{fields.email}} variable to link the payment to the user’s email.
  

Go to the Flows tab in the light menu on the left, create a flow linked to this step of the form by clicking on the plus button, and publish the changes.

2.  Build the discount flow

Open the flow in a new tab and build the structure you see in the image below by choosing the actions from the menu on the right. This flow will check if there is a coupon code and if it is correct, and apply the amount to be charged in each case.

Fist, add an If/then condition action to check if the user has input a coupon code. Configure this action as follows:

• Condition: reference the {{input.body.coupon}} variable from the form and select ‘exists’ as condition.
  

In the False branch, include a Go to the next form step action, which does not need to be configured. In this case, if the user has not included a coupon code, the form will be executed, charging the amount without discount. You can replace this action with a Submit the form action, if this is the last step of your form.

In the True branch, include an Input value mapping action and set it up as follows:

• Input value: reference the {{input.body.coupon}} variable from the form.
• Mapping table: write the proper coupon code in the first input and the amount to charge in the second one, as you can see in the picture. You can add as many discount codes and amounts as you need.
• Default output value: include the ‘code_not_exists’ string. We will use this error code to indicate to the user in the form that the discount code they have input is not correct.
  

Then include another If/then condition action and configure it with the following settings:

• Condition: reference the {{inputValueMapping.result}} variables from the outputs of the previous action after an execution of the flow, select ‘is different to’ as condition and paste the error code ‘code_not_exists’ in the last input.
  

In the False branch, add a Show error message action to display in the form a custom message  informing the user that the discount code is not valid.

In the True branch, add a Store state variable action to save the amount to be charged (with the discount applied) and send it to the payment field of the form. To configure this action:

• Data fields: set ‘amount’ as the ID of the new variable in the first input and reference the {{inputValueMapping.result}} variable from the outputs of the ‘Input value mapping’ action in the second one.
  

Note hat this is the {{state.amount}} variable that we have referenced in the payment field of the form. Remember that if you change the ID of this variable, you must update the reference in the payment field settings.

Finally, close the branch with a Go to the next step of the form action and publish the changes. As we have mentioned before, you can replace this action with a Submit the form action, if this is the last step of your form.

Discounts for subscription payments

Now let's see how to set up a discount coupon and the payment for a subscription plan. In this case, you don’t need to create any flows, since Stripe automatically manages the logic.

1.  Create the coupon in Stripe

Stripe allows you to create discount coupons to redeem when subscribing to your services and you can easily configure them following the steps below.

First, go to your Stripe account > Products > Coupons and create a new one. Define the amount or percentage, the duration, and customize the coupon code ID to make it more friendly, because this is the code that the user has to input in the form to redeem it.

2. Build the form in Arengu

Go to the form editor and create a form with two steps.

In form step one, include a Cards or Choice field to allow the user to choose a subscription plan. In this case, we have chosen the cards.

To configure the Cards field:

• ID: change it to ‘cards’ to simplify it.
• Required: enable this option to make it mandatory too.
• Options: add as many options as prices your subscription plan has. Give each of them a name and click on each card to add an image by pasting its URL.
• Internal values: click on this option to open a window that will allow you to associate each card with a price. Simply copy the ID of each price in Stripe and paste it into the corresponding input.
  

In form step two, add a Text field before the payment one to allow users to input the coupon code and configure it as follows:

• ID: change it to “coupon” to make it easier to reference.
• Min. length: we will use the default value of 5 characters, but you can personalize both the minimum and maximum length of the code here.
  

Then, include the Payment field with the following settings:

• Publishable key: copy it from your Stripe account and paste it in this field.
• Secret key: copy it from your Stripe account too and paste it in this field.
• Payment type: choose ‘Subscription’.
• Action: choose ‘Create subscription’.
• Price ID: reference the {{fields.cards}} variable from the previous step.
• Coupon code: reference the {{fields.coupon}} variable. It will send the input code to Stripe and automatically update the amount to charge.
• Customer action: choose ‘Create customer’.
• Customer email: reference the {{fields.email}} variable. You can get it from the variable selector by clicking the plus button.
  

Note that the field in which the user chooses the subscription plan (the Choice or Cards fields) and the payment field must be in different steps of the form.

Finally, publish the form and test it. You don’t need to create any flow to manage the payment and the discount, since Stripe automatically manages all this logic in subscription plans. 

Check the debugger mode

Once you have tested the form in the editor preview mode, click on the Executions tab of the flow to check that everything has worked correctly.

In it you will be able to check, action by action, if everything is working properly.