This article explains how to set up self redemption pages via the PassKit API. Self redemption pages allow for your coupons to be redeemed without being scanned, simply by having your customer tapping a link on the back of the pass.
Why self redemption page?
Self redemption page can redeem a coupon when a coupon holder clicks the redemption link or enters a validation code on the redemption page. If you do not have POS integration or want to set up and run campaign quickly for POC, self redemption gets handy.
3 Types of PassKit Redemption Page
① Simple Redemption
1. A customer clicks a redemption link
2. The coupon gets redeemed
3. A customer sees a success message
② Code Shown To Cashier
1. A customer clicks a redemption link
2. A customer confirms redemption
3. The coupon gets redeemed
4. A customer sees a fixed code on the redemption page
5. A customer shows the fixed code to cashier
③ Code Provided By Cashier:
1. A customer clicks a redemption link
2. A customer sees the redemption page with a form
3. A customer enters a code provided by cashier
4. The coupon gets redeemed
5. A customer sees success message
In order to configure the redemption page, you will need to update Offer Settings by PUT updateCouponOffer. Let's go through each of them.
How to setup Simple Redemption?
Simple redemption is the easiest and quickest way for your customer to redeem your coupons. We will go through how to set up redemption link shortly. Let's have a look how to set up simple redemption. This is the success page shown when customer clicks the redemption link and configuration payload.
To set Simple Redemption, set redemptionType to REDEMPTION_TYPE_CUSTOMER_INITIATED. If customer visits the same page again, the page shows the error page like below.
How to setup Code Shown To Cashier?
Configurable components include redeem confirmation page, success/error/cancel messages, and redemption page.
To turn on Fixed Code Redemption, set redemptionType to REDEMPTION_TYPE_CUSTOMER_INITIATED_CODE_FIXED. If customer clicks Cancel then the page will show your cancelRedeemText like below.
If customer clicks OK in the confirmation popup, then the page will show coupon will be redeemed and the redemption page will show the fixed code and redemption instructions as below.
There is redemption countdown timer which you can configure as optional. When the timer reaches to zero, the offerExpiredText will be shown.
How to setup Code Provided By Cashier?
redemptionType needs to be set as REDEMPTION_TYPE_CUSTOMER_INITIATED_CODE_PROVIDED_ON_REDEEM and the form components need to be configured.
The customer can redeem coupon only when they submit the right redemption code. If submitted code is not right, error message will be shown.
If customer submits the correct code, the success page will be shown. Valid codes needs to be configured beforehand. You can set multiple codes to validCodes like above example "000" and "123".
How to show a redemption link on a coupon?
The redemption link of coupon is https://pub1.pskt.io/or/${pid}. To show it on the back of the pass, let's update template by calling PUT /template.
To set redemption link on Apple Pay, add following field under data.dataFields.
{
"uniqueName": "custom.redemptionLink",
"fieldType": "CUSTOM_FIELDS",
"label": "Redemption Link",
"dataType": "TEXT_LONG",
"defaultValue": "<a href='https://pub1.pskt.io/or/${pid}'>Click Here To Redeem</a>",
"appleWalletFieldRenderOptions": {
"textAlignment": "TEXT_ALIGNMENT_DO_NOT_USE",
"positionSettings": {
"section": "BACK_FIELDS",
"priority": 2
}
},
"usage": [
"USAGE_APPLE_WALLET"
]
}
To set redemption link on Google Pay, add following link object to links field.
{
"id": "",
"url": "https://pub1.pskt.io/or/${pid}",
"title": "Click Here To Redeem",
"type": "URI_WEB",
"localizedLink": {
"translations": {}
},
"localizedTitle": {
"translations": {}
},
"usage": [
"USAGE_GOOGLE_PAY"
],
"position": 0
}
How to customise images on the redemption page?
Default images are coming from PassTemplate.ImageIds. Image used are Logo and Banner Images. You can customise images by changing PassTemplate images or set images or imageIds under couponOffer.redemptionSettings.standardSettings.