In the implementation of the purchase function of credit card payment, if the environment variable is set, the token will not be issued.
「 Token can'"t be blank" is displayed
Hypothesis 1-Token is not generated in the first place
The flow until the token is generated is
** ① Get the card information entered in the browser → ② Access the PAY.JP side (API) based on the acquired card information and public key → ③ Token will be issued on PAY.JP side **
Isn't something wrong with this?
First, in ①, check if the JavaScript file can be read properly.
const pay = () => {
console.log("OK") //⬅️ Check if "OK" is displayed in the browser with the verification tool
//The following is omitted
Now that I've confirmed it, I'll check if I can get the card number.
const pay = ()=> {
Payjp.setPublicKey("pk_test_XXXXXXXXXX"); // PAY.JP test public key
const form = document.getElementById("charge-form");
form.addEventListener("submit", (e) => {
e.preventDefault();
const formResult = document.getElementById("charge-form");
const formData = new FormData(formResult);
const card = {
number: formData.get("number"),
cvc: formData.get("cvc"),
exp_month: formData.get("exp_month"),
exp_year: `20${formData.get("exp_year")}`,
};
console.log(card); //⬅️ Check if the card information is displayed on the console
//The following is omitted
// document.getElementById("charge-form").submit();
//⬆️⬆️⬆️ Comment out to keep the console output
//Note that if you do not do this, it will be displayed on the browser for a moment and you will not be able to check it. I was frustrated doing it about 3 times without noticing it lol
})
})
}
window.addEventListener("load", pay);
I was able to get this properly without any problems. Is that an environment variable? So check at the terminal.
% env | grep PAYJP
It is included properly when checking. Hmm? Try resetting once or deleting the environment variable once in the big strategy, and the terminal also ends with ⌘Q and restarts. After that, reset the environment variables again and execute.
Then it succeeded. What was the cause? I copied and pasted it from the official website of PAY.JP, so I don't think it was wrong. I couldn't do it easily, but the courage to delete it is also important. It was a good study.
Recommended Posts