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

【问题标题】：Access Javascript function return value in Elixir/Phoenix controller在 Elixir/Phoenix 控制器中访问 Javascript 函数返回值
【发布时间】：2018-01-09 03:34:06
【问题描述】：

我正在使用Stripe.js 在我的 phoenix 应用程序中付款。

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

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

page.html的代码

<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>

js代码

// Create a Stripe client
var stripe = Stripe('pk_test_xx96UepEgmX12vaKbpJp1p70');

// Create an instance of Elements
var elements = stripe.elements();

// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
  base: {
    color: '#32325d',
    lineHeight: '18px',
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: 'antialiased',
    fontSize: '16px',
    '::placeholder': {
      color: '#aab7c4'
    }
  },
  invalid: {
    color: '#fa755a',
    iconColor: '#fa755a'
  }
};

// Create an instance of the card Element
var card = elements.create('card', {style: style});

// Add an instance of the card Element into the `card-element` <div>
card.mount('#card-element');

// Handle real-time validation errors from the card Element.
card.addEventListener('change', function(event) {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});

// Handle form submission
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
  event.preventDefault();

  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 {
      // Send the token to your server
    }
  });

【问题讨论】：

您可以使用插件来保存令牌并在控制器中使用该插件。
只需执行常规的 ajax 请求，或重定向到另一个页面并将令牌放入 get 或 post 变量中。
好的，我想到了，但我不知道这是否是正确的方法。谢谢。

标签： javascript html elixir phoenix-framework

【解决方案1】：

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

我使用axios，但你可以使用plain JS XHR，或jquery，或任何你想要的。

示例：

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

另一种选择是将令牌值添加到隐藏的表单输入并提交表单。

【讨论】：