hosted-fields/public/cards.js
// renders the hosted fields inside our form
renders the hosted fields inside our form
renders the hosted fields inside our form
async function renderCardFields() {
  const cardFields = await paypal.HostedFields.render({
    fields: {
      number: {
        selector: "#card-number",
        placeholder: "4111 1111 1111 1111",
      },
      cvv: {
        selector: "#cvv",
        placeholder: "123",
      },
      expirationDate: {
        selector: "#expiration-date",
        placeholder: "MM/YY",
      },
    },
    async createOrder() {
      const order = await api.createOrder();
      return order.id;
    },
  });
  return cardFields;
}
async function renderCardFields ( ) { const cardFields = await paypal . HostedFields . render ( { fields : { number : { selector : "#card-number" , placeholder : "4111 1111 1111 1111" , } , cvv : { selector : "#cvv" , placeholder : "123" , } , expirationDate : { selector : "#expiration-date" , placeholder : "MM/YY" , } , } , async createOrder ( ) { const order = await api . createOrder ( ) ; return order . id ; } , } ) ; return cardFields ; }
renders the hosted fields inside our form
renders the hosted fields inside our form
// styles: { //   input: { //     color: "teal", //   }, //   "::placeholder": { //     color: "pink", //   }, //   ".valid": { //     color: "green", //   }, //   ".invalid": { //     color: "red", //   }, // },