Testing Stripe samples in your browser with GitHub Codespaces
Tags: stripe, github, codespaces, tutorial
Published: 2023-10-24 11:00:00

Nowadays we can develop and test applications in a browser. You can spring up cloud-based dev environments that run in the browser with zero local configuration. And once you're up and running, you can share your application with others with a few clicks. It's quicker and easier to set up the application by using container technology. This means that we don't have to set up a development environment, and it's easy to share the application with others by just sharing the URL.
Thanks to the community’s hard work, Stripe’s [accept-a-payment](https://github.com/stripe-samples/accept-a-payment) code sample now runs in GitHub Codespaces. 
You can now run our example application in your browser through Codespace, meaning you don't have to download the application onto your local machine.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c73qu0463x2hcyzz10i5.png)

In this article, I'll demonstrate how you can use Codespaces to run this Stripe sample application in your browser.

## Requirements

You'll need an [active GitHub account](https://github.com/signup) to use Codespaces and a test [Stripe account](https://dashboard.stripe.com/register) to use this sample.
GitHub Codespaces has a free usage tier for personal accounts, but if you're part of a GitHub Organization or an Enterprise account. You should check the [Codespaces pricing](https://docs.github.com/billing/managing-billing-for-github-codespaces/about-billing-for-github-codespaces#pricing-for-paid-usage).

## Launch the first container
You can launch the Stripe example application from this [GitHub repository](https://github.com/stripe-samples/accept-a-payment) in just a few simple clicks. 
From the repository’s main page, click the “Code” button in the top right corner to open the dropdown menu:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vt8uq6loctjxk26jo38h.png)



Change the tab to “Codespaces,” and click the “Create Codespace on main” button.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4eddg2xklwfkwgvlqd77.png)


Click the “Create Codespace on main” button and GitHub Codespace will launch the application project in a container. A new tab will open to show the in-browser editor to edit the application.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qzd1nnhagnliyxbq12a2.png)

## Run the application in Codespace
In the browser editor, we can open the application files and run bash commands in the provided terminal environment.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gd4tzbmnwgnenxqtukeo.png)



Let’s configure the application to use our own Stripe API key.
Note: for this post, we’ll be using Node.js, but you can use any of the supported back-end languages.


For the next step you’ll need your Stripe API keys, which you can find in the Stripe Dashboard on the [“Developers” page](https://dashboard.stripe.com/test/apikeys).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2tn9fi3ga3dial6glwli.png)


Back in the dev environment, type the following command in the terminal to copy the environmental variables example file:

```bash
cp payment-element/.env.example payment-element/node/.env
```

Open the newly created `.env` file in the editor and configure these API keys:
```
STRIPE_PUBLISHABLE_KEY=pk_test_123...
STRIPE_SECRET_KEY=sk_test_123...
```


Back in your terminal `cd` into the server side demo application directory and install the dependencies with npm.
```
npm install
```


After that, we can start the demo application:
```
npm start
```


Codespace will show a pop-up message to open the application in a new tab.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1kz93ho7sf6wrc8yncrv.png)
After clicking the “open in browser” button, we can see the demo application in the browser.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/57802rym3lcrmm548tsj.png)

And that’s it! We have a working sample and development environment working in the browser.

### Tips: How to retrieve the preview URL
We can find the running preview URLs in the “PORTS” tab:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iu5zsvslkfvfg9s8t9yl.png)

## Modify the application in the browser
Codespaces makes it easy to modify our code straight from the browser. For example, let's think about changing the style of the payment form to support dark mode.
Open the `payment-element/client/html/index.js` file and edit the `stripe.elements()` function:

```diff
-  const elements = stripe.elements({ clientSecret });
+  const elements = stripe.elements({
+    clientSecret, 
+    locale: 'en',
+    appearance: {
+      theme: 'night'
+    }
+  });
```

The above will set the locale to English and instruct the Payment Element to use the predefined “night” theme.
In this example, the application (payment-element/server/node) needs to restart to reflect changes. So press the “Ctrl” key and “C” key on the terminal to stop the “npm start” command and re-run the “npm start” command.
The appearance of the checkout form will have changed to use the “night” theme:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pd6y5s9ymt2h7w9ttl4g.png)

If you're interested in learning more about customizing the payment form, you can read up more about the [Appearance API](https://stripe.com/docs/elements/appearance-api).

## Running multiple applications
The above demonstrates how to run the sample frontend on Codespaces, but what if you want the fullstack picture? Luckily, it’s possible to run both the frontend and backend of the sample with Codespaces with just a little configuration.

Click the “Split Terminal button” on the terminal section to launch a new terminal tab.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tg5ja7hbtwxmxkfoigjj.png)

Click the new terminal tab to prepare the client-side application.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bz4zaspiwq1wn6dnaxsz.png)

Now move into the client-side application directory. Let’s go to `payment-elements/client/react-cra` to test the React application.

```
cd ../../client/react-cra/
```

Install the dependencies by running the install command:

```
npm install
```

and start the React application.

```
npm start
```

Open the new window to access the preview URL of the React application.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iu0mfsfmfm3xqhcn1hcw.png)

Each preview application is connected in a container on Codespace, so we don't have to update the code to fetch or connect to another application. Plus, we can keep using the “localhost” domain within our environment to see the fullstack app.

## Share the demo publicly
The preview URL is kept private, meaning that unauthorized or logged-out users will be redirected to the sign-in page.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rn28syis5w31d2j77boi.png)
If you want to share the demo application, we can make the container public by following a few steps.
Access the “PORT” tab and right-click the application you want to publish.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2bp2tlsczphgmlb2fvv2.png)
Open the “Port Visibility” submenu, and select “Public.” Now anyone with the URL can access the application.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wf9tc6jdh1298r2jag8d.png)

You can check the ‘Visibility’ status of the application by reviewing the “PORT” tab.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iqbfhg35n778170zs2v8.png)

## Stop and terminate the Codespace container
GitHub Codespaces has a free tier, but it's [not unlimited usage](https://docs.github.com/billing/managing-billing-for-github-codespaces/about-billing-for-github-codespaces#monthly-included-storage-and-core-hours-for-personal-accounts). Be sure to terminate the container when it’s no longer needed.
You can see your existing containers from the [Codespaces dashboard](https://github.com/codespaces): 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w7y01dhd0niuz1eeewm7.png)

Click the “...” button on each container to show the context menu where you can delete the Codespace to stop it.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/902nrjqsm1k87wfgxgq6.png)

You can also manage the Codespace from the repository page itself:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6qf0c17wmi63ksjidfui.png)

## Conclusion
In this post, we learned how to launch the accept-a-payment Stripe sample development environment in a browser using GitHub Codespaces. 
If you're interested in how to support Codespaces in your application, you can learn about it from the [official GitHub documentation](https://docs.github.com/ja/codespaces).
The stripe-samples repository includes various languages and use cases. For example, you can choose to use [Stripe Checkout](https://github.com/stripe-samples/accept-a-payment/tree/main/prebuilt-checkout-page) instead of the Payment Element.

## About the author


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6q9dpi3ktyzeid6v6wu0.jpg)

Hidetaka Okamoto is a developer advocate at [Stripe](https://stripe.com/docs), where he works on writing, coding, and teaching how to integrate online payments. He has organized several community conferences, including [WordCamp Kyoto 2017](https://kyoto.wordcamp.org/2017/en/) and [JP_Stripes Connect 2019](https://connect2019.jpstripes.com/), the first Stripe user conference in Japan. He lives in Hyogo, Japan with his family and two cats.

## Stay connected
You can also stay up-to-date with Stripe developer updates on the following platforms:

- 📣 Follow [@StripeDev](https://twitter.com/stripedev) and [our team](https://twitter.com/i/lists/1459720002567868418) on Twitter.
- 📺 Subscribe to our [YouTube channel](https://www.youtube.com/StripeDevelopers).
- 💬 Join the official [Discord server](https://discord.com/invite/RuJnSBXrQn).
- 📧 Sign up for the [Developer Digest](https://go.stripe.global/dev-digest).