On my Django site, I used Stripe to integrate payments in a .js file.
I noticed that this file appears under Sources in the developer tools when you "Inspect Element" on any browser. Anyone can access this file (scary).
How can I restructure my file organization so that apple-pay.js is not public facing?
home.html
{% load static %}
<!DOCTYPE html>
<html>
<head>
// Scripts for CSS and Stripe Pay
</head>
<body>
<section>
<div id="payment-request-button" data-amount="{{event.price}}" data-label=".
{{event.public_name}}">
<!-- A Stripe Element will be inserted here if the browser supports this type of payment method. -->
</div>
<div id="messages" role="alert"></div>
</section>
</body>
</html>
apple-pay.js
document.addEventListener('DOMContentLoaded', async () => {
const stripe = Stripe('pk_mykeyishere'); //need to protect this information and the other functions from bad actors
///functions I run here
});
My file structure:
├── Procfile
├── README.md
├── db.sqlite3
├── interface
│ ├── migrations
│ ├── models.py
│ ├── static
│ │ ├── apple-developer-merchantid-domain-association
│ │ └── interface
│ │ ├── apple-pay.js <------------------
│ │ ├── CSS/other JS files
│ ├── templates
│ │ └── interface
│ │ ├── home.html <-------------------
│ ├── urls.py
│ └── views.py
├── manage.py
└── AppName
├── settings.py
├── urls.py
└── wsgi.py