Kenapa Costumer Detail & Shipping Address Tidak Tampil di Popup Snap

Kenapa popup Snap tidak menampilkan informasi costumer detail dan shipping address? Saya lihat di halaman demo bisa menampilkan informasi tersebut https://demo.midtrans.com/

Screenshot: https://prnt.sc/ysbpzy

Backend REST API

....

const midtransSnapAPI = new midtransClient.Snap({
  isProduction: false,
  serverKey: "XXX",
  clientKey: "XXX",
});
 const snapOrderParameter = {
      transaction_details: {
        order_id: generateOrderID(userID),
        gross_amount: planDetail.planPrice.price,
      },
      item_details: {
        id: planID,
        quantity: 1,
        name: planDetail.name,
        price: planDetail.planPrice.price,
      },
      costumer_details: {
        first_name: firstName,
        last_name: lastName,
        email: email,
      },
      shipping_address: {
        first_name: "TEST",
        last_name: "MIDTRANSER",
        email: "test@midtrans.com",
        phone: "0 8128-75 7-9338",
        address: "Sudirman",
        city: "Jakarta",
        postal_code: "12190",
        country_code: "IDN",
      },
    };

    const snapOrderParameterToJSON = JSON.stringify(snapOrderParameter);

    const midtransResult = await midtransSnapAPI.createTransaction(
      snapOrderParameterToJSON
    );

...

 console.log(midtransResult);

{
  token: '81ec1e51-39e8-xxxxxxxx',
  redirect_url: 'https://app.sandbox.midtrans.com/snap/v2/vtweb/81ec1e51-xxxxx'
}

console.log(snapOrderParameterToJSON);

{
   "transaction_details":{
      "order_id":"10-xxxxx",
      "gross_amount":125000
   },
   "item_details":{
      "id":"2",
      "quantity":1,
      "name":"Standard",
      "price":125000
   },
   "costumer_details":{
      "first_name":"Mimin",
      "last_name":"Sirimin",
      "email":"miminsirimin@gmail.com"
   },
   "shipping_address":{
      "first_name":"TEST",
      "last_name":"MIDTRANSER",
      "email":"test@midtrans.com",
      "phone":"0 8128-75 7-9338",
      "address":"Sudirman",
      "city":"Jakarta",
      "postal_code":"12190",
      "country_code":"IDN"
   }
}

NextJS/ReactJS:

const ProductCard = (props) => {
  const [snapCheckoutToken, setSnapCheckoutToken] = useState("");

  useEffect(() => {
    if (typeof window !== "undefined") {
      const myScript = document.createElement("script");
      myScript.setAttribute(
        "src",
        "https://app.sandbox.midtrans.com/snap/snap.js"
      );
      myScript.setAttribute(
        "data-client-key",
        "SB-Mid-client-XXX"
      );
      document.head.appendChild(myScript);
    }
  }, []);

  useEffect(() => {
    if (snapCheckoutToken && typeof window !== "undefined") {
      window.snap.pay(snapCheckoutToken, {
        onSuccess: function (result) {
          console.log("onsuccess", result);
        },
        // Optional
        onPending: function (result) {
          console.log("onPending", result);
        },
        // Optional
        onError: function (result) {
          console.log("oneerror", result);
        },
      });
    }
  }, [snapCheckoutToken]);

  const handleOrderButton = (id) => {
    axiosAuth
      .post(`/payment/checkout/${id}`)
      .then((result) => {
        console.log(result);
        setSnapCheckoutToken(result.data.data.token);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  return (
      <button
        className={styles.orderButton}
        onClick={() => handleOrderButton(id)}
      >
        Pilih Sekarang
      </button>
  );
};

export default ProductCard;

Terimakasih sebelumnya,

Midtrans / midtrans-nodejs-client

Kenapa Costumer Detail & Shipping Address Tidak Tampil di Popup Snap #25