Payments

Payments are handled through Stripe.

The integration has two main parts:

1. Checkout - when a user clicks a Buy button, DevLaunchPad generates a Stripe checkout session to securely take payment.
2. Fulfilment - after payment, Stripe sends the payment details back to your webapp for fulfilment e.g. creating a user, sending an email.

Follow these steps to get setup correctly with Stripe.

Before you start

Add your Custom Domain before continuing, since you'll use it to configure the Stripe webhook that calls back into your webapp.

Stripe recommends a separate account for each website. If you don't have one yet, head over to stripe.com. Make a secure note of the secret key when it's shown to you, because you can't reveal it again later.

To create a test account, go to sandboxes and create a new sandbox called ${SiteName} Dev. Anything you do in this sandbox account won't effect production and you'll be able to use fake credit card numbers for payment.

Next, you will configure your webapp's dev environment to use this sandbox.

Configuration

Open deployment-params.yml and set PaymentsEnabled: true.

PaymentsEnabled: true

Setup communication with Stripe

Within your Stripe sandbox, go to API keys and copy the Secret key value.

You will now add this key to your webapp, giving it full access to your sandbox.

In your webapp root, run npm run configureKeys.

• Enter the stage - hit enter to accept the default dev.
• Enter the value for stripe-api-key - paste the Secret key you copied earlier and hit enter.

In the background, DevLaunchPad automatically creates a webhook in your Stripe sandbox. This means when Stripe completes a payment, it automatically calls your webapp to handle fulfilment.

In your Stripe account, go to Developers > Webhooks > and select the new webhook. Under signing secret click Reveal and copy the key.

Back in the terminal, respond to the next command.

• Enter the value for stripe-webhook-signing-secret - paste the Signing secret value you copied earlier and hit enter.

Press enter on any further prompts to skip them.

You've configured Stripe in your dev environment. Now it's time to test it.

Create a product

To take payment, a product must exist in your Stripe product catalogue.

When creating a product, make sure:

• A price lookup key exists, so your webapp can lookup the price id and create a checkout session. By default, DevLaunchpad uses starter and pro lookup keys, defined by priceLookupKey in content/pricing.yml.
• A coupon is added (if required), with an id matching couponId defined in content/pricing.yml.

Deployment

Run npm run deploy.

DevLaunchPad automatically detects the payment settings and enables Buy buttons and Pricing links.

Go to the WebsiteURL printed in the console output and click a Buy button.

On the checkout page, enter:

• Your email address.
• Card number 4242424242424242, any CVC, any expiry date.
• Any cardholder name.
• Any country and zip / postal code.

After payment, you are redirected to the default /thank-you page.

You may also receive an email:

• If sign in is enabled you get the default new user email.
• If sign in disabled and email is enabled you get the default welcome email.

See the Email feature docs for details on customising these emails.

Going live

Everything covered so far has been set up in a Stripe sandbox account.

Before accepting payment on your live website, follow these steps.

1. In Stripe, switch to your live account.
2. Configure your product, prices, and coupons again.
3. Run npm run configureKeys and configure as above but for prod.
4. Click Buy on your live site to ensure you reach Stripe checkout.

Testing end-to-end payments in prod

Avoid the hit on your real credit card by setting up a special price for buying your product in prod.

• In Stripe, add a $1 price for your product, setting a lookup key.
• Add a /?price_lookup_key=<your-lookup-key> query string parameter to the URL of the page on which your Buy button is located.
• Click Buy, double-check the price, then enter your payment details.
• Ensure payment is accepted and fulfilment completes successfully (e.g. by checking your email).

Congratulations! You're set up and ready to take payment from customers.