нашивки checkout.js - прохождение пользовательского PARAMS лексемы обратного вызова

Question

Я после этого примера интеграции с полоской Docs (слегка видоизмененной для того, чтобы иметь возможность добавлять обработчик кликов более чем одной кнопки:

<script src="https://checkout.stripe.com/checkout.js"></script> 
<button id="customButton">Purchase</button> 
<script> 
    var handler = StripeCheckout.configure({ 
    key: 'pk_test_jPVRpCB1MLjWu2P71eTvXBZD', 
    image: '/square-image.png', 
    token: function(token) { 
     // Use the token to create the charge with a server-side script. 
     // You can access the token ID with `token.id` 
    } 
    }); 

    $('.pay-deposit').click(function(e) { 
    // Open Checkout with further options 
    handler.open({ 
     name: 'Demo Site', 
     description: '2 widgets ($20.00)', 
     amount: 2000 
    }); 
    e.preventDefault(); 
    }); 

В мой частный случай у меня есть несколько кнопок, как:.

<button class='pay-deposit' booking-id='3455'>Pay Deposit</button> 
<button class='pay-deposit' booking-id='335'>Pay Deposit</button> 
<button class='pay-deposit' booking-id='34'>Pay Deposit</button> 

... и, очевидно, я хотел бы передать букинг-идентификатор щелкнули кнопку как-то маркер обратного вызова не удалось найти какой-либо пример или объяснение покрытия этого казалось бы, простой случай ... любая помощь очень ценится. спасибо!

Answer 1

Это немного поздно, но, возможно, это поможет кому-то еще. Это модифицировано из примера Rails:

# HTML file 
<script src="https://checkout.stripe.com/checkout.js"></script> 
<button class='pay-deposit' data-booking-id='3455'>Pay Deposit</button> 
<button class='pay-deposit' data-booking-id='335'>Pay Deposit</button> 
<button class='pay-deposit' data-booking-id='34'>Pay Deposit</button> 

# JS file 
$('.pay-deposit').on('click', function(event) { 
    event.preventDefault(); 

    // Get booking information from database 
    var booking_id = $(this).data('booking-id'); 
    $.getJSON("/bookings/"+booking_id, function(data) { 

    // Open Checkout with further options 
    handler = stripe_checkout(booking_id); 
    handler.open({ 
     name: "My Bookings", 
     description: data["description"], 
     amount: data["amount"], 
     email: data["email"], 
    }); 

    // Close Checkout on page navigation 
    $(window).on('popstate', function() { 
     handler.close(); 
    }); 
    }); 
}); 

function stripe_checkout(booking_id) { 
    var handler = StripeCheckout.configure({ 
    key: 'pk_test_jPVRpCB1MLjWu2P71eTvXBZD', 
    token: function(token) { 
     // Send the charge through 
     $.post("/charges/create", 
     { token: token.id, booking_id: booking_id }, function(data) { 
     if (data["status"] == "ok") { 
      window.location = "/some-url"; 
     } else { 
      // Deal with error 
      alert(data["message"]); 
     } 
     }); 
    } 
    }); 
    return handler; 
} 

# Bookings controller 
class BookingsController < ApplicationController 
    def show 
    @booking = Booking.find(params[:id]) 
    attrs = @booking.attributes 
    attrs.merge!("email" => current_user.email) 

    respond_to do |format| 
     format.json { render json: attrs.to_json } 
    end 
    end 
end 

# Charges controller 
class ChargesController < ApplicationController 

    def create 
    booking = Booking.find(params[:booking_id]) 
    customer = Stripe::Customer.create(card: params[:token]) 

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

    if charge.paid 
     # Do some things for successful charge 
     respond_to do |format| 
     format.json { render json: {status: "ok"}.to_json } 
     end 
    else 
     respond_to do |format| 
     format.json { render json: {status: "fail", message: "Error with processing payment. Please contact support."}.to_json } 
     end 
    end 
    end 
end 

Answer 2

Переместите инициализатор маркера из конфигурации, чтобы открыть.

var handler = StripeCheckout.configure({ 
    key: 'pk_test_jPVRpCB1MLjWu2P71eTvXBZD', 
    image: '/square-image.png' 
    }); 

    $('.pay-deposit').click(function(e) { 
    var data = $(this).data('booking-id'); 
    // Open Checkout with further options 
    handler.open({ 
     name: 'Demo Site', 
     description: '2 widgets ($20.00)', 
     amount: 2000, 
     token: function(token) { 
      // here you go! 
      alert(data); 
     } 
    }); 
    e.preventDefault(); 
    }); 

и переключиться:

<button class='pay-deposit' data-booking-id='3455'>Pay Deposit</button> 
<button class='pay-deposit' data-booking-id='335'>Pay Deposit</button> 
<button class='pay-deposit' data-booking-id='34'>Pay Deposit</button>