Stripe Carry Over Amount From Previous Page

Ask the community
,
1

Currently with the Stripe Integration below I am able to process test payments and get Charge ID

//paymentAPI

import {createToken, encodeCard}  from "public/stripeAPI.js";
import {charge}  from 'backend/stripeProxy';

var payment;

export function payNow(event) {
    createToken(encodeCard(createCard()))
        .then((token) => {
            console.log("Card token: " + token);
            charge(token, payment)
                .then((chargeResponse) => {
                    console.log("Charge ID: " + chargeResponse.id);
                });
        });
}

function createCard() {
    return {
        "name": $w("#input1").value,
        "number": $w("#input4").value,
        "cvc": $w("#input5").value,
        "exp_year": $w("#input3").value,
        "exp_month": $w("#input2").value
    };
}

function changeState() {
    payment = {
        "amount": ($w("#input8").value * 100),
        "currency": "EUR",
        "description": $w("#input9").value
    };
}

export function button1_click(event, $w) {
payNow();
}

export function input8_change(event, $w) {
	//Add your code for this event here: 
changeState();	
}

export function input9_change(event, $w) {
	//Add your code for this event here: 
changeState();
}

I am only able to process successful Test Payments & get a Charge ID when User is allowed to enter the amount & description themselves with the above Code.

If I try something like the below to retrieve the amount & description from the previous page I am only getting a Card Token.

import {session} from 'wix-storage';

export function input7_viewportEnter(event, $w) {
const activity = session.getItem('activity');
$w('#input7').value = activity;

const price = session.getItem('price');
$w('#input6').value = price;

const name = session.getItem('name');
$w('#input1').value = name;

const email = session.getItem('email');
$w('#input11').value = email;

const adults = session.getItem('adults');
$w('#input12').value = adults;

const children = session.getItem('children');
$w('#input13').value = children;

}

//paymentAPI

import {createToken, encodeCard}  from "public/stripeAPI.js";
import {charge}  from 'backend/stripeProxy';

var payment;

export function payNow(event) {
    createToken(encodeCard(createCard()))
        .then((token) => {
            console.log("Card token: " + token);
            charge(token, payment)
                .then((chargeResponse) => {
                    console.log("Charge ID: " + chargeResponse.id);
                });
        });
}

function createCard() {
    return {
        "name": $w("#input1").value,
        "number": $w("#input4").value,
        "cvc": $w("#input5").value,
        "exp_year": $w("#input3").value,
        "exp_month": $w("#input2").value
    };
}

function changeState() {
    payment = {
        "amount": ($w("#input6").value * 100),
        "currency": "EUR",
        "description": $w("#input7").value
    };
}

export function button1_click(event, $w) {
payNow();
}

export function input8_change(event, $w) {
	//Add your code for this event here: 
changeState();	
}

export function input9_change(event, $w) {
	//Add your code for this event here: 
changeState();
}

Can anyone help please?

P.S. I tried asking the folks over at Stack Overflow but they are only interested in correcting Grammatical Mistakes in my question:/

2

anyone ?

3

I have no idea if it will work, but what if the ‘amount’ field for your payment form is a read only input field connected to the relevant field from the previous page?

4

It already is on read only. Doesn’t work

5

Anyone Can Help ?

6

What do you mean by Carry Over Amount From Previous Page ?
What is the previous page and what does it do?

7

See my screenshot below

1355×618 44 KB

The price is automatically calculated depending on the selections made by the user.

I have the total amount due (on the bottom right) carried over to the checkout page with wix-storage.

And after this my original question

8

wix-storage retrieves this amount on the checkout page on #input6

import {session} from 'wix-storage';

export function input7_viewportEnter(event, $w) { 
 
 const activity = session.getItem('activity');
 $w('#input7').value = activity;

 const price = session.getItem('price');
 $w('#input6').value = price;

See where #input6 is placed in the stripe section of my checkout page (#input6 is in read only)

function changeState() {     
payment = { 
      "amount": ($w("#input6").value * 100), 
      "currency": "EUR", 
      "description": $w("#input7").value
     };
 }

I am not getting a successful transaction like this.

If I am allowing the user to manually type in the amount only then I am receiving a charge id.

Please see my original post for Full Page Codes