- ! THIS IS THE README OF THE MONOREPO ! -Official Voucherify JS SDK and React Widget
Documentation | Marketer-ready Voucherify snippet | Migration | Typescript | Error handling | Legacy SDKs | Contributing | Changelog
Packages: Voucherify JS SDK | Voucherify React Widget
Voucherify empowers marketers and developers with flexible building blocks to come up with, implement, and track targeted promotional campaigns.
Visit Voucherify to learn more.
Find detailed description and example responses at Voucherify developer documentation. Most method headers point to more detailed descriptions of arguments you can use.
You can also use the detailed JS SDK documentation.
📚 Want to learn more? Visit Voucherify official site or Success Portal.
👽 Having troubles? Check out the Help center.
Voucherify JS SDK is a JavaScript SDK and it is fully consistent with the restful API Voucherify provides and it has a fully integrated TypeScript support. It also combines together the previously maintained Voucherify Node.js SDK and Voucherify.js SDK.
Learn more about Voucherify JS SDK installation.
Voucherify React Widget contains several client-side Voucherify methods, which are useful in integrating your promotion logic straight to your e-commerce store.
Learn more about Voucherify React Widget installation.
<body>
<div id="voucher-validate"></div>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@voucherify/[email protected]/dist/voucherify.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.5.1/qs.min.js" crossorigin></script>
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/axios/dist/axios.min.js" crossorigin></script>
<script type="text/javascript" src="https://unpkg.com/@voucherify/[email protected]/dist/voucherifysdk.umd.production.min.js" crossorigin></script>
<script type="text/javascript" src="https://unpkg.com/@voucherify/[email protected]/dist/voucherifywidget.umd.production.min.js" crossorigin></script>
<script type="text/javascript">
window.ReactDOM.render(
window.React.createElement(VoucherifyWidget.VoucherifyValidate, {
clientApplicationId: 'CLIENT-APPLICATION-ID',
clientSecretKey: 'CLIENT-SECRET-KEY',
amount: true,
}),
document.querySelector('#voucher-validate'),
)
</script>
</body>If you're looking for something plain and simple, you're used to working with iframe and jQuery on your website, and for whatever technical reason the React-based snippet doesn't work for you, you may want to stick with the legacy voucherify.js SDK for the time being. In this case, refer to the widget section in the documentation.
Check out the MIGRATION GUIDE to learn more about switching to the newest Voucherify JS SDK.
Both the Voucherify JS SDK and Voucherify React Widget support TypeScript declarations. It's recommended to use TypeScript Version 4.2.
Explore also Voucherify TS examples.
A Voucherify error object always has a consistent structure, described in details in the API reference.
Check out code examples for server-side error handling:
- Error handling for Node.JS example without TypeScript
- Error handling for Node.JS example with TypeScript
Also, see the structure / typing for error returned from Voucherify API:
If you want to receive an original AxiosError when a VoucherifyError is thrown, you need to explicitly set the exposeErrorCause property to true when creating the instance of VouchierfyClient:
const voucherify = VoucherifyServerSide({
applicationId: 'APPLICATION-ID',
secretKey: 'SECRET-KEY',
exposeErrorCause: true
})The original AxiosError will be available under cause property of VoucherifyError.
You can always visit legacy Voucherify JS SDKs:
- Client-side Voucherify JS SDK: voucherify.js.
- Server-side Voucherify JS SDK: voucherify-nodejs-sdk.
Bug reports and pull requests are welcome through GitHub Issues.
Read more about how to Contribute to Voucherify JS SDK by visiting CONTRIBUTING.md.
Voucherify React Widget CHANGELOG.
SDK tests are located in a test folder and use real calls to Voucherify API via client.ts.
// add this to your test
import { voucherifyClient as client } from './client'In order to run SDK tests, you need to copy packages/sdk/.env.example to packages/sdk/.env and fill the file with your credentials.
In order to run SDK tests, go to the packages/sdk folder and run yarn test.