{"id":58843,"date":"2023-10-06T12:13:52","date_gmt":"2023-10-06T06:43:52","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=58843"},"modified":"2024-01-02T17:37:01","modified_gmt":"2024-01-02T12:07:01","slug":"streamlining-roku-pay-integration-with-channelstorehelper","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/streamlining-roku-pay-integration-with-channelstorehelper\/","title":{"rendered":"Streamlining Roku Pay Integration with ChannelStoreHelper"},"content":{"rendered":"

Introduction<\/b><\/h2>\n

Roku Pay integration can be a daunting task for developers, but fear not! `ChannelStoreHelper` is here for the rescue. Included in the Roku starter kit, this script file is your ticket to hassle-free implementation of Roku Pay on the front-end of your Roku application. With a single function call, you can kickstart Roku Pay, provided you’ve already set up your channel on the Roku developer dashboard. Read on to get a simple and minimalistic Roku channel setup with Roku pay flow.<\/span><\/p>\n

Dashboard Setup<\/b><\/h2>\n

Before diving into Roku Pay implementation, there are a few crucial steps to complete on the Roku developer dashboard:<\/span><\/p>\n

    \n
  1. Register\/Login<\/b>: Access the [developer dashboard](https:\/\/developer.roku.com\/dev\/dashboard) and create an account.<\/span><\/li>\n
  2. Add a Channel<\/b>: Navigate to “My Channels” and click “Add Channel” [here](https:\/\/developer.roku.com\/developer-channels\/channels).<\/span><\/li>\n
  3. Add Products<\/b>: After adding your channel, visit “Products” [here](https:\/\/developer.roku.com\/channel-products?tab=TAB_SINGLE_PRODUCT) to add the products you intend to offer.<\/span><\/span><\/li>\n<\/ol>\n

    Once you’ve successfully added your products, your dashboard setup is complete. <\/span><\/p>\n

    Note: Any monetization activities on the developer dashboard require your account to be enrolled in the Roku Partner Payouts Programme<\/em>.\u00a0<\/span><\/p>\n

    Front-end Setup<\/b><\/h2>\n

    With the dashboard set up and products added, your Roku device must be logged in with the same root account used for the dashboard setup. Roku enforces this limitation for the initial implementation and testing of Roku Pay functionality.<\/span><\/p>\n

    To import the `ChannelStoreHelper` file into your project, follow these steps:<\/span><\/p>\n

      \n
    1. Add the File<\/b>: Drag and drop `ChannelStoreHelper.brs` or `ChannelStoreHelper.bs` into your project.<\/span><\/li>\n
    2. Include\/Import<\/b>: Include or import the file in your `MainScene.xml` or `MainScene.bs` as follows:<\/span><\/li>\n<\/ol>\n
        \n
      • \u00a0 \u00a0For BrightScript (brs): <\/span><\/li>\n<\/ul>\n
        `<script type=\"text\/brightscript\" uri=\"pkg:\/components\/MainScene\/ChannelStoreHelper\/ChannelStoreHelper.brs\" \/>`<\/span><\/pre>\n
          \n
        • \u00a0 \u00a0For BrightScript (bs): <\/span><\/li>\n<\/ul>\n
          `import \"pkg:\/components\/MainScene\/ChannelStoreHelper\/ChannelStoreHelper.bs\"`<\/span><\/pre>\n
            \n
          1. Global Field<\/b>: Add a global field for the channel store in your `main.brs`:<\/span><\/li>\n<\/ol>\n
            \n
            \u00a0\u00a0\u00a0m.global.AddField(\"channelStore\", \"node\", false)<\/span><\/pre>\n<\/blockquote>\n
              \n
            1. Initialize<\/b>: Initialize and assign a value to the global node in `MainScene.brs` or `MainScene.bs`:<\/span><\/li>\n<\/ol>\n
              \n
              \u00a0\u00a0\u00a0m.global.channelStore = CreateObject(\"roSGNode\", \"ChannelStore\")<\/span><\/pre>\n<\/blockquote>\n
              With these steps, the `ChannelStoreHelper` is now successfully integrated into your project, ready to process the inputs needed for Roku Pay functionality.\u00a0<\/span><\/p>\n
              Roku Pay Overview<\/b><\/h2>\n
              \"Roku
              Roku Pay Flow Diagram<\/p><\/div>\n
              Roku Pay’s payment flow is based on the `ChannelStore` node, an essential component of Roku’s SceneGraph framework. This framework underpins modern Roku applications and offers simple call-and-observe functionality for executing actions like purchase orders. Key commands included in the `ChannelStore` node are:<\/span><\/p>\n
              Purchasing<\/b><\/h3>\n
              \"\"<\/p>\n
                \n
              • `getCatalog`<\/strong>: Retrieves subscription and one-time purchase products’ metadata.<\/span><\/li>\n
              • `getUserData<\/strong>`: Fetches customer’s Roku account information.<\/span><\/li>\n
              • `doOrder`<\/strong>: Completes transactions for customer purchases.<\/span><\/li>\n<\/ul>\n
                Entitlements and Authentication<\/b><\/h3>\n
                \"\"<\/p>\n
                  \n
                • `getPurchases`<\/strong>: Gets all active subscriptions for the customer.<\/span><\/li>\n
                • `getAllPurchases`<\/strong>: Similar to `getPurchases,` but includes expired and canceled subscriptions.<\/span><\/li>\n
                • `storeChannelCredData`<\/strong>: Stores the publisher’s access token for in-channel products in the Roku cloud.<\/span><\/li>\n
                • `getChannelCred`<\/strong>: Retrieves the publisher’s access token for in-channel products from the Roku cloud.<\/span><\/li>\n<\/ul>\n
                  Functional Specification<\/b><\/h2>\n
                  Now, let’s delve into the functions implemented in the `ChannelStoreHelper` file:<\/span><\/p>\n
                    \n
                  • `sub CheckSubscriptionAndStartPlayback()`<\/strong>: Initiates the Roku Pay flow, ideal for checking subscriptions before allowing content playback.<\/span><\/li>\n
                  • `function initiateRFIConsentForUserdata()`<\/strong>: Starts the RFI content screen, requesting the user’s permission to use their Roku-associated email address.<\/span><\/li>\n
                  • `function onGetUserData()`<\/strong>: Observer function for `getUserData`, receiving the user’s email address and calling `RunSubscriptionFlow()` on successful output.<\/span><\/li>\n
                  • `sub RunSubscriptionFlow()`<\/strong>: Displays a progress dialog while executing the `getPurchases` command.<\/span><\/li>\n
                  • `sub OnGetPurchases(event as object)`<\/strong>: Observes the output of `getPurchases`, checking and validating active subscriptions. This function provides a resume point for the application flow.<\/span><\/li>\n
                  • `sub OnGetCatalog(event as object)`<\/strong>: Observes the output of `getCatalog`, displaying product options set up in the dashboard.<\/span><\/li>\n
                  • `sub DoSubscriptionOrder(event as object)`<\/strong>: Initiates purchase of selected products.<\/span><\/li>\n
                  • `sub OnOrderStatus(event as object)`<\/strong>: Observer function for purchase output, marking the endpoint of the Roku Pay flow.<\/span><\/li>\n<\/ul>\n
                    Code Snippets<\/b><\/h3>\n
                    Here are snippets from the main.brs and MainScene.xml files:<\/span><\/p>\n
                    main.brs<\/b>:
                    \n<\/span>brightscript<\/span><\/em><\/h3>\n
                    \n
                    sub<\/span> showChannelSGScreen()<\/span>\r\nscreen <\/span>=<\/span> CreateObject<\/span>(<\/span>\"<\/span>roSGScreen<\/span>\"<\/span>)<\/span>\r\nm.port <\/span>=<\/span> CreateObject<\/span>(<\/span>\"<\/span>roMessagePort<\/span>\"<\/span>)<\/span>\r\nscreen.setMessagePort(m.port)<\/span>\r\nscene <\/span>=<\/span> screen.CreateScene(<\/span>\"MainScene\"<\/span>)<\/span>\r\nm.global <\/span>=<\/span> screen.getGlobalNode()<\/span>\r\n\r\nm.global.id <\/span>=<\/span> \"GlobalNode\"<\/span>\r\nm.global.addFields({ adID : <\/span>\"\"<\/span> })<\/span>\r\nm.global.addFields({ deviceName : <\/span>\"\"<\/span> })<\/span>\r\nm.global.addFields({ uid : <\/span>\"\"<\/span> })<\/span>\r\nm.global.addFields({ locale : <\/span>\"\"<\/span> })<\/span>\r\nm.global.addFields({ networkType : <\/span>\"\"<\/span> })<\/span>\r\nm.global.addFields({ memoryLevel : <\/span>\"\"<\/span> })<\/span>\r\nm.global.addFields({ deviceID : <\/span>\"\"<\/span> })<\/span>\r\nm.global.addFields({ osVersion : <\/span>\"\"<\/span> })<\/span>\r\nm.global.addFields({ appVersion : <\/span>\"\"<\/span> })<\/span>\r\nm.global.addFields({ buildNo : <\/span>\"\"<\/span> })<\/span>\r\nm.global.addFields({ uidValue : <\/span>\"\"<\/span> })<\/span>\r\nm.global.addFields({ modelName : <\/span>\"\"<\/span> })<\/span>\r\nm.global.addFields({ isPaidUser : <\/span>false<\/span> })<\/span>\r\nm.global.addField(<\/span>\"channelStore\"<\/span>, <\/span>\"node\"<\/span>, <\/span>false<\/span>) <\/span>\u2018 add <\/span>channelstore<\/b> node<\/span>\r\nscreen.<\/span>show<\/span>()<\/span>\r\n\r\nwhile<\/span>(<\/span>true<\/span>)<\/span>\r\nmsg <\/span>=<\/span> wait<\/span>(<\/span>0<\/span>, m.port)<\/span>\r\nmsgType <\/span>=<\/span> type<\/span>(msg)<\/span>\r\nif<\/span> msgType <\/span>=<\/span> \"<\/span>roSGScreenEvent<\/span>\"<\/span>\r\nif<\/span> msg.isScreenClosed() <\/span>then<\/span> return<\/span>\r\nend if<\/span>\r\nend while<\/span>\r\nend sub<\/span><\/pre>\n<\/blockquote>\n
                    MainScene.xml<\/b>:<\/span><\/h3>\n
                    xml<\/span><\/i><\/h3>\n
                    \n
                    <!-- importing main handler --><\/span><\/i>\r\n<<\/span>script<\/span> type<\/span>=<\/span>\"<\/span>text\/brightscript<\/span>\"<\/span>\r\nuri<\/span>=<\/span>\"<\/span>pkg:\/components\/MainScene\/MainScene.brs<\/span>\"<\/span> \/><\/span>\r\n<<\/span>script<\/span> type<\/span>=<\/span>\"<\/span>text\/brightscript<\/span>\"<\/span>\r\nuri<\/span>=<\/span>\"<\/span>pkg:\/components\/MainScene\/MainSceneExtension.brs<\/span>\"<\/span> \/><\/span>\r\n<!-- importing <\/span>ChannelStoreHelper<\/b> file -\u2014><\/span>\r\n<<\/span>script<\/span> type<\/span>=<\/span>\"<\/span>text\/brightscript<\/span>\"<\/span>\r\nuri<\/span>=<\/span>\"<\/span>pkg:\/components\/MainScene\/ChannelStoreHelper\/ChannelStoreHelper.brs<\/span>\"<\/span> \/><\/span><\/pre>\n<\/blockquote>\n
                    MainScene.brs<\/b>:<\/span><\/h3>\n
                    brightscript<\/span><\/i><\/p>\n
                    \n
                    function<\/span> onKeyEvent(key <\/span>as<\/span> string<\/span>, press <\/span>as<\/span> boolean<\/span>) <\/span>as<\/span> boolean<\/span>\r\nresult <\/span>=<\/span> false<\/span>\r\nif<\/span> press<\/span>\r\nif<\/span> key <\/span>=<\/span> \"OK\"<\/span>\r\ncheckSubscription<\/b>() <\/span>\u2018 call to <\/span>initiate<\/b> video playback code<\/span>\r\nresult <\/span>=<\/span> true<\/span>\r\nend if<\/span>\r\nend if<\/span>\r\nreturn<\/span> result<\/span>\r\nend function<\/span>\r\n\r\nsub<\/span> checkSubscription<\/b>()<\/span>\r\n#<\/span>if<\/span> is_Subscribed<\/span>\r\ngoToPlayerScreen() <\/span>\u2018 goto player screen if user already a subscriber<\/span>\r\n#<\/span>else<\/span>\r\ncheckSubscriptionAndStartPlayback() <\/span>\u2018 call <\/span>helper<\/b> file starting point method to <\/span>initiate<\/b> subscriptions check<\/span>\r\n#<\/span>end if<\/span>\r\nend sub<\/span><\/pre>\n<\/blockquote>\n
                    Conclusion<\/b><\/h2>\n
                    With the `ChannelStoreHelper` at your disposal and the Roku Pay setup on your developer dashboard, you’re well on your way to simplifying Roku Pay integration in your Roku application. All you need is to call the initiate function of the ChannelStore node at your convenience, and everything else will come into place on its own as all the logic related to presenting, selecting, and purchasing the plan is already implemented. Happy coding!<\/span><\/p>\n
                    Find the ChannelStoreHelper.brs at the below GitHub repo:<\/strong>
                    \nhttps:\/\/github.com\/tothenew\/RokuStarterKit\/blob\/master\/RokuStarterKit\/components\/MainScene\/ChannelStoreHelper\/ChannelStoreHelper.brs<\/p>\n
                    <\/div>","protected":false},"excerpt":{"rendered":"
                    Introduction Roku Pay integration can be a daunting task for developers, but fear not! `ChannelStoreHelper` is here for the rescue. Included in the Roku starter kit, this script file is your ticket to hassle-free implementation of Roku Pay on the front-end of your Roku application. With a single function call, you can kickstart Roku Pay, […]<\/p>\n","protected":false},"author":1635,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":11},"categories":[3477],"tags":[5535,5533,5532,5530,5529,5527,5531,5528,5534],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/58843"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1635"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=58843"}],"version-history":[{"count":5,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/58843\/revisions"}],"predecessor-version":[{"id":59653,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/58843\/revisions\/59653"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=58843"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=58843"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=58843"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}