We developed a widget for the store page to assist undecided shoppers in quickly purchasing a gift card, which can boost store conversion rates. This widget leverages the Bold Commerce service to streamline the gift card purchase process. The widget's design allows for easy integration into any website, eliminating the need for significant alterations to existing store solutions. The generated gift card is managed through Voucherify and is redeemable across all sales channels integrated with Voucherify. We illustrate this with an example store (based on the ComposableUI project), which is also integrated with Voucherify, enabling the utilization of the gift card within this store.

• How it works
  • Remeber
• Requirement configuration
  • Bold Commerce
  • Voucherify
• How to run Gift Card Widget locally
  • Credentials
  • Other .env configuration
  • Important
  • Installation
• Other information
  • Webhooks

Gift card widget is self-hosted solution as an iframe, in that case you have to take care about hosting your own widget.

1. Create account on Bold Commerce Account Center as a custom platform.
2. Configure your store with warehouse, tax zone and zones via Checkout ADMIN API. Postman helps you to achieve desired results or you can do this manually in your Bold Commerce Account.
3. Generate credentials to connect with Bold Commerce Checkout API.
4. Retrieve your shop_identifier from shop info endpoint to enable final connection with checkout API.

1. Login to your account and go to project settings on the top right corner.
2. Get your application keys
3. Create campaign with bulk codes and optionally timeframe settings (if you prefer). Next set value to 0 and save campaign. The name of the campaign set in this project is called Gift Cards From The Widget. If you want to use other name, go to src/voucherify/get-campaign.ts and change for the name of campaign created in your Voucherify dashboard.

Go to .env.example to change file name to .env.local and paste your credentials.

BOLD_COMMERCE_ACCESS_TOKEN=xxx123
BOLD_COMMERCE_SHARED_SECRET=123xxx
NEXT_PUBLIC_BOLD_COMMERCE_SHOP_IDENTIFIER=xxx

VOUCHERIFY_API_URL=https://api.voucherify.io
VOUCHERIFY_APPLICATION_ID=xxx123
VOUCHERIFY_SECRET_KEY=123xxx

Set your domain url as:

NEXTAUTH_URL=https://your-widget-url.com/

Remember to include / at the end of url. This is crucial to automatically set your domain as allowed in Bold Commerce CORS allowlist.

From the main folder of project use npm install.

Next if you want to work with widget in:

• development mode, use npm run dev.
• production mode, use npm run build && npm run start

Bold Commerce require to connect with checkout API by trust https domains. In this case use Ngrok or other solution to generate domain with SSL certificate.

Currently we don't handle webhooks even though there are implemented endpoints in the project.