Difference between Stripe Checkout https://checkout.stripe.com/checkout.js and Elements https://js.stripe.com/v3/

Question

I am using stripe payment to integrate with my system. But i did not understand a difference between this 2 library.

It's seem use javascript to generate the form and pass the token to our server side.

<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_6pRNASCoBOKtIshFeQd4XMUh"
data-amount="2000"
data-name="Stripe.com"
data-description="2 widgets"
data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
data-locale="auto"
data-zip-code="true">
</script>

And this is using with .net core

<script src="//checkout.stripe.com/v2/checkout.js"
class="stripe-button"
      data-key="@Stripe.Value.PublishableKey"
      data-locale="auto"
      data-description="Sample Charge"
      data-amount="500">
</script>

With out checkout.js, we also use

<script src="https://js.stripe.com/v3/"></script>
<div id="payment-request-button">
 <!-- A Stripe Element will be inserted here. -->
</div>

That mean i can also use this 2 to use. And two of this script , i can handle crate token and custom, so what is the difference behavior of this 2 scripts.

Thank you very much

Answer 1

There is no difference. You should use the URL listed on Stripe's Checkout documentation page: https://checkout.stripe.com/checkout.js.

EDIT: It's up to you to choose whether to use Checkout or Elements to collect and tokenize customer payment data. Checkout is a pre-built form that is usable immediately. If you want to design your own custom payment form, you should use Elements instead.

Answer 2

From official documentation

The simplest way for you to securely collect and tokenize card information is with Checkout.

Stripe.js and Elements: If you’d prefer to have complete control over the look and feel of your payment form, you can make use of Stripe.js and Elements, our pre-built UI components. Refer to our Elements quickstart to learn more.