{"id":28577652,"url":"https://github.com/mastercard/action-sheet-reference-app","last_synced_at":"2026-01-31T03:31:00.021Z","repository":{"id":46273317,"uuid":"421383833","full_name":"Mastercard/action-sheet-reference-app","owner":"Mastercard","description":null,"archived":false,"fork":false,"pushed_at":"2021-11-03T05:43:36.000Z","size":16,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-06-11T00:49:06.798Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Mastercard.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-10-26T10:44:19.000Z","updated_at":"2021-11-03T05:43:06.000Z","dependencies_parsed_at":"2022-08-30T21:01:20.378Z","dependency_job_id":null,"html_url":"https://github.com/Mastercard/action-sheet-reference-app","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Mastercard/action-sheet-reference-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mastercard%2Faction-sheet-reference-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mastercard%2Faction-sheet-reference-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mastercard%2Faction-sheet-reference-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mastercard%2Faction-sheet-reference-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Mastercard","download_url":"https://codeload.github.com/Mastercard/action-sheet-reference-app/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mastercard%2Faction-sheet-reference-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28928148,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-31T02:59:34.861Z","status":"ssl_error","status_checked_at":"2026-01-31T02:59:05.369Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-11T00:38:47.983Z","updated_at":"2026-01-31T03:31:00.001Z","avatar_url":"https://github.com/Mastercard.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Action Sheet Reference Implementation\n\n[![](https://github.com/Mastercard/action-sheet-reference-app/workflows/Build/badge.svg)](https://github.com/Mastercard/action-sheet-reference-app/actions?query=workflow%3A%22Build%22)\n[![](https://sonarcloud.io/api/project_badges/measure?project=Mastercard_action-sheet-reference-app\u0026metric=alert_status)](https://sonarcloud.io/dashboard?id=Mastercard_action-sheet-reference-app)\n[![](https://sonarcloud.io/api/project_badges/measure?project=Mastercard_action-sheet-reference-app\u0026metric=vulnerabilities)](https://sonarcloud.io/dashboard?id=Mastercard_action-sheet-reference-app)\n[![](https://img.shields.io/badge/license-Apache--2.0-blue.svg)](https://github.com/Mastercard/action-sheet-reference-app/blob/master/LICENSE)\n\n\n## Table of Contents\n- [Overview](#overview)\n- [Supported Functionality](#supported-fucntionality)\n- [Frameworks/Libraries](#frameworks)\n- [Required Development](#required-development)\n- [Integration Steps](#integration-steps)\n- [Supported Browsers](#supported-browsers)\n- [Support](#support)\n- [License](#license)\n\n## Overview  \u003ca name=\"overview\"\u003e\u003c/a\u003e\nThis is a reference application for Action Sheet UI support for Mastercard SRCI - Embedded Flows (3rd Party SRCI \u0026 Mastercard SRCI).\n\n## Supported Functionality  \u003ca name=\"supported-fucntionality\"\u003e\u003c/a\u003e\n\n- Demonstrate a slide up DCF experience on mobile devices\n- Demonstrate slide left or right Mastercard SRCi on desktop\n- Display overlay on checkout - overlay should prevent stacked viewport scrolling issues (overscroll-behavior: contain)\n- Provide styling that handles\n    - iframe style (i.e. rounded corners for slide-up)\n    - hide iframe by default (position off-screen at location to be animated from)\n    - animation of iframe in to viewport (triggered by iframe 'load' event)\n    - media queries within styling to determine slide-up/in variant\n- Trigger iframe animation in to viewport (e.g. add CSS class to iframe) based on iframe 'load' event\n- Hide iframe after checkout\n- Hide overlay after checkout\n\n## Frameworks/Libraries \u003ca name=\"frameworks\"\u003e\u003c/a\u003e\n\n- Uses HTML5, CSS3, and JS only (ECMAScript 2016)\n\n## Required Development \u003ca name=\"required-development\"\u003e\u003c/a\u003e\n\nThe reference application contains below sections -\n\n### index.html\n- Add checkout button in checkout container\n- Add support iframe/embedded mode in iframe container\n```\n  \u003cdiv class=\"iframe-foreground\"\u003e\n     \u003ciframe class=\"iframe-checkout\" id=\"checkoutIframe\" name=\"checkout-iframe\"\u003e\u003c/iframe\u003e\n   \u003c/div\u003e\n```\n**Note:** In real case scenario, the iframe container will be embedded where the checkout needs to be performed.\n\n### script.js file\n\n- Get the reference of the elements defined in **index.html**\n    ```\n    const checkoutButton = document.getElementById('checkoutButton')\n    const checkoutIframe = document.getElementById('checkoutIframe')\n    const iframeContainer = document.getElementById('iframeContainer')\n    const iframeBackground = document.getElementById('iframeBackground')\n    ```\n- **SRC SDK checkout() method**\n\n    - Call the checkout() method when checkout button is clicked\n      ```\n       checkoutButton.addEventListener('click', async () =\u003e {\n       });\n       ```\n    - Start checkout by loading SRC/DCF and displaying in iframe\n      ```\n      await checkout({ windowRef: checkoutIframe })\n      ```\n    - Mock SRC SDK checkout method\n      ````\n      window.addEventListener('message', ({ data }) =\u003e {\n      if (data === 'CHECKOUT_COMPLETE') resolve()\n      })\n      ````\n    - Simulate SRC checkout method loading SRCi/DCF in to windowRef (iframe)\n       ```\n       windowRef.setAttribute('src', '/mock-srci.html')\n      ```\n\n- **Display/Dismiss iframe**\n\n    - Show the iframe once checkout is called\n\n      ```\n       checkoutIframe.addEventListener('load', showCheckoutIframe, { once: true })\n      ```\n      ```\n       iframeContainer.classList.add('show')\n       document.body.classList.add('modal-visible')\n       ```\n\n    - Dismiss the iframe after checkout is finished and clicking the iframe background also dismisses the iframe\n\n        ```\n         iframeBackground.addEventListener('click', dismissCheckoutIframe)\n         ```\n\n        ```\n        iframeContainer.classList.remove('show')\n        document.body.classList.remove('modal-visible')\n        ```\n\n### mock-srci.html\n- Add **Complete Checkout** button\n  ```\n  \u003cbutton type=\"button\" id=\"checkoutCompleteButton\"\u003eCOMPLETE CHECKOUT\u003c/button\u003e\n   ```\n\n- On click of button **postMessage** is sent to parent window\n  ```\n   document.getElementById('checkoutCompleteButton').addEventListener('click', () =\u003e {\n   window.parent.postMessage('CHECKOUT_COMPLETE', '*')\n   })\n    ```\n**Note:** In real case scenario,this will be an actual SRCi/DCF file.\n\n### style.css\n- Opening the iframe with transition/animation effect\n- Styling the iframe\n- Showing the iframe background\n\n\n### Run Application\n\nOpen index.html file on the browser to run the application.\n\n## Integration Steps \u003ca name=\"integration-steps\"\u003e\u003c/a\u003e\n\n- Include **iframe-container** and **iframe-foreground** template in the html file where the SRC is getting invoked.\n- In the **checkout method** call, you need to **load the iframe** using addEventListener() and add the **show class** to the iframe container using classList.add() property.\n- Optionally, you can also define the **click event** on the **iframe background** using addEventListener() to handle the **dismiss of iframe** inside the checkout method.\n- Create **iframe window reference** using contentWindow property to pass in the **checkout method as parameter**.\n- Add the required **css** to provide transition/animation effect for opening and styling the iframe.\n- Run the application to see iframe getting loaded for performing the checkout.\n\n\n## Supported Browsers \u003ca name=\"supported-browsers\"\u003e\u003c/a\u003e\n\n### Desktop browser support\n- Chrome :\t55 or later\n- Safari :\t10 or later\n- Webkit :\t602.1 or later\n- Microsoft Edge :\t15 or later\n- Firefox :\t63 or later\n\n### Mobile browser support\n- Android : \tv4.4+ API v19 and above\n- iOS : \tv10+\n- Chrome :\tv63+\n- Safari :\tv11+\n- Firefox\n\n## Support \u003ca name=\"support\"\u003e\u003c/a\u003e\nPlease send an email to **apisupport@mastercard.com** with any questions or feedback you may have.\n\n\n## License \u003ca name=\"license\"\u003e\u003c/a\u003e\n\u003cp\u003eCopyright 2021 Mastercard\u003c/p\u003e\n\u003cp\u003eLicensed under the Apache License, Version 2.0 (the \"License\"); you may not use this file except in compliance with\nthe License. You may obtain a copy of the License at:\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003e   http://www.apache.org/licenses/LICENSE-2.0\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eUnless required by applicable law or agreed to in writing, software distributed under the License is distributed on\nan \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the\nspecific language governing permissions and limitations under the License.\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmastercard%2Faction-sheet-reference-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmastercard%2Faction-sheet-reference-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmastercard%2Faction-sheet-reference-app/lists"}