- About Voucherify Example
- How Voucherify works
- Demo
- Quickstart
- How to run Voucherify samples locally
- Get support
This sample shows you how to stack different types of promotions with Voucherify. This is achieved by integrating validate stackable and redeem stackable endpoints. The stacking mechanism allows you to combine up to 5 promo codes or cart-level promotions with a single request.
Validating and accepting promo codes in your checkout from scratch might be tricky — calculating discounted prices, error message handling, and localization are just a few things to think about when building a simple promo code redemption flow.
This is where Voucherify promotion engine kicks in. Together with our Promo UI Kit you can quickly build the best promotion experience for your customers.
This example introduce online coffee shop and many vouchers in your dashboard are about it.
Note: while calling the redeem stackable endpoint is enough to satisfy a basic promo code flow, it's useful to add validate stackable to the flow every time the promo code or cart changes. Validation performs 1-3 points but it doesn't marks the code as used one.
Live demo on:
The demo is running with a Sandbox project. Sandbox comes with several test vouchers you can apply in the checkout, e.g.:
FREE-SHIPPING - You find it in your Vouchers dashboard but if there is not Free Shipping Voucher you have to create code with free shipping on Sandbox.
BLCKFRDY 50%OFF and many other vouchers you find in your Sandbox > Vouchers.
Some codes have a validation rules or different discount effects so do not use them or you will not be charged a discount.
The promo code box accepts Amount and Percentage discount types, more coming soon.
This sample calls three endpoints:
- Validate promotion - check if any promotion tier exist.
- Validate voucher code — checks the code against validation rules and returns calculated discounts.
- Redeem voucher code — runs validation and then marks the voucher as used. After click redemption button you should see message "Voucher redemeed" - that means your redemption process was successfull.
Before you run this example locally let's check how to started with Voucherify API and dashboard by redeeming your first coupon code by going to Quickstart. This informations helps you understand conception about Voucherify product.
This sample is built with Node.js and our JS SDK on the server side and HTML + Vanilla JavaScript on the front (with React version coming soon).
Follow the steps below to run locally.
- Clone repository.
git clone https://github.com/voucherify-samples/stacking-promotions.git
-
Create your Voucherify account (free tier, no credit card required).
-
Go to the Sandbox project’s settings and get your Application ID and Secret Key, see Authentication.
-
Rename .env.example to .env and paste your API keys:
VOUCHERIFY_APP_ID=<replace-with-your-application-id>
VOUCHERIFY_SECRET_KEY=<replace-with-your-secret-key>
- Install dependencies.
npm install / yarn install
- Start the Node server by entering one of the commands in the terminal.
npm run start / npm run dev || yarn start / yarn run dev
- Go to http://localhost:3000 in your browser.
If you found a bug or want to suggest a new sample, please file an issue.
If you have questions, comments, or need help with code, we’re here to help:
For more tutorials and full API reference, visit our Developer Hub.