Stripe Checkout – Making Web And Mobile Payments Easy
If you’re in the online retail game and haven’t given Stripe a shot yet, you’re missing out on one of the simplest ways to power up your payment process. Stripe handles payments seamlessly, no complex coding needed. A while back, they introduced a slick new payment form called Checkout. It plays nice with stripe.js and is a breeze to use on both desktop and mobile devices.
Checkout lets your customers complete their purchases without ever leaving your site. They can even save their credit card info by entering an SMS code sent straight to their phone. This embeddable feature solves the challenges faced by businesses dealing with mobile payments.
A Closer Look at Checkout
Integrating the Checkout form onto your website is a breeze. Just add this snippet anywhere you want the checkout button to appear:
The Checkout form is easy to integrate on a site. Just insert this snippet wherever you want the checkout button to appear:
In the source code, make sure to link it with the Checkout server, so the form automatically updates whenever there are any changes. You have the option to customize the logo and text by replacing “Checkout” with your own brand or design. The relevant data fields for customization are data-name and data-image.
In the source, leave it to link from the Checkout server so that the form updates automatically when there are changes. You can change the logo and text by Checkout with your own brand or design. The appropriate data are data-name and data-image .
By default, the script will generate a button that looks like this:
If you want to change the button name, you can simply add data-panel-label to the script and give your button a name. For more detailed instructions and options, please visit our documentation page.
To complete the payment, your customers just need to click the button, and a window will pop up with easy-to-fill forms.
To change the button name, simply add data-panel-label to the script and name your button. For more option documentation, please head over to this page.
When the button is clicked, a window will pop up showing forms to complete the payment.
So, here’s the deal. Guess what? Now, when you use Checkout, there’s this cool little extra feature that lets you save your credit card info just by entering an SMS code. Pretty neat, right? No more hassle of inputting your card details every time you want to make a payment. All you gotta do is provide your phone number, and voila! The code will be sent to you, and you can use it for future transactions. Easy peasy!
Customizing Your Form
Did you know that you can create a custom form integration for any HTML element or JavaScript event? It’s pretty cool! Take a look at this snippet from our custom integration documentation:
Purchase var handler = StripeCheckout.configure( < key: 'pk_test_6pRNASCoBOKtIshFeQd4XMUh', image: '/square-image.jpg', token: function(token, args) < // Use the token to create the charge with a server-side script. // You can access the token ID with `token.id` >>); document.getElementById(‘customButton’).addEventListener(‘click’, function(e) < // Open Checkout with further options handler.open(< name: 'Demo Site', description: '2 widgets ($20.00)', amount: 2000 >); e.preventDefault(); >);
Hey, did you know you can totally customize your form integration? It’s super cool because you can make it work with any HTML element or JavaScript event. Take a look at this snippet from our custom integration documentation:
Purchase var handler = StripeCheckout.configure( < key: 'pk_test_6pRNASCoBOKtIshFeQd4XMUh', image: '/square-image.jpg', token: function(token, args) < // You can use the token to create the charge with a server-side script. // And guess what? You can access the token ID with `token.id`! >>); document.getElementById(‘customButton’).addEventListener(‘click’, function(e) < // Let's open Checkout with more options! handler.open(< name: 'Demo Site', description: '2 widgets ($20.00)', amount: 2000 >); e.preventDefault(); >);
