$ yarn init
$ yarn add stripe

// STRIPE_KEYは環境変数か何かに保存してください。
const stripe = require("stripe")(process.env.STRPE_KEY);

exports.handler = async (event) => {
    // TODO implement

    // API Gatewayから渡ってくる（マッピングの設定をしている.proxyの場合は変数名が違うはずです）
    const customerId = event.requestContext.authorizer.claims["cognito:username"]

    const params = JSON.parse(event.body)
    const amount = params.amount
    const description = params.description

    const result = await stripe.paymentIntents.create({
        amount: amount,
        currency: 'jpy',
        description: description,
        metadata: { username: customerId }
    })

    return {
        'headers': {
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': '*'
        },
        statusCode: 200,
        body: JSON.stringify(result),
    };
};

$ yarn add @stripe/stripe-js

<template>
~
  <div id="card-element">
    <!-- Elements will create input elements here -->
  </div>

  <!-- We'll put the error messages in this element -->
  <div id="card-errors" ref="cardErrors" role="alert"></div>

  <button v-on:click="payment">
    購入する
  </button>
~

</template>

<script>
export default {
  ~
  =

  data() {
    return {
      stripe: "",
      card: null,
    }
  },
  async mounted() {
    this.stripe = await loadStripe('pk_test_xxxxxxxxxxxxxxxxxxxxx')
    const elements = this.stripe.elements()
    this.card = elements.create("card");
    this.card.mount("#card-element");
    this.card.addEventListener('change', ({error}) => {
      const displayError = this.$refs.cardErrors
      if (error) {
        displayError.textContent = error.message;
      } else {
        displayError.textContent = '';
      }
    });
  },
  methods: {
    payment: async function() {
      let res = await axios.post("https://xxxxxxxxxx.execute-api.xx-xxxx-1.amazonaws.com/env/", {
        amount: 1000
        description: "なんとか商店オンラインとか",
      },
      {
        headers: {
          "Content-Type": "application/json",
          // これはcognitoでサインしていれば、「Amplify.Auth.currentAuthenticatedUser().then((data) => {」から取れるものをstateに入れてるところから取得
          'Authorization': store.state.user.signInUserSession.idToken.jwtToken,
        }
      }
    )
    const client_secret = res.data.client_secret;

    //client_secretを利用して（確認情報をStripeに投げて）決済を完了させる
    const confirmRes = await this.stripe.confirmCardPayment(client_secret, {
      payment_method: {
        // card: this.props.elements.getElement('card'),
        card: this.card,
        billing_details: {
          name: res.data.metadata.username,
        }
      }
    });
    if (confirmRes.paymentIntent.status === "succeeded") {
      alert("決済完了")
    }
  }
</script>