Card Element: Split

⚙️ Integration

🧑‍💻 Code

<?php

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

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

<p id="card-element-number" class="stripe-element"></p>

<p id="card-element-expiration" class="stripe-element"></p>

<p id="card-element-cvc" class="stripe-element"></p>

<p id="card-element-postal-code" class="stripe-element"></p>

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

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

.stripe-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 cardNumberElement = elements.create('cardNumber');

cardNumberElement.mount('#card-element-number');

const cardExpirationElement = elements.create('cardExpiry');

cardExpirationElement.mount('#card-element-expiration');

const cardCVCElement = elements.create('cardCvc');

cardCVCElement.mount('#card-element-cvc');

const postalCodeElement = elements.create('postalCode');

postalCodeElement.mount('#card-element-postal-code');

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: cardNumberElement,
    }
  });
  
  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);
});