Link Authentication Element

⭐️ Minimal reference integration: A Link Authentication Element alongside a Payment Element and Address Element which can be used to complete a test payment

⚠️ Note: This integration is not production ready and should only be used as a reference.

⚙️ Integration

Link Authentication Element:

Payment Element:

Address Element:


      

🧑‍💻 Code

<?php

if (isset($_GET['createPaymentIntent'])) {
  $stripeConfiguration = [
    'api_key' => 'sk_•••',
    'stripe_version' => '2023-10-16',
  ];
  
  $stripe = new \Stripe\StripeClient($stripeConfiguration);
  
  $paymentIntent = $stripe->paymentIntents->create([
    'amount' => 4200,
    'currency' => 'usd',
  ]);
  
  header('Content-Type: application/json');
  echo json_encode([
    'clientSecret' => $paymentIntent->client_secret,
  ]);
  exit;
}
<script src="https://js.stripe.com/v3/"></script>

<p>Link Authentication Element:</p>
<p id="link-authentication-element" class="stripe-element"></p>

<p>Payment Element:</p>
<p id="payment-element" class="stripe-element"></p>

<p>Address Element:</p>
<p id="address-element" class="stripe-element"></p>

<p><button type="button" id="payButton">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');

async function initalizeElements() {
  const result = await fetch('?createPaymentIntent');
  
  const response = await result.json();
  
  const elements = stripe.elements({
    clientSecret: response.clientSecret,
  });
  
  const linkAuthenticationElement = elements.create("linkAuthentication");
  linkAuthenticationElement.mount('#link-authentication-element');
  
  const paymentElement = elements.create('payment');
  paymentElement.mount('#payment-element');
  
  const addressElement = elements.create('address', {
    mode: 'billing',
  });
  addressElement.mount('#address-element');
  
  const payButton = document.querySelector('#payButton');
  
  payButton.addEventListener('click', async (event) => {
    output.textContent = 'Processing...';
    
    const {error} = await stripe.confirmPayment({
      elements: elements,
      confirmParams: {
        return_url: window.location.href,
      },
    });
      
    if (error) {
      output.textContent = 'Error: Unable to confirm payment: ' + error.message + "\n\n" + JSON.stringify(error, true, 2);
    } else {
      output.textContent = 'This should never happen.';
    }
  });
}

initalizeElements();

// If the URL contains a Payment Intent's client secret, retrieve the Payment Intent and display it
const urlSearchParams = new URLSearchParams(window.location.search);

if (urlSearchParams.has('payment_intent_client_secret')) {
  stripe.retrievePaymentIntent(urlSearchParams.get('payment_intent_client_secret')).then(result => {
    if (result.error) {
      output.textContent = 'Unable to retrieve Payment Intent using client secret in URL: ' + JSON.stringify(result.error, null, 2);
      return;
    }
    
    output.textContent = "Payment Intent retrieved using client secret in URL:\n\n" + JSON.stringify(result.paymentIntent, null, 2);
  });
}