Card Element

⚙️ Integration

🧑‍💻 Code

<?php

if (isset($_GET['create-payment-intent'])) {
  $stripeConfiguration = [
    'api_key' => 'sk_•••',
    'stripe_version' => '2023-10-16',
  ];
  
  $stripe = new \Stripe\StripeClient($stripeConfiguration);
  
  $paymentIntent = $stripe->paymentIntents->create([
    'amount' => 4200,
    'currency' => 'usd',
  ]);
  
  echo json_encode([
    'client_secret' => $paymentIntent->client_secret,
  ]);
  
  exit;
}

<script src="https://js.stripe.com/v3/"></script>

<p id="card-element"></p>

<p><button type="button" id="pay-button">Pay</button></p>

<pre id="output"></pre>

#card-element {
  /* Show the boundary of the Element */
  border: solid 1px;
  /* Required for dark mode legibility */
  background-color: white;
  /* Aesthetics */
  border-radius: .25rem;
  padding: .5rem;
}

const outputElement = document.querySelector('#output');

const stripe = Stripe('pk_test_51O2hxMC4JnNRtz8VToJJbGHrFTPPr6TkP09h7ql3YJaqpNcxoSNxtk38glyzi9VrZKStns858YynOO2ZyGmU7VRi00CIUWuUdk');

const elements = stripe.elements();

const cardElement = elements.create('card');

cardElement.mount('#card-element');

const payButton = document.querySelector('#pay-button');

payButton.addEventListener('click', async (event) => {
  outputElement.textContent = 'Processing...';
  
  // Get a Payment Intent client secret.
  const paymentIntentResponse = await fetch('?create-payment-intent');
  
  const {client_secret: clientSecret} = await paymentIntentResponse.json();

  if (!clientSecret) {
    outputElement.textContent = 'Error: Unable to obtain clientSecret!';
    return;
  }
  
  const {error, paymentIntent} = await stripe.confirmCardPayment(clientSecret, {
    payment_method: {
      card: cardElement,
    }
  });
  
  if (error) {
    console.log('confirmCardPayment error:', error);
    outputElement.textContent = 'Error handling card payment: ' + error.message;
    return;
  }
  
  outputElement.textContent = "Success!\n\n" + JSON.stringify(paymentIntent, null, 2);
});