Stripe Configuration

Viewed 41

I try to create an online store but I need some help with Stripe Configuration, I watched many videos but I can't still figure why this is not working.

The one of the problems i get is that my card input is not showing, I have only "Submit" button!

This is my entire code :

<?php

require_once 'vendor/stripe/stripe-php/init.php';
// Set your secret key. Remember to switch to your live secret key in production.
// See your keys here: https://dashboard.stripe.com/apikeys
$stripe = new \Stripe\StripeClient('sk_test_51LEBBcHx4CKs7yGMfzjeYncAWx28zJ95YF0IXbGETygR5SkFz7K7P6Sc8at4fBektPcCYypyIAqgskLO1ffmJq22008WGAXhH6');

$stripe->paymentIntents->create(
  [
    'amount' => 1099,
    'currency' => 'eur',
    'automatic_payment_methods' => ['enabled' => true],
  ]
);
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Order</title>
</head>
<body>

<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Submit</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>
    
</body>
<script src="https://js.stripe.com/v3/"></script>
<script>
    // Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('#code#');

const options = {
  clientSecret: '{{CLIENT_SECRET}}',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in step 2
const elements = stripe.elements(options);

// Create and mount the Payment Element
const paymentElement = elements.create('payment');
paymentElement.mount('#payment-element');

const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

</html>
1 Answers

The '{{CLIENT_SECRET}}' in the documentation is just a visual placeholder - you need to replace it with the client secret returned from the $stripe->paymentIntents->create call.

Related