# Netflix - React、Redux （三）

打開firebase左邊欄位最下面的Extensions
點擊 **Run Subscription Payments with Stripe**

### [Stripe](https://stripe.com/)

註冊一個Stripe的帳號，拿取API KEY

[stripe DOCS - API keys](https://stripe.com/docs/keys/)

拿取之後貼上firebase的stripe API key with restricted access 那欄

### <PlansScreen />

[JavaScript深入理解对象方法——Object.entries()](https://segmentfault.com/a/1190000011616239)

const loadCheckout = async (priceId) => {
    const docRef = await db
      .collection("customers")
      .doc(user.uid)
      .collection("checkout_sessions")
      .add({
        price: priceId,
        success_url: window.location.origin,
        cancel_url: window.location.origin,
      });

    docRef.onSnapshot(async (snap) => {
      const { error, sessionId } = snap.data();

      if (error) {
        alert(`An error occured: ${error.message}`);
      }

      if (sessionId) {
        const stripe = await loadStripe(
          "pk_test_51IM7NjBF06odWtdH6m8n17PZADPhfKlAW2NAn6KFPaEDoPJqgFcM7xISj1EmrEZYMWphHj37oyEhetSNA3Dopz9s00eEIdjvue"
        );
        stripe.redirectToCheckout({ sessionId });
      }
    });
  };

[Cloud Firestore β (20): 監聽變動 - 1](https://ithelp.ithome.com.tw/articles/10209642)

若是要追蹤一個集合中的多個文件，可以透過 query 相關方法去篩選文件，最後用 onSnapshot() 取代原本要獲取資料的 get()，透過 onSnapshot() 方法時，原本傳遞給
onSnapshot() 在預設追蹤的變動是只有資料上的變動，若只是資料的 metadata 變動，是不會觸發的。

> $ yarn add @stripe/stripe-js

拿取Stripe secrect key