Add Boarding Passes, Tickets, and Coupons
Objective
Learn how to integrate the Add to Wallet functionality with partner services, enabling users to add boarding passes, tickets, and coupons to Samsung Wallet.
Partnership Request
To create, manage, and monitor performance of wallet cards with the Samsung Wallet Partners Portal, you must become an official Samsung partner. Once done, you can fully utilize this Code Lab. You can learn more by visiting Samsung Wallet Partner Onboarding process, here in Samsung Developers.
Overview
Samsung Wallet is the secure, go-everywhere app for your essentials — credit cards, boarding passes, tickets, coupons, and more. All in one spot, all accessible with one swipe.
Users can conveniently access the Samsung Wallet by swiping it up from the bottom of the screen.
Various wallet cards of partners can be added to the Samsung Wallet, allowing users to quickly and easily access partners' contents, such as:
-
Boarding passes: Registered boarding passes can remind the user of boarding time and help during check-in. Depending on the integration level, it can provide status information updates related to flights, such as boarding gate changes or cancellations.
-
Tickets: Registered tickets can provide additional information about the event and an alarm before expiration. Ticket cards support event commodities for Performances, Sports, Movies, and Entrance.
-
Coupons: Registered coupons for various channels can provide alarms before expiration and update usage status.
If you need assistance, please contact us at developer.samsung.com/dashboard/support.
The image below shows the process of managing wallet cards:
For detailed description, see Manage Wallet Cards.
Set up your environment
You will need the following:
- Samsung Wallet from Galaxy Store
- Samsung Galaxy device that supports Samsung Wallet
- Samsung Wallet Partners Portal account
- Internet browser, such as Chrome
- IntelliJ IDEA Community Edition
- Samsung Public Key, Partner Public Key, and Private Key (see Encryption Setting)
Start your project
Open your internet browser and go to the following sample partner sites:
-
Boarding pass - https://codesandbox.io/s/sdc-boarding-pass-template-3c4o0c
-
Ticket - https://codesandbox.io/s/sdc-ticket-template-8lgph7
-
Coupon - https://codesandbox.io/s/sdc-coupon-template-rrw0bt
Click Fork on each project to copy and modify the code.
Once done, three projects are automatically copied to your CodeSandbox account. Modify the index.html
later for the Add To Wallet integration.
Create wallet cards
Now, go to Samsung Wallet Partners Portal and sign in using your Samsung partner account.
On the left sidebar menu, click Wallet Cards > Create Wallet Card and enter wallet card details for the boarding pass as below:
In Wallet Card Template, choose [Wallet] Boardingpass as card type and Boarding Pass > Airline as a subcategory.
Select Samsung Wallet Boarding Pass > Airline as the card template. Then, click Done.
You can choose from various types of wallet card templates optimized for partners such as boarding pass, ticket, and coupon.
Once all the details are entered and the correct template is selected, click Save to set the wallet card status to Draft.
Launch wallet cards
You can launch and request activation of the cards by clicking the Launch button.
Upon agreeing to proceed, the Launch button text changes to Launched and the card status becomes Verifying.
Apply the Add to Wallet script
The Samsung Wallet Partners Portal includes generated Add to Wallet scripts for every wallet card created. These scripts can be copied and inserted into partner apps (Web and Android) or via Email/MMS.
Go to [Add to Wallet Script Guide] of the card(s) you created. Click Show to see the scripts for Web Integration and copy the script under Web Button (JS) code sample.
Below are generated Add to Wallet scripts of wallet cards created for this Code Lab:
- Boarding pass:
<script src="https://us-cdn-gpp.stg.mcsvc.samsung.com/lib/wallet-card.js" type="text/javascript"></script> <div id="TARGET_ID"></div> <script> samsungWallet.addButton({ partnerCode: "4030093436155138240", cardId: "3fre4kmmboq00", cdata: "${CARD DATA as JWT}", RDClickUrl: "https://us-rd.mcsvc.samsung.com/statistics/click/addtowlt?ep=C50C3754FEB24833B30C10B275BB6AB8;cc=GC;ii=1287098641030840334;co=4030093436155138240;cp=1288017491089625089;si=24;pg=101212967375212546;pi=Aqz68EBXSx6Mv9jsaZxzaA;tp=4030093501522138240;li=0", RDImpressionUrl: "https://us-rd.mcsvc.samsung.com/statistics/impression/addtowlt?ep=C50C3754FEB24833B30C10B275BB6AB8;cc=GC;ii=1287098641030840334;co=4030093436155138240;cp=1288017491089625089;si=24;pg=101212967375212546;pi=Aqz68EBXSx6Mv9jsaZxzaA;tp=4030093501522138240;li=0", targetId: "TARGET_ID", buttonId: "BUTTON_ID", }); </script>
- Ticket:
<script src="https://us-cdn-gpp.stg.mcsvc.samsung.com/lib/wallet-card.js" type="text/javascript"></script> <div id="TARGET_ID"></div> <script> samsungWallet.addButton({ partnerCode: "4030093436155138240", cardId: "3fre4mp5mui00", cdata: "${CARD DATA as JWT}", RDClickUrl: "https://us-rd.mcsvc.samsung.com/statistics/click/addtowlt?ep=C50C3754FEB24833B30C10B275BB6AB8;cc=GC;ii=1287098641034510350;co=4030093436155138240;cp=1288017491089625089;si=24;pg=101212967375212546;pi=Aqz68EBXSx6Mv9jsaZxzaA;tp=4030093588496138240;li=0", RDImpressionUrl: "https://us-rd.mcsvc.samsung.com/statistics/impression/addtowlt?ep=C50C3754FEB24833B30C10B275BB6AB8;cc=GC;ii=1287098641034510350;co=4030093436155138240;cp=1288017491089625089;si=24;pg=101212967375212546;pi=Aqz68EBXSx6Mv9jsaZxzaA;tp=4030093588496138240;li=0", targetId: "TARGET_ID", buttonId: "BUTTON_ID", }); </script>
- Coupon:
<script src="https://us-cdn-gpp.stg.mcsvc.samsung.com/lib/wallet-card.js" type="text/javascript"></script> <div id="TARGET_ID"></div> <script> samsungWallet.addButton({ partnerCode: "4030093436155138240", cardId: "3fre4p0otdv00", cdata: "${CARD DATA as JWT}", RDClickUrl: "https://us-rd.mcsvc.samsung.com/statistics/click/addtowlt?ep=C50C3754FEB24833B30C10B275BB6AB8;cc=GC;ii=1287098641019830286;co=4030093436155138240;cp=1288017491089625089;si=24;pg=101212967375212546;pi=Aqz68EBXSx6Mv9jsaZxzaA;tp=4030093644822138240;li=0", RDImpressionUrl: "https://us-rd.mcsvc.samsung.com/statistics/impression/addtowlt?ep=C50C3754FEB24833B30C10B275BB6AB8;cc=GC;ii=1287098641019830286;co=4030093436155138240;cp=1288017491089625089;si=24;pg=101212967375212546;pi=Aqz68EBXSx6Mv9jsaZxzaA;tp=4030093644822138240;li=0", targetId: "TARGET_ID", buttonId: "BUTTON_ID", }); </script>
Paste the copied Add to Wallet script into the index.html
file of the sample partner site. Then, add the attributes below, to the samsungWallet.addButton
function.
target: "wallet",
showForced: true
target
sets the button’s name to Samsung Wallet ("wallet"
) or Samsung Pay ("pay"
). By default, the value is"wallet"
.showForced
is a flag to show or hide the button. By default, the button is hidden. Otherwise, set the flag value totrue
.
head
tag and adding the rest of the script to the body
tag is recommended. Yet, it works if you paste it as is.Generate and input the CData
The Add To Wallet script does not automatically include the CData (encrypted card data) as it requires encryption for security purposes. CData is the actual content data of wallet card and it has several formats based on card type.
You can use the sample CData Generator created to serve the purpose of this Code Lab only. Download the CData Generation Sample Code.
Locate and open the downloaded file in IntelliJ IDEA. In the project folder, go to src > main > java > JwtGenerator.java. Input your Partner ID as PARTNER_CODE
string value.
public class JwtGenerator {
private static final String PARTNER_CODE = "INSERT_YOUR_PARTNER_ID"; //same with partnerCode of Add to Wallet script
Next, go to resources > sample > certificate and replace the PEM files with Samsung Public Key, your Public Key, and Private Key (see Encryption Setting).
Build the project. Right-click on JwtGenerator
class and click Run 'JwtGenerator.main()' to create the CData. Different CData must be created for each of the sample partner sites of this Code Lab.
Lastly, go back to the index.html
of the partner site and paste the generated CData to the cdata
attribute value of the addButton
sub-item.
Test the Add to Wallet button
You can test the Add to Wallet button functionality integrated to the sample partner sites, directly on a mobile device with the Samsung Wallet app. Access the URL provided by CodeSandbox on Samsung Internet or any browser. Click the Samsung Wallet button in each app to add the boarding pass, ticket, and coupon cards to the Samsung Wallet.
You're done!
Congratulations! You have successfully achieved the goal of this Code Lab topic.
Now, you can integrate the Add to Wallet with your website by yourself! If you're having trouble, you may check the complete code below:
-
Boarding pass - https://codesandbox.io/s/sdc-boarding-pass-complete-67kvwh
-
Ticket - https://codesandbox.io/s/sdc-ticket-complete-pb720c
-
Coupon - https://codesandbox.io/s/sdc-coupon-complete-3n0ugf
To learn more about Samsung Wallet, visit:
developer.samsung.com/wallet