diff --git a/web-app/src/main/kotlin/home/IconList.kt b/web-app/src/main/kotlin/home/IconList.kt index 8bd17319..368ad338 100644 --- a/web-app/src/main/kotlin/home/IconList.kt +++ b/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 @@ -22,6 +24,19 @@ fun RBuilder.IconList(handler:IconListProps.() -> Unit): ReactElement { } private val iconList = functionalComponent("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("IconList") { props -> } + Styles.makeRow } + val firstElem = props.iconsAndPlatforms.keys.elementAt(1) for((icon,platformLink) in props.iconsAndPlatforms){ + if(icon == firstElem && props.isBadge){ + //
+ styledForm { + attrs{ + id = "razorpay-form" + } + } + } styledA(href = platformLink,target="_blank"){ styledImg { attrs {