在Elixir / Phoenix控制器中访问Javascript函数返回值

时间:2018-01-02 12:52:59

标签: javascript html elixir phoenix-framework

我正在使用Y M D Date 2017 3 4 2017:3:4 2017 2 5 2017:2:5 在我的凤凰应用程序中付款。

我想使用Stripe.js付款方式,为此我必须在表单中传递tokenized信息并调用card方法。

有一次,我收到了我想在我的凤凰应用程序的一个控制器中使用它的令牌。我对凤凰没什么经验。有人可以建议如何将我从Stripe.createToken(card)收到的令牌传递给控制器​​吗?

Stripe.createToken(card)

的代码
page.html

js code

<form action="/charge" method="post" id="payment-form">
  <div class="form-row">
    <label for="card-element">
      Credit or debit card
    </label>
    <div id="card-element">
      <!-- a Stripe Element will be inserted here. -->
    </div>

    <!-- Used to display form errors -->
    <div id="card-errors" role="alert"></div>
    </div>
    <button class="btn btn-primary">Submit Payment</button>
  </form>

1 个答案:

答案 0 :(得分:1)

因此,在您的stripe.createToken().then()承诺回调中,您可以将令牌发送到您的服务器。

我使用axios,但您可以使用plain JS XHRjquery,或任何您想要的内容。

实施例

stripe.createToken(card).then(function(result) {
  console.log('card-result', result);
  if (result.error) {
    // Inform the user if there was an error
    var errorElement = document.getElementById('card-errors');
    errorElement.textContent = result.error.message;
  } else {
    axios.post('/my-route-to-controller', {card_token: result.token})
      .then(function (response) {
        // do something with success
      })
      .catch(function (error) {
        // do something with error
      })
  }
});

然后确保路由器中有/my-route-to-controller,控制器功能如下:

def create(conn, %{"card_token" => card_token}) do
  # do something with your `card_token`
end

虽然您可能希望提交更多参数。只需将它们添加到ajax请求中,然后在控制器中进行匹配即可。

解决方案2

另一种选择是将标记值添加到隐藏的表单输入中,然后只提交表单。