条带结账.js - 将自定义参数传递给令牌回调

Stripe checkout.js - passing custom params to token callback

本文关键字：参数传递 自定义 令牌 回调 js      更新时间：2023-09-26

我正在遵循 Stripe 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>

。显然，我想以某种方式将点击按钮的预订ID传递给令牌回调。找不到任何示例或解释涵盖这个看似简单的案例......任何帮助非常感谢。谢谢！

这有点晚了，但也许它会帮助其他人。 这是从 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

将令牌初始值设定项从"配置"移动到"打开"。

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>
相关文章：