条纹元素表单在 rails 应用程序中不可见 [英] Stripe element form is not visible in a rails app
问题描述
我正在使用 Stripe 元素,但该表单未显示在我的 Rails 应用程序中.我尝试了很多建议,但仍然没有改进.我是使用 ruby 2.3 &Rails 5.2.3 但不是引导程序.
charges.js
document.addEventListener("turbolinks:load", function() {const public_key = document.querySelector("meta[name='stripe-public-键']").content;const stripe = Stripe(public_key);const 元素 = stripe.elements();常量样式 = {根据: {颜色:'#32325d',}},无效的: {颜色:'#fa755a',iconColor: '#fa755a'}};const card = elements.create('card', {style: style});card.mount('#card-element');card.addEventListener('change', ({error}) => {const displayError = document.getElementById('card-errors');如果(错误){displayError.textContent = error.message;} 别的 {displayError.textContent = '';}});const form = document.getElementById('new_job');form.addEventListener('submit', async (event) => {event.preventDefault();const {token, error} = await stripe.createToken(card);如果(错误){//通知客户有错误.const errorElement = document.getElementById('card-errors');errorElement.textContent = error.message;} 别的 {//将令牌发送到您的服务器.stripeTokenHandler(令牌);}});const stripeTokenHandler = (token) =>{//将令牌 ID 插入到表单中,以便将其提交给服务器const form = document.getElementById('new_job');const hiddenInput = document.createElement('input');hiddenInput.setAttribute('type', '隐藏');hiddenInput.setAttribute('name', 'stripeToken');hiddenInput.setAttribute('value', token.id);form.appendChild(hiddenInput);["brand", "exp_month", "exp_year", "last4"].forEach(function(field) {addFieldToForm(form, token, field);});//提交表单表单提交();}函数 addFieldToForm(form, token, field) {var hiddenInput = document.createElement('input');hiddenInput.setAttribute('type', '隐藏');hiddenInput.setAttribute('name', "user[card_" + field + "]");hiddenInput.setAttribute('value', token.card[field]);form.appendChild(hiddenInput);}});
application.html.erb
<头><title></title><%= csrf_meta_tags %><meta name="viewport" content="width=device-width, initial-scale=1"><%= stylesheet_link_tag 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', 'https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css'%><%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %><%= javascript_include_tag 'application', "https://js.stripe.com/v2/", "https://js.stripe.com/v3/", 'data-turbolinks-track': 'reload'%><%= tag :meta, name: "stripe-public-key", content: Figaro.env.stripe_publishable_key %>头部><身体></正文</html>
付款表格
<label for="card-element" class="label">输入信用卡或借记卡标签><div id="card-element" class="form-control"><!-- 将在此处插入条纹元素.--><!-- 用于显示元素错误--><div id="card-errors" role="alert"></div>
要使用条带元素,您需要使用 https 运行您的应用程序,请在条带文档中阅读更多内容 https://stripe.com/docs/stripe-js/elements/quickstart#http-requirements
I am using Stripe elements and the form is not displaying in my rails app. I have tried many suggestions and still no improvement. I am using ruby 2.3 & Rails 5.2.3 but not bootstrap.
charges.js
document.addEventListener("turbolinks:load", function() {
const public_key = document.querySelector("meta[name='stripe-public-
key']").content;
const stripe = Stripe(public_key);
const elements = stripe.elements();
const style = {
base: {
color: '#32325d',
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
const card = elements.create('card', {style: style});
card.mount('#card-element');
card.addEventListener('change', ({error}) => {
const displayError = document.getElementById('card-errors');
if (error) {
displayError.textContent = error.message;
} else {
displayError.textContent = '';
}
});
const form = document.getElementById('new_job');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const {token, error} = await stripe.createToken(card);
if (error) {
// Inform the customer that there was an error.
const errorElement = document.getElementById('card-errors');
errorElement.textContent = error.message;
} else {
// Send the token to your server.
stripeTokenHandler(token);
}
});
const stripeTokenHandler = (token) => {
// Insert the token ID into the form so it gets submitted to the server
const form = document.getElementById('new_job');
const hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);
["brand", "exp_month", "exp_year", "last4"].forEach(function(field) {
addFieldToForm(form, token, field);
});
// Submit the form
form.submit();
}
function addFieldToForm(form, token, field) {
var hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', "user[card_" + field + "]");
hiddenInput.setAttribute('value', token.card[field]);
form.appendChild(hiddenInput);
}
});
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title></title>
<%= csrf_meta_tags %>
<meta name="viewport" content="width=device-width, initial-scale=1">
<%= stylesheet_link_tag 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', 'https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css' %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', "https://js.stripe.com/v2/", "https://js.stripe.com/v3/", 'data-turbolinks-track': 'reload' %>
<%= tag :meta, name: "stripe-public-key", content: Figaro.env.stripe_publishable_key %>
</head>
<body>
</body
</html>
payments form
<div class="form-row">
<label for="card-element" class="label">
Enter credit or debit card
</label>
<div id="card-element" class="form-control">
<!-- a Stripe Element will be inserted here. -->
</div>
<!-- used to display Element errors -->
<div id="card-errors" role="alert"></div>
</div>
For using stripe elements, you need to run your application with https, read more in stripe documentations https://stripe.com/docs/stripe-js/elements/quickstart#http-requirements
这篇关于条纹元素表单在 rails 应用程序中不可见的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!