javascript - How to fix "data-key not found" when using Stripe Checkout? - Stack Overflow

admin管理员组

文章数量:1291597

I am using the custom code of stripe checkout and respecting everything but I am getting this error :

StripeCheckout.configure: 'data-key' is a required option, but was not found

It's not the first time I use the code, I use it before and everything was fine.

Here is the fulle code :

var handler = StripeCheckout.configure({
  key: 'pk_test_aaaaaaaaaaaaaaaaaaaa',
  image: '.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.
  }
});

document.querySelector('.stripe-button').addEventListener('click', function(e) {
  // Open Checkout with further options:
  handler.open({
    name: 'Title',
    description: 'description',
    currency: 'eur',
    amount: 9700
  });
  e.preventDefault();
});


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

I am using the custom code of stripe checkout and respecting everything but I am getting this error :

StripeCheckout.configure: 'data-key' is a required option, but was not found

It's not the first time I use the code, I use it before and everything was fine.

Here is the fulle code :

var handler = StripeCheckout.configure({
  key: 'pk_test_aaaaaaaaaaaaaaaaaaaa',
  image: 'https://stripe./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.
  }
});

document.querySelector('.stripe-button').addEventListener('click', function(e) {
  // Open Checkout with further options:
  handler.open({
    name: 'Title',
    description: 'description',
    currency: 'eur',
    amount: 9700
  });
  e.preventDefault();
});


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

• I copied the correct key (the one you see is a placeholder)
• The element with the class stripe-button is present in the page
• I used the same code a lot of time before and it worked fine
• There is no special issue with the website
• https://checkout.stripe./checkout.js is included before the code
• I tried the test and the live key, error with both
• I also tried other key that worked on other sites.

Here is a screenshot of the error and the code of stripe too

Did someone face the same issue before? I am pretty sure it's a small hidden thing!

• javascript
• html
• stripe-payments

Share Improve this question Follow edited Feb 27, 2019 at 14:34 Temani Afif asked Sep 21, 2017 at 22:29 Temani AfifTemani Afif 274k2828 gold badges364364 silver badges484484 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 15

After few hours of tests and turning around all the documentation I found the issue and it's related to CSS!

I was using the class stripe-button on the html element created in order to trigger the stripe action. It seems that the same class is also used by Stripe and it was creating a confusing in the JS code.

So never use this class when trying to integrate Stripe on your site : stripe-button

Your code looks fine. My suggestions for the issue:

1. Try 'data-key' instead of 'key'. Less than 1%...
2. Verify your key, for example via Stripe web interface, https://dashboard.stripe./account/apikeys
3. Remove mixed content error (https requests mixed with http). "You must serve the page containing the payment form over HTTPS as well", https://stripe./docs/checkout#does-checkout-require-https.
4. Check "Supported browsers" section, https://stripe./docs/checkout#what-browsers-does-checkout-support.
5. Investigate the backend of the project.
6. Try to run it in another environment, another network...
7. Compare to the project where it works. Does the same functionality still work in any of your projects?
8. Ask for help Stripe support or "other developers", https://stripe./docs/checkout#questions

本文标签： javascriptHow to fix quotdatakey not foundquot when using Stripe CheckoutStack Overflow