Stripe 成功创建没有卡详细信息的客户

Question

Complete web/Stripe newbie here. I built an iOS app, but the method of taking payments that I wanted to use isn't allowed on iOS, so I had to set up a website for it.

The website uses HTML/CSS, with a node backend hosted on Heroku. The website is a simple site that takes the name and card details of the user, but there's currently an issue with my implementation.

In app.get(), I create a customer and a setupIntent, and then this gets filled out when the user clicks a button on the site (just an event listener in js on the client-side).

My issue is, when I create a customer it creates an empty customer every time the page is loaded. If I remove this customer, there is no extra customer being added on load, and the correct customer is created, but there is no card attached to the customer's account!

I'm sure this is a basic error on my part, as I rushed through learning web dev in order to get the app to accept payments (we got an unexpected rejection from the App Review team, basically saying our app will never be acccepted as long as it takes card details on the app).

Thanks in advance for any/all help.

Cheers!

Josh

Server-side:

const express = require("express");
const bodyParser = require("body-parser");
const ejs = require("ejs");
require('dotenv').config()

const app = express();

app.set('view engine', 'ejs');

app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static("public"));

const Stripe = require('stripe');
const stripe = Stripe(process.env.SECRET_KEY);


app.get('/', async (req, res) => {
  var fullUrl = req.protocol + '://' + req.get('host') + req.originalUrl;
  const customer = await stripe.customers.create({
    email: fullUrl.split('=')[1] //This gets the email sent in the URL from the app
  });
  const intent = await stripe.setupIntents.create({
    customer: customer.id,
    payment_method_types: ['card'],
  });

  console.log(fullUrl)
  console.log(fullUrl.split('=')[1])

  res.render('index', { client_secret: intent.client_secret });
})

app.listen(process.env.PORT || 3000);

Client-side:

var stripe = Stripe('livePublicKeyIsHere');
// const firebase = require("firebase");
// require("firebase/firestore");

var elements = stripe.elements();
var cardElement = elements.create('card');
cardElement.mount('#card-element');
    
var db = firebase.firestore();

var cardholderName = document.getElementById('cardholder-name');
var setupForm = document.getElementById('setup-form');
var clientSecret = setupForm.dataset.secret;


const queryString = window.location.search;
const email = queryString.split('=')[1];

setupForm.addEventListener('submit', function(ev) {
  ev.preventDefault();
  stripe.confirmCardSetup(
    clientSecret, {
      payment_method: {
        card: cardElement,
        billing_details: {
          name: cardholderName.value
        },
      },
    }
  ).then(function(result) {
    if (result.error) {
      console.log("Error!!!" + result.error.message);
      window.alert("There's an error: " + result.error.message);
    } else {
      console.log("Success!!!");
      window.alert("Account created! Download and log into the app in order to continue.");
      addUserToFirestore(email)
    }
  });
});


function addUserToFirestore(email) {
  createUserOnFirestore(email);
  db.collection("Users").doc(email).collection("Settings").doc("info").set({
      cardDetailsAdded: true
    })
    .then(() => {
      console.log("Document successfully written!");
    })
    .catch((error) => {
      console.error("Error writing document: ", error);
    });
}

function createUserOnFirestore(email) {
  db.collection("Users").doc(email).set({
      exists: true
    })
    .then(() => {
      console.log("Document successfully written!");
    })
    .catch((error) => {
      console.error("Error writing document: ", error);
    });
}

Answer 1

The reason is because you're using get instead of post . When your user clicks the button, it should fire a POST request to your server to generate a SetupIntent object which you have already done. You also should store a relation mapping between your user and the Customer that is created, so you don't always create a new Customer when user adds a new card, instead you add the new card to existing Customer object.

Answer 2

While using a customer is recommended , ultimately it is optional to provide a customer ( API ref ). You can also attach a payment method to a customer separately, as long as you do so before using it for a payment.

Note that unless attached to a customer, a payment method is one-time-use only.