{"id":20538216,"url":"https://github.com/tossnet/lyra-systempay-blazor","last_synced_at":"2025-08-12T12:40:15.008Z","repository":{"id":53941527,"uuid":"342838764","full_name":"tossnet/lyra-systempay-blazor","owner":"tossnet","description":"Embedded payment form Basic exemple with C# and blazor web app","archived":false,"fork":false,"pushed_at":"2024-01-04T10:37:54.000Z","size":1058,"stargazers_count":5,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-14T07:56:21.500Z","etag":null,"topics":["blazor","blazor-application","blazor-server","blazor-server-app","mastercard","payment","payment-integration","visa-credit-card"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tossnet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-02-27T11:19:50.000Z","updated_at":"2024-06-01T19:16:16.000Z","dependencies_parsed_at":"2025-04-14T07:51:12.723Z","dependency_job_id":"aba5a1fe-673c-48aa-8234-f6f335834208","html_url":"https://github.com/tossnet/lyra-systempay-blazor","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tossnet/lyra-systempay-blazor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tossnet%2Flyra-systempay-blazor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tossnet%2Flyra-systempay-blazor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tossnet%2Flyra-systempay-blazor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tossnet%2Flyra-systempay-blazor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tossnet","download_url":"https://codeload.github.com/tossnet/lyra-systempay-blazor/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tossnet%2Flyra-systempay-blazor/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270063439,"owners_count":24520764,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-12T02:00:09.011Z","response_time":80,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["blazor","blazor-application","blazor-server","blazor-server-app","mastercard","payment","payment-integration","visa-credit-card"],"created_at":"2024-11-16T00:45:57.513Z","updated_at":"2025-08-12T12:40:14.968Z","avatar_url":"https://github.com/tossnet.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# lyra-systempay-blazor\nEmbedded payment form Basic exemple with C# and blazor web app\n\n\n[![Watch the video](https://www.peug.net/public/7TRr0nOU-q4.jpg)](https://youtu.be/7TRr0nOU-q4)\n\n\n# Summary \nThis solution is based on the payment solution of [Lyra](https://www.lyra.com/)\nDocumentation : [https://paiement.systempay.fr/doc/fr-FR/rest/V4.0/javascript/spa/](https://paiement.systempay.fr/doc/fr-FR/rest/V4.0/javascript/spa/) \n\nCreate a new Blasor-Server project.\n\n## 1) Key of your store (or demo key)\nThis source code uses test keys. You can find them here : (https://paiement.systempay.fr/doc/fr-FR/rest/V4.0/api/get_my_keys.html#je-nai-pas-de-compte-actif)\n\n## 2) Add in _Host.cshtml\nOpen the /Pages/_Host.cshtml page and add this at the bottom of the body of the page:\n\n```\n\u003c!-- systemPay section  --\u003e\n\u003cscript type=\"text/javascript\"\n    src=\"https://api.systempay.fr/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js\" \n    kr-public-key=\"73239078:testpublickey_Zr3fXIKKx0mLY9YNBQEan42ano2QsdrLuyb2W54QWmUJQ\"\n    kr-post-url-success=\"https://my.site.com\"\u003e\n\u003c/script\u003e\n\n\u003c!-- theme and plugins. should be loaded in the HEAD section --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://api.systempay.fr/static/js/krypton-client/V4.0/ext/classic-reset.css\"\u003e\n\u003cscript src=\"https://api.systempay.fr/static/js/krypton-client/V4.0/ext/classic.js\"\u003e\u003c/script\u003e\n\n\u003cscript src=\"~/js/SystemPay.js\"\u003e\u003c/script\u003e\n```\n\n## 3) Add in appsettings.json\nYou must convert your **test password** or **prod** password to base64. So I converted this **73239078:testpassword_SbEbeOueaMDyg8Rtei1bSaiB5lms9V0ZDjzldGXGAnIwH** :  \n```\n \"SystemPay\": {\n    \"API\": \"https://api.systempay.fr/api-payment/V4/Charge/CreatePayment\",\n    \"Authorization\": \"NzMyMzkwNzg6dGVzdHBhc3N3b3JkX1NiRWJlT3VlYU1EeWc4UnRlaTFiU2FpQjVsbXM5VjBaRGp6bGRHWEdBbkl3SA==\"\n  }\n```\n\n## 4) Add a model of configuration in your projet:\n/configurations/SystemPay.cs :\n```\nnamespace Blazor_SystemPay.Configurations\n{\n    public class SystemPay\n    {\n        public string API { get; set; }\n        public string Authorization { get; set; }\n    }\n}\n```\n\n## 5) Add a Service and its Interface\n/Services/SystemPayService.cs\n```\nusing System;\nusing System.Text;\nusing System.Threading.Tasks;\nusing System.Net.Http;\nusing System.Net.Http.Headers;\nusing Microsoft.Extensions.Options;\nusing Blazor_SystemPay.Configurations;\n\nnamespace Blazor_SystemPay.Services\n{\n    public class SystemPayService : ISystemPayService\n    {\n        \n        private HttpClient _client;\n        private IOptions\u003cSystemPay\u003e _systemPayConfig;\n\n        public SystemPayService(\n                            HttpClient client,\n                            IOptions\u003cSystemPay\u003e systemPayConfig)\n        {\n            _client = client;\n            _systemPayConfig = systemPayConfig;\n        }\n\n        public async Task\u003cstring\u003e GetFormToken(string JSON_Order)\n        {\n            _client.DefaultRequestHeaders.Add(\"Accept\", \"application/json\");\n            _client.DefaultRequestHeaders.Authorization =\n                new AuthenticationHeaderValue(\"Basic\", _systemPayConfig.Value.Authorization);\n\n            var data = new StringContent(JSON_Order, Encoding.UTF8, \"application/json\");\n            var response = await _client.PostAsync(_systemPayConfig.Value.API, data);\n\n            var res = await response.Content.ReadAsStringAsync();\n\n            var json = System.Text.Json.JsonDocument.Parse(res);\n            return json.RootElement.GetProperty(\"answer\").GetProperty(\"formToken\").ToString();\n        }\n    }\n}\n```\n\nand /Services/ISystemPayService.cs\n```\nusing System;\nusing System.Threading.Tasks;\n\nnamespace Blazor_SystemPay.Services\n{\n    public interface ISystemPayService\n    {\n        Task\u003cstring\u003e GetFormToken(string JSON_Order);\n    }\n}\n```\n\n## 6) Add in Startup.cs :\nIn ConfigurationServices, add :\n```\nservices.AddSingleton\u003cHttpClient\u003e();\nservices.AddScoped\u003cISystemPayService, SystemPayService\u003e();\nservices.Configure\u003cSystemPay\u003e(Configuration.GetSection(\"SystemPay\"));\n```\n\n## 7) Add this javascript file\nAdd **SystemPay.js** in www/root/js/\n```\n$(document).ready(function () {\n    KR.onError(function (event) {\n        var code = event.errorCode;\n        var message = event.detailedErrorMessage;\n        var myMessage = code + \": \" + message;\n\n        document.getElementById(\"customerror\").innerText = myMessage;\n    });\n});\n\nfunction displayPaymentForm(formToken) {\n    // Show the payment form\n    document.getElementById('paymentForm').style.display = 'block';\n\n    // Set form token\n    KR.setFormToken(formToken);\n\n    // Add listener for submit event\n    KR.onSubmit(onPaid);\n}\n\n\nfunction onPaid(event) {\n    if (event.clientAnswer.orderStatus === \"PAID\") {\n        // Remove the payment form\n        KR.removeForms();\n\n        document.getElementById('paymentForm').style.display = 'none';\n\n        // Show success message\n        document.getElementById(\"paymentSuccessful\").style.display = \"block\";\n\n    } else {\n        // Show error message to the user\n        alert(\"Payment failed !\");\n    }\n}\n```\n\n## 8) In your razor payment page\n\n```\n\u003c!--Hidden payment form --\u003e\n\u003cdiv id=\"paymentForm\" class=\"kr-embedded\" style=\"display:none\"\u003e\n\n    \u003c!-- payment form fields --\u003e\n    \u003cdiv class=\"kr-pan\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"kr-expiry\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"kr-security-code\"\u003e\u003c/div\u003e\n\n    \u003c!-- payment form submit button --\u003e\n    \u003cbutton class=\"kr-payment-button\"\u003e\u003c/button\u003e\n\n    \u003c!-- error zone --\u003e\n    \u003cdiv class=\"kr-form-error\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv id=\"kr-answer\"\u003e\u003c/div\u003e\n\u003cdiv id=\"customerror\"\u003e\u003c/div\u003e\n```\n\n## 9) and this code\n\n```\nprotected override async Task OnAfterRenderAsync(bool firstRender)\n  {\n      if (firstRender)\n      {\n          string jsonRequest = @\"{\n                      \"\"orderId\"\": 23720,\n                      \"\"amount\"\": 20000,\n                      \"\"currency\"\": \"\"EUR\"\",\n                      \"\"customer\"\": {\n                          \"\"email\"\": \"\"sample@example.com\"\",\n                          \"\"billingDetails\"\":\n                          {\n                              \"\"firstName\"\": \"\"François\"\",\n                              \"\"lastName\"\": \"\"TestLyra\"\",\n                              \"\"phoneNumber\"\" : \"\"11223344556677\"\"\n                          }\n                      }\n                  }\";\n\n          string formToken = await systemPayService.GetFormToken(jsonRequest);\n          await jsRuntime.InvokeVoidAsync(\"displayPaymentForm\", formToken);\n      }\n  }\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftossnet%2Flyra-systempay-blazor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftossnet%2Flyra-systempay-blazor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftossnet%2Flyra-systempay-blazor/lists"}