Stripe Payment - cardFail redirect

Ask the community
,
1

So I’m implementing a custom checkout page but I want it to redirect if the person’s card doesn’t go through. Currently when a card doesn’t go through there’s a message sent to the dev console that says “Charge ID: undefined”

I’d like it to redirect the purchaser to a lightbox or a separate page notifying them that there was an error. I’m not a super adept programmer and not really familiar with Corvid. Here’s what I have on my page, there’s a public .js file also some backend stuff.

import wixLocation from ‘wix-location’;
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(“#cname”).value,
“number”:$w(“#cnumber”).value,
“cvc”:$w(“#cvc”).value,
“exp_year”:$w(“#year”).value,
“exp_month”:$w(“#month”).value,
}
}

function changeState(){
payment = {
“amount”:($w(“#amt”).value * 100),
“currency”:“USD”,
“description”:$w(“#desc”).value
}
}

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

export function amt_viewportEnter(event) {
changeState();
}

export function desc_change(event) {
changeState();
}

if (console === “Charge ID: undefined”) {
wixLocation.to(“”)
}
else {
wixLocation.to(“”);
}

Here’s what comes up in the dev console when the card fails:

1920×426 37.9 KB

I feel like I shouldn’t be calling the console for the if/else statement, also the else statement is issuing the SDK error.

Thanks in advance,

Liam

2

Your if/else statement is located in a place where it won’t run, and checking the value of console is wrong.

Did you use the Stripe payment example?

Stripe Payment Processing

Integrate the Stripe Payment processing system into a site. Three levels of user access are demonstrated: visitor, freemium (registered), and premium (paid).

If you’re using the example mentioned above, you can redirect on error in the payNow() function:

export function payNow() {
 let payment = {
 "amount": ($w("#amount").value * 100),
 "currency": "USD",
 "description": $w("#description").value
    }
    createToken(encodeCard(createCard()))
        .then((token) => {
            charge(token, payment, wixUsers.currentUser.id)
                .then((response) => {
                   if(response.chargeId) {
                        $w('#response').text = response.chargeId;
                        $w('#lblResponse').text = "Charge ID (response from Stripe):";
                        $w('#btnClearPaid').label = "CLEAR PAID";
                        $w('#btnClearPaid').show();
                       wixLocation.to("<card-success-URL>");   // redirect on success
                   }
                   else {
                        $w('#response').text = response.error;
                        $w('#lblResponse').text = "Processing error (from Stripe):";
                        wixLocation.to("<card-fail-URL>");   // redirect on error                      
                    }
                    $w('#response').show();
                });
        });
}