How to Add a Stipe Payment Field to Statamic CMS Forms

Learn how to seamlessly integrate a Stripe payment field into your Statamic CMS forms with this step-by-step tutorial.

Check out this example above. This payment field is powered by Stripe and accepts credit card payments. Perfect for simple e-commerce, donations, and paid memberships—no complex setup required!

Features

Seamless integration with Statamic forms
Support for one-time payments
Customizable payment amounts and currencies
Optional email receipts
Real-time card validation
Secure payment processing using Stripe Elements
Does not store any sensitive payment information, PCI compliant.

Follow the steps outlined below to learn how to add this to your site.

Create Stripe API Tokens

First thing's first. Create a Stripe account using this link here. Once you have that all set, head over to the Developer Portal to create some API Keys.

Create some standard API keys which have all the permissions you need. You need a Publishable Key and a Secret Key, save these keys somewhere because you wont be able to see the Secret Key again.

Create Test API Tokens

Now do the same thing but create a pair of test tokens that we will use locally. Follow this link to create those. https://dashboard.stripe.com/test/apikeys I didn't save these because they are not hidden after you create them.

Configure ENV

Now that's all you need to configure your projects .env file. Add a STRIPE_PUBLISHABLE_KEY and STRIPE_SECRET_KEY and set them accordingly to the keys you just saved somewhere.

STRIPE_PUBLISHABLE_KEY=your_publishable_key
STRIPE_SECRET_KEY=your_secret_key

Install the Stripe Form Field Addon

You can search for this addon in the Tools > Addons section of the Statamic control panel and click install, or run the following command from your project root:

composer require darinlarimore/statamic-stripe-form-field

Boom! Now You Have a New Form Field Type

This new Stripe Payment field is all you need to start using this! Drop this field into one of your form's blueprints and begin configuration.

Configuration

This field only has 4 simple parameters to configure. See the instructions for each in the screenshot below.

Once you have that configured, save the blueprint and head over to a page where that form lives to see it in action. Thats it!

Testing

Now you want to test this before releasing it into the wild right? Great me too! Navigate over to a page that displays your new field in all its glory and use one of Stripe's test cards. Fill out the form, use the special test card numbers, hit submit, and you should see a payment in Stripe's testing transactions view here https://dashboard.stripe.com/test/payments

Customizing the Template

If you wish to further customize the look of the field, you can do so by publishing the field view to your site's views directory using this command:

php artisan vendor:publish --tag=statamic-stripe-form-field-views

This will publish a stripe_form_field.antlers.html file to the /resources/views/vendor/statamic-stripe-form-field/forms/fields folder that's where you can include your styling changes.

It's kinda tricky to style the Stripe.js element but you can see an example of how to do it below. Also check out the Stripe documentation here.

stripe_form_field.antlers.html

<div x-init="() => {
	const script = document.createElement('script');
	script.src = 'https://js.stripe.com/v3/';
	script.async = true;
	document.head.appendChild(script);

script.onload = () => {
		const stripe = Stripe('{{ api_key }}');
		const elements = stripe.elements();
		const card = elements.create('card', {
			style: {
				base: {
					iconColor: '#c4f0ff',
					color: '#fff',
					fontWeight: '500',
					fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
					fontSize: '16px',
					fontSmoothing: 'antialiased',
					':-webkit-autofill': {
						color: '#fce883',
					},
					'::placeholder': {
						color: '#87BBFD',
					},
				},
				invalid: {
					iconColor: '#FFC7EE',
					color: '#FFC7EE',
				},
			}
		});
		card.mount('#payment-element');

card.on('change', async (event) => {
			handleError('');
			if (event.complete) {
				const {token, error} = await stripe.createToken(card);

if (error) {
					handleError(error.message);
					return;
				}

const input = document.getElementById('{{ id }}');
				input.value = token.id
			}

if (event.error) {
				handleError(event.error.message);
			}
		});

Moving to Production

That's it! Just don't forget to change your .env keys to the production keys in your live environment. Stripe won't accept real credit card numbers using the test api keys and users will see an error.