Stripe Checkout Link onClick does not process payment

问题

I'm using Stripe Custom Integration in order to link a navigation element to the checkout popup.

My client side code looks like this:

<!-- stripe stuff -->
<script src="https://checkout.stripe.com/checkout.js"></script>

<script>
var handler = StripeCheckout.configure({
  key: 'pk_test_(removed for Stackoverflow)',
  image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
  locale: 'auto',
  token: function(token) {
    // You can access the token ID with `token.id`.
    // Get the token ID to your server-side code for use.
    // 
    // Dynamically create a form element to submit the results
    // to your backend server
    var form = document.createElement("form");
    form.setAttribute('method', "POST");
    form.setAttribute('action', "/create_subscription.php");

    // Add the token ID as a hidden field to the form
    var inputToken = document.createElement("input");
    inputToken.setAttribute('type', "hidden");
    inputToken.setAttribute('name', "stripeToken");
    inputToken.setAttribute('value', token.id);
    form.appendChild(inputToken);

    // Add the email as a hidden field to the form
    var inputEmail = document.createElement("input");
    inputEmail.setAttribute('type', "hidden");
    inputEmail.setAttribute('name', "stripeEmail");
    inputEmail.setAttribute('value', token.email);
    form.appendChild(inputEmail);

        // Finally, submit the form
    document.body.appendChild(form);

    // Artificial 5 second delay for testing
    setTimeout(function() {
        window.onbeforeunload = null;
        document.forms["payment-form"].submit()
    }, 2000);
  }
});

document.getElementById('customButton').addEventListener('click', function(e) {
  // Open Checkout with further options:
  handler.open({
    name: 'Create New Account',
    description: 'Voice Training - Month #1',
    currency: 'usd',
    amount: 2700
  });
  e.preventDefault();
});

// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
  handler.close();
});
</script>

My PHP Code in create_subscription.php looks like this:

<?php 

// If you're using Composer, use Composer's autoload:
require_once('stripe/init.php');
// Set your secret key: remember to change this to your live secret key in production
// See your keys here: https://dashboard.stripe.com/account/apikeys
\Stripe\Stripe::setApiKey("sk_test_(removed for Stackoverflow)");

// Token is created using Checkout or Elements!
// Get the payment token ID submitted by the form:
$token = $_POST['stripeToken'];
$charge = \Stripe\Charge::create([
    'amount' => 2700,
    'currency' => 'usd',
    'description' => 'Example charge',
    'source' => $token,
]);

?>

The directory '/stripe/' is existing and has the latest Stripe library in it.

When I click the checkout button, the window pops up (nice) and API requests are shown as successful (nice) and logged as below:

Request:

{
  "email": "(removed for Stackoverflow)",
  "validation_type": "card",
  "payment_user_agent": "Stripe Checkout v3 checkout-manhattan (stripe.js/e64eb2a)",
  "referrer": "https://www.example.com/ (removed for Stackoverflow)",
  "recaptcha_token": "03AL4dnxpSxs-T-AiQqMLLYOK_NvVEy3GRt6CzYttPDKyxpHk6UhNOUfP0vQG5w2Vst6w2HocYZ1BkRlzJGkPb2ia303vxTdCNjyQd63BK7WrfTnSTXkc3o5F5nUEoyjdrPXbRGa3MyEoT-_qDulr_z8QBuU5sapDeQVA6rtl2uigFLU4-0Ws5WZnIktIhyavI2RBWGAcpknLf4acP-9WPu_WLgxBnD6v0c1zD15Cr_leBdBuolTGtqt_LK_ow5VPQXNfqmiXYR1y1fcsd5EyQV3Nu74qeeJhfb-n49w0F_U3fk0SQCTc1y-g",
  "card": {
    "number": "************4242",
    "exp_month": "12",
    "exp_year": "18",
    "cvc": "***",
    "name": "(removed for Stackoverflow)"
  },
  "time_on_page": "16373",
  "guid": "a915b44c-f821-4684-b587-6f7f8ff8b4e7",
  "muid": "edce0eb2-f5ff-40ec-b278-31ff22933eec",
  "sid": "24a738f0-1e31-4869-93a3-1caedd63456c",
  "key": "(removed for Stackoverflow)"
}

Response:

{
  "id": "tok_1DAJ8vELek0UlsDQiy5RK4L8",
  "object": "token",
  "card": {
    "id": "card_1DAJ8uELek0UlsDQfU4rj87l",
    "object": "card",
    "address_city": null,
    "address_country": null,
    "address_line1": null,
    "address_line1_check": null,
    "address_line2": null,
    "address_state": null,
    "address_zip": null,
    "address_zip_check": null,
    "brand": "Visa",
    "country": "US",
    "cvc_check": "pass",
    "dynamic_last4": null,
    "exp_month": 12,
    "exp_year": 2018,
    "funding": "credit",
    "last4": "4242",
    "metadata": {
    },
    "name": "(removed for Stackoverflow)",
    "tokenization_method": null
  },
  "client_ip": "(removed for Stackoverflow)",
  "created": 1536938617,
  "email": "(removed for Stackoverflow)",
  "livemode": false,
  "type": "card",
  "used": false
}

However, no test charge is created. The transaction does not become visible in ->dashboard -> payments.

I feel a slight sense of doom and that I'm missing something trivial. Can somebody tell me what is wrong here?

回答1:

It might be a silly suggestion. Can you go to your dashboard on Stripe and See if the "View Testing Data" switch is on. Since it is a testing charge, it might require testing switch on to view the transaction.

Give it a try and let me know

回答2:

Your attached tag doesn't have a name-attribute, so when you try and submit it using the name payment-form using the named form accessor, nothing is happening, because that form accessor doesn't exist.

Putting the following line under your other form-attribute setting should fix your problem.

form.setAttribute('name', "payment-form");

来源：https://stackoverflow.com/questions/52335202/stripe-checkout-link-onclick-does-not-process-payment