Stripe Checkout с пользовательской интеграцией в Rails

Question

Я пытаюсь реализовать Stripe Checkout, используя пользовательскую интеграцию в приложении rails. В моей форме проверки отображается зеленая галочка с сообщением, которую она подала, но платеж не обрабатывается. Простая интеграция работает хорошо, как и платежи по подписке на другие части моего сайта.

Как и простая интеграция, я пытаюсь разместить собственный скрипт интеграции внутри form_tag - я следовал за Rails Checkout guide, который, к сожалению, написан только для простой интеграции. Как и у руководства, у меня есть контроллер сборов, с новыми и создающими действия, чтобы показать форму и создать обвинения.

Плата контроллера:

class ChargesController < ApplicationController 

def new 
end 

def create 
    # Amount in cents 
    @amount = 500 

    customer = Stripe::Customer.create(
    :email => params[:stripeEmail], 
    :card => params[:stripeToken] 
) 

    charge = Stripe::Charge.create(
    :customer => customer.id, 
    :amount  => @amount, 
    :description => 'Rails Stripe customer', 
    :currency => 'usd' 
) 

rescue Stripe::CardError => e 
    flash[:error] = e.message 
    redirect_to charges_path 
end 

end 

И в моем новом представлении, форма настройки следующим образом:

<%= form_tag charges_path do %> 
    <script src="https://checkout.stripe.com/checkout.js"></script> 

    <button id="customButton" class="btn btn-large btn-primary">Buy Now</button> 

    <script> 
     var handler = StripeCheckout.configure({ 
     key: '<%= ENV["STRIPE_PUBLIC_KEY"] %>', 
     image: '/assets/my_logo.png', 
     token: function(token, args) { 
      // Use the token to create the charge with a server-side script. 
     } 
     }); 

     document.getElementById('customButton').addEventListener('click', function(e) { 
     // Open Checkout with further options 
     handler.open({ 
      name: 'My Company', 
      description: 'Product ($60.00)', 
      amount: 60*100, 
      shippingAddress: true 
     }); 
     e.preventDefault(); 
     }); 
    </script> 
<% end %> 

Я попытался просто обо всем, что можно придумать, но форма не будет быть представленным для запуска действия создания. Я вижу примечание, чтобы использовать скрипт на стороне сервера, но может ли кто-нибудь указать мне в правильном направлении на то, что я могу потерять?

Любая помощь очень ценится !! Благодаря!

Answer 1

Я думаю, что вы не хотите, чтобы предотвратить дефолт здесь, потому что это предотвращает отправку вашей формы на сервер. Предоставляет ли он форму для создания действия при выводе e.preventDefault();?

Answer 2

Вам необходимо завершить функцию обратного вызова маркера.

Первый проход в ответ от обработчика нашивки в качестве аргумента, а затем добавить маркер идентификатор и адрес электронной почты в качестве вклада в форму перед отправкой: (непроверенные)

token: function(response) { 
    var tokenInput = $("<input type=hidden name=stripeToken />").val(response.id); 
    var emailInput = $("<input type=hidden name=stripeEmail />").val(response.email); 
    $("form").append(tokenInput).append(emailInput).submit(); 
} 

Answer 3

С «простой интеграции» вас все равно можно изменить текст в синей кнопке по умолчанию с атрибутом метки данных (например, data-label = 'Купить сейчас') с помощью configuration options. Но вы должны использовать «пользовательскую интеграцию», чтобы полностью вставить кнопку в себя.

Answer 4

Это рабочее решение. Добавьте идентификатор в свой тег формы. Добавьте скрытое поле stripeToken и stripeEmail в свой тег формы. Затем, когда мы получаем токен от Stripe мы будем использовать JavaScript, чтобы установить значения скрытых полей и отправить форму с помощью ссылки их идентификаторы:

<%= form_tag charges_path, id: 'chargeForm' do %> 
    <script src="https://checkout.stripe.com/checkout.js"></script> 
    <%= hidden_field_tag 'stripeToken' %> 
    <%= hidden_field_tag 'stripeEmail' %> 
    <button id="customButton" class="btn btn-large btn-primary">Buy Now</button> 

    <script> 
    var handler = StripeCheckout.configure({ 
     key: '<%= ENV["STRIPE_PUBLIC_KEY"] %>', 
     image: '/assets/my_logo.png', 
     token: function(token, args) { 
     document.getElementById("stripeToken").value = token.id; 
     document.getElementById("stripeEmail").value = token.email; 
     document.getElementById("chargeForm").submit(); 
     } 
    }); 

    document.getElementById('customButton').addEventListener('click', function(e) { 
     // Open Checkout with further options 
     handler.open({ 
     name: 'My Company', 
     description: 'Product ($60.00)', 
     amount: 60*100, 
     shippingAddress: true 
     }); 
     e.preventDefault(); 
    }); 
    </script> 
<% end %> 

Это можно решить многими способами, но босые в виду, что это JavaScript проблема не связана с Rails или Stripe. Stripe просто дают нам токен, мы можем делать все, что захотим, с помощью JavaScript.