ricsirigu/StripeInjector.scala

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lift frp</title>
    <script src="https://checkout.stripe.com/checkout.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"
            integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
            crossorigin="anonymous"></script>
</head>
<body>
    <div data-lift="StripeInjector">
        <button id="stripe-btn">Purchase</button>
        <div id="stripe-js"></div>
    </div>
</body>
</html>

## StripeInjector.scala

/**
  * Example of a custom implementation of Stripe Checkout
  *
  * https://stripe.com/docs/checkout#integration-custom
  *
  * @author Riccardo Sirigu
  */
class StripeInjector {

  val stripeKey = "pk_test_6pRNASCoBOKtIshFeQd4XMUh"
  val stripeButtonId = "stripe-btn"

  def render() = {

    val stripeConfig = JsObj(
      "key" -> stripeKey,
      "image" -> "https://stripe.com/img/documentation/checkout/marketplace.png",
      "locale" -> "auto",
      "token" -> AnonFunc("token",
        SHtml.ajaxCall(
          JsVar("token.id"),
          (token: String) => {
            //Here is the token, do what you want with it
            println(token)
            Alert(token)
          }
        )._2
      )
    )

    "#stripe-js" #> Script(
      JsCrVar("handler", Call("StripeCheckout.configure", stripeConfig)) &
      ElemById(stripeButtonId) ~> JsFunc("addEventListener", "click",
        AnonFunc("e",
          JsVar("handler") ~>
            JsFunc("open",
              JsObj(
                "name"-> "liftweb.net",
                "description" -> "Lift cookbook",
                "zipCode" -> true,
                "amount" -> 2000
              )
            ) &
            JsVar("e") ~> JsFunc("preventDefault")
        )
      ) &
      JsVar("window") ~> JsFunc("addEventListener", "popstate",
        AnonFunc(
          JsVar("handler") ~> JsFunc("close")
        )
      )
    )
  }
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Lift frp</title>
	<script src="https://checkout.stripe.com/checkout.js"></script>
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"
	integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
	crossorigin="anonymous"></script>
	</head>
	<body>
	<div data-lift="StripeInjector">
	<button id="stripe-btn">Purchase</button>
	<div id="stripe-js"></div>
	</div>
	</body>
	</html>

	/**
	* Example of a custom implementation of Stripe Checkout
	*
	* https://stripe.com/docs/checkout#integration-custom
	*
	* @author Riccardo Sirigu
	*/
	class StripeInjector {

	val stripeKey = "pk_test_6pRNASCoBOKtIshFeQd4XMUh"
	val stripeButtonId = "stripe-btn"

	def render() = {

	val stripeConfig = JsObj(
	"key" -> stripeKey,
	"image" -> "https://stripe.com/img/documentation/checkout/marketplace.png",
	"locale" -> "auto",
	"token" -> AnonFunc("token",
	SHtml.ajaxCall(
	JsVar("token.id"),
	(token: String) => {
	//Here is the token, do what you want with it
	println(token)
	Alert(token)
	}
	)._2
	)
	)

	"#stripe-js" #> Script(
	JsCrVar("handler", Call("StripeCheckout.configure", stripeConfig)) &
	ElemById(stripeButtonId) ~> JsFunc("addEventListener", "click",
	AnonFunc("e",
	JsVar("handler") ~>
	JsFunc("open",
	JsObj(
	"name"-> "liftweb.net",
	"description" -> "Lift cookbook",
	"zipCode" -> true,
	"amount" -> 2000
	)
	) &
	JsVar("e") ~> JsFunc("preventDefault")
	)
	) &
	JsVar("window") ~> JsFunc("addEventListener", "popstate",
	AnonFunc(
	JsVar("handler") ~> JsFunc("close")
	)
	)
	)
	}
	}