Implementing ATW button
add to wallet atw functionality into your system, you need to embed the provided atw script and configure it using tokenized card data this allows users to securely add digital cards to samsung wallet follow the steps below to implement the atw button script composition begin by composing the integration script using the sample code provided on the samsung wallet partners portal alternatively, refer to the integration sample code for detailed instructions create tokenized card data cdata next, generate the cdata tokenized card data and insert the corresponding cdata token into the script cdata represents the actual content of the wallet card and comes in various formats depending on the card type for more information, refer to the generate_cdata sample code note the cdata token should expire in 30 seconds after creation, so the cdata token needs to be created right after the user actually clicks the 'add to wallet' button to implement the 'add to wallet' button, you may need some base data you can find the base data and other necessary information on partner portal's wallet card page samsung wallet on the web this section explains how to implement the add to wallet button using javascript within a web environment or web view web button reference with importing api javascript if you implement the "add to wallet" button using this script, the button is shown only on the devices that support samsung wallet to automatically parse <samsung wallet> html tags when the page is loaded, include the following standard javascript <script src="https //us-cdn-gpp mcsvc samsung com/lib/wallet-card js" type="text/javascript"></script> you can use these tags or javascript functions for the web button if you are rendering html and you have proper partner permissions you can also use the script by referring to the various attributes samsung wallet html tag the 'samsung wallet' namespace tag defines the placement and various attributes of the "add to wallet" web button for samsung wallet <samsung wallet cardid="card_id" cdata="cdata" partnercode="partner_code" buttonid="button_id" rdclickurl="rd_click_url" rdimpressionurl="rd_impression_url" ></samsung wallet> button attributes attribute description cardid string required wallet card identifier * value granted from the partners portal cdata string required encrypted card object json * this field needs to be encrypted * see security pdata string optional reference id of the wallet card content * use instead of cdata when using data fetch link * value granted from the partners portal partnercode string required partner code * value granted from the partners portal buttonid string required dom element id for the "add to wallet" web button for samsung wallet certificateid string optional certificate identifier based on csr during onboarding * required when using data fetch link with v3 path buttontype string optional "add to wallet" button type ["btnsw" / "btnatsw" / "qrcode", default btnsw] * see image resources inline string optional flag to display the "add to wallet" image button in one-line format default true one-line locale string optional locale of the "add to wallet" image button * see image resources language string optional language of the "add to wallet" image button default navigator language rdclickurl string required url for logging a button click event * value granted from the partners portal rdimpressionurl string required url for logging a button impression event * value granted from the partners portal showforced string optional flag to force the "add to wallet" button to be displayed default false mediatheme string optional load the button's resources from the media theme policy there are 4 themes default, inversion, lightonly, and darkonly default default * default load the button's theme according to the prefers-color-scheme policy * inversion load the inverse of the default button's theme * lightonly load the light theme of the default button * darkonly load the dark theme of the default button style string cssstyledeclaration optional load the button with a custom style target string optional option to choose button's target name * default "wallet" type string optional service type ["atw" / "vww", default "atw"] * "atw" add to wallet * "vww" verifying with wallet model string optional device model name for device compatibility checks * if not provided, the device model is automatically detected onshowbutton function optional callback handler function for the button's on-show event onclickbutton function optional callback handler function for the button's on-click event if you register the handler function, you must return a callback or promise value * see usage of onclickbutton handler authtoken string optional authentication token for creating a shortened url * only applicable when buttontype is "qrcode" qrcodeexpirydate string optional expiry date for qr code generation * only applicable when buttontype is "qrcode" * if empty, defaults to 10 years of validity samsungwallet addbutton function the samsungwallet addbutton function is used to explicitly render the add to wallet button on your web page using the samsung wallet javascript api data transmit link example samsungwallet addbutton samsungwallet addbutton { cardid "card_id", cdata "cdata", partnercode "partner_code", targetid "target_id", buttonid "button_id", rdclickurl "rd_click_url", rdimpressionurl "rd_impression_url", onshowbutton => {}, onclickbutton async options => { options cdata = 'cdata' } } ; data fetch link example samsungwallet addbutton samsungwallet addbutton { cardid "card_id", pdata "pdata", partnercode "partner_code", targetid "target_id", buttonid "button_id", certificateid "certificate_id", rdclickurl "rd_click_url", rdimpressionurl "rd_impression_url", onshowbutton => {}, onclickbutton async options => { options pdata = 'pdata' } } ; button attributes attribute description cardid string required wallet card identifier * value granted from the partners portal cdata string optional encrypted card object json * this field needs to be encrypted * see security * either cdata or pdata must be provided pdata string optional reference id of the wallet card content * use instead of cdata when using data fetch link * either cdata or pdata must be provided partnercode string required partner code * value granted from the partners portal targetid string required dom document object model element id to place the "add to wallet" web button for samsung wallet buttonid string required dom element id for the "add to wallet" web button for samsung wallet certificateid string optional certificate identifier based on csr during onboarding * required when using data fetch link with v3 path buttontype string optional "add to wallet" button type ["btnsw" / "btnatsw" / "qrcode", default btnsw] * see image resources inline string optional flag to display the "add to wallet" image button in one-line format default true one-line locale string optional locale of the "add to wallet" image button * see image resources language string optional language of the "add to wallet" image button default navigator language rdclickurl string required url for logging a button click event * value granted from the partners portal rdimpressionurl string required url for logging a button impression event * value granted from the partners portal showforced string optional flag to force the "add to wallet" button to be displayed default false mediatheme string optional load the button's resources from the media theme policy there are 4 themes default, inversion, lightonly, and darkonly default default * default load the button's theme according to the prefers-color-scheme policy * inversion load the inverse of the default button's theme * lightonly load the light theme of the default button * darkonly load the dark theme of the default button style object cssstyledeclaration optional load the button with a custom style target string optional option to choose button's target name * default "wallet" type string optional service type ["atw" / "vww", default "atw"] * "atw" add to wallet * "vww" verifying with wallet model string optional device model name for device compatibility checks * if not provided, the device model is automatically detected onshowbutton function optional callback handler function for the button's on-show event onclickbutton function optional callback handler function for the button's on-click event if you register the handler function, you must return a callback or promise value * see usage of onclickbutton handler authtoken string optional authentication token for creating a shortened url * only applicable when buttontype is "qrcode" qrcodeexpirydate string optional expiry date for qr code generation * only applicable when buttontype is "qrcode" * if empty, defaults to 10 years of validity samsungwallet updatebutton function the samsungwallet updatebutton function updates an existing "add to wallet" button's options samsungwallet updatebutton "button_id", { cdata "new_cdata", style "width 200px;" } ; samsungwallet removebutton function the samsungwallet removebutton function removes an existing "add to wallet" button from the dom samsungwallet removebutton "button_id" ; usage of onclickbutton handler the onclickbutton callback handler function is invoked when the button is clicked if you register the handler function, you must return a callback or promise value the callback function receives two arguments options — the current button options object you can dynamically update properties such as cdata or pdata before the wallet action is triggered callbackclicked — a function that accepts a boolean flag if called with true, the default click action navigation to the wallet url is triggered if the handler function returns/resolves to true, the default click action is also triggered automatically example samsungwallet addbutton { cardid "card_id", cdata "cdata", partnercode "partner_code", targetid "target_id", buttonid "button_id", onclickbutton async options, callbackclicked => { // dynamically generate cdata after user clicks options cdata = await generatecdata ; // trigger the default wallet navigation callbackclicked true ; // or simply return true; } } ; button type reference buttontype value description btnsw samsung wallet image button default btnatsw add to samsung wallet image button qrcode qr code containing the wallet link service type reference type value description atw add to wallet default vww verifying with wallet media theme reference mediatheme value description default load the button's theme according to the prefers-color-scheme policy inversion load the inverse of the default button's theme lightonly load the light theme of the default button darkonly load the dark theme of the default button samsung wallet via mms or email this section outlines how to configure and deliver samsung wallet cards through mms or email, enabling users to add cards to samsung wallet directly from their messaging platform note these methods do not support dynamically controlling button visibility based on device compatibility link to 'add to wallet' on mms/email you can include an "add to wallet" web button in environments where the javascript api cannot be loaded, such as sms or email mms link url format https //a swallet link/atw/v1/{card_id}#clip?cdata={your_encrypted_data} email link <a href="add_to_wallet_url"> <img src="button_image_url" /> <img src="rd_impression_url" style="width 1px; height 1px;" /> </a> attribute description url string required "add to wallet" link url * see data transmit link * see data fetch link image_url string required button's image resource url * see image resources rd_impression_url string required impressions logging url * value granted from the partners portal