#matrix-checkout

1 messages · Page 1 of 1 (latest)

plush chasm
#

@vapid marsh hard to say, you just kind of write the code for it. Your backend creates the CheckoutSession object so it can dynamically pass whatever parameters it needs when calling that API.

#

is there a specific part you're stuck on?

vapid marsh
#

I am able to pass some data to the server. Here is the code

#

checkoutButton.addEventListener('click', () => {
console.log('CLICKED');
var myData = {
myStripeVendorAccount: "acct_1Jpu8gFbYZoKrptz",
myPrice: "price_1Js6eZFbYZoKrptzfh96WP8C",
};
console.log('myData.myStripeAccount: ', myData.myStripeVendorAccount);
stripe = Stripe('pk_test_51EpuOEKXjwYd84Q4OeeHHJmIzWklxIvZQzEeT7JOjAZx91ZRwYbJBILRjI9D3UwEu6tT7GqNM8Ne4iRpIJGPoKbP00SiByyvDH', {stripeAccount: myData.myStripeVendorAccount})

console.log(myData);
createStripeCheckout(myData)
.then(response => {
const sessionId = response.data.id;
stripe.redirectToCheckout({sessionId: sessionId});
});
});

#

this code is in a app.js file

plush chasm
#

are you sure you want to do it that way?

#

because this way as a customer I can just edit the Javascript in my browser and set myData to something else and end up paying something/someone you didn't intend

vapid marsh
#

ok

plush chasm
#

but either way sure, you'd post some info to your backend(I assume that's what your createStripeCheckout function does) and your backend can read it, seems like it would work

vapid marsh
#

ok so i have 2 questions then. first question is how can I avoid that a customer could "edit the Javascript in my browser and set myData to something else and end up paying something/someone you didn't intend"

plush chasm
#

you'd have your backend choose the price and account ID instead

#

like from loading it from a database

#

for example

vapid marsh
#

but i would still need to pass some sort of id

plush chasm
#

the frontend could maybe have just some opaque ID like an order ID yes

vapid marsh
#

how can the server know which price to pick?

plush chasm
#

hard to say, that's your business logic

vapid marsh
#

ok but using my own id or the stripe generated id is the same, right?

plush chasm
#

it's kind of the same

vapid marsh
#

so user can still edit the id and pay for something else. it looks like it is an issue i need to accept as it is

plush chasm
#

sorry, I know I'm not being helpful but the whole concept of a shopping cart(which is what you're after) is a little out of scope of what Stripe offers and what I can help with

#

yeah but usually the ID is in like a cookie and your backend validates it

vapid marsh
#

no no thanks you are useful

#

and here is my 2nd question (this is more html I guess): How can I define myData in each individual page and pass it to app.js? is there a place in the document where i can put the info?

plush chasm
#

I'm not sure how I can answer this without knowing exactly what framework you use and how you write your code and structure your project.

#

if I was doing this for example I'd have it templated into my page

vapid marsh
#

I have a simple html page with this button (i would like to hard code the accountID and priceId in the button in some way and pass it to app.js which would then pass it to the server

#

<section class="u-clearfix u-section-9" id="sec-74e8">
<div class="u-clearfix u-sheet u-sheet-1">
<a class="ricco-coffe u-btn u-button-style u-hover-palette-1-dark-1 u-palette-1-base u-btn-1">Button dod</a>
<div class="u-clearfix u-custom-html u-custom-html-1">a <script src="https://js.stripe.com/v3/"></script>
<script type="module" src="js/app.js"></script>
</section>

plush chasm
#

if you're not using a server like this then sure, you can just hard code it

#

like have a <div id="stripePrice" style="display: none;">price_xxx</div> on the page

#

and then app.js can do like document.getElementById("stripePrice").value to get the ID

vapid marsh
#

ok let me try this one