RazorPay Button Added

web-app/src/main/kotlin/home/IconList.kt

@@ -1,11 +1,13 @@
 package home
 
+import kotlinx.browser.document
 import kotlinx.css.*
+import kotlinx.dom.appendElement
+import kotlinx.dom.createElement
+import kotlinx.html.SCRIPT
+import kotlinx.html.id
 import react.*
-import styled.css
-import styled.styledA
-import styled.styledDiv
-import styled.styledImg
+import styled.*
 
 external interface IconListProps : RProps {
     var iconsAndPlatforms: Map<String,String>
@@ -22,6 +24,19 @@ fun RBuilder.IconList(handler:IconListProps.() -> Unit): ReactElement {
 }
 
 private val iconList = functionalComponent<IconListProps>("IconList") { props ->
+
+    useEffect {
+        val form = document.getElementById("razorpay-form")!!
+        repeat(form.childNodes.length){
+            form.childNodes.item(it)?.let { it1 -> form.removeChild(it1) }
+        }
+        form.appendElement("script"){
+            this.setAttribute("src","https://checkout.razorpay.com/v1/payment-button.js")
+            this.setAttribute("async", true.toString())
+            this.setAttribute("data-payment_button_id", "pl_GnKuuDBdBu0ank")
+        }
+    }
+
     styledDiv {
         css {
             margin(18.px)
@@ -30,7 +45,16 @@ private val iconList = functionalComponent<IconListProps>("IconList") { props ->
             }
             + Styles.makeRow
         }
+        val firstElem = props.iconsAndPlatforms.keys.elementAt(1)
         for((icon,platformLink) in props.iconsAndPlatforms){
+            if(icon == firstElem && props.isBadge){
+                //<form><script src="https://checkout.razorpay.com/v1/payment-button.js" data-payment_button_id="pl_GnKuuDBdBu0ank" async> </script> </form>
+                styledForm {
+                    attrs{
+                        id = "razorpay-form"
+                    }
+                }
+            }
             styledA(href = platformLink,target="_blank"){
                 styledImg {
                     attrs {