CVC Element

⚙️ Integration

🧑‍💻 Code

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

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

<p><button type="button" id="createCvcToken">Create CVC Token</button></p>

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

#card-cvc-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 cardCvcElement = elements.create('cardCvc');

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

const createCvcTokenButton = document.querySelector('#createCvcToken');

createCvcTokenButton.addEventListener('click' , async (event) => {
  outputElement.textContent = 'Processing...';
  
  const {token, error} = await stripe.createToken('cvc_update', cardCvcElement);
  
  if (error) {
    outputElement.textContent = 'Error creating CVC token: ' + error.message;
    return;
  }
  
  outputElement.textContent = "CVC Token created!\n\n" + JSON.stringify(token, null, 2);
});