How to use tipsi-stripe - 10 common examples

onLaunchCardForm = async () => {
    try {
      this.setState({ ...this.state, loading: true, token: null })
      const token = await stripe.paymentRequestWithCardForm(demoCardFormParameters)

      this.setState({ ...this.state, token: token.tokenId })

      // We now have the token, use it to confirm
      const confirmPaymentResult = await stripe.confirmPaymentIntent({
        clientSecret: this.state.paymentIntent.secret,
        paymentMethod: demoPaymentMethodDetailsWithToken(token.tokenId),
      })
      const display = confirmPaymentResult

      this.setState({ ...this.state, display })
    } catch (e) {
      console.log(e)
      this.setState({ loading: false })
    }
  }

// The initial confirm did not require_action - a new payment method is required instead.
          response = confirmResult
        }
        this.setState({ ...this.state, loading: false, display: response })
      }
    } else if (this.state.confirmationMethod === 'automatic') {
      // Here we're in automatic confirmation mode.
      // In this mode, we can confirm the payment from the client side and
      // fulfill the order on the client side by listening to webhooks.

      // For cards, we also get immediate confirmation of the outcome of the payment.

      let display = null
      try {
        console.log('Confirming')
        const confirmPaymentResult = await stripe.confirmPaymentIntent({
          clientSecret: this.state.paymentIntent.secret,
          paymentMethod: demoPaymentMethodDetailsWithCard(cardNumber),
        })
        display = confirmPaymentResult
      } catch (e) {
        // One way we can arrive here is if the payment intent had previously succeeded.

        console.dir(e)
        display = {
          message: e.message,
          code: e.code,
        }
      }
      this.setState({ ...this.state, loading: false, display })
    }
  }

onAttachPaymentMethod = async (cardNumber) => {
    this.setState({ ...this.state, loading: true })

    if (this.state.confirmationMethod === 'manual') {
      // Create a payment method
      console.log('Calling stripe.createPaymentMethod()')

      let paymentMethod
      try {
        paymentMethod = await stripe.createPaymentMethod(
          demoPaymentMethodDetailsWithCard(cardNumber)
        )
      } catch (e) {
        console.dir(e)
        // One way a payment method can fail to be created is if the card number is invalid
        this.setState({ ...this.state, loading: false, display: e })
        return
      }

      console.log('Payment Method', paymentMethod)
      console.log('Payment Intent', this.state.paymentIntent)

      // Send the payment method to the server and ask it to confirm.
      console.log('Calling /confirm_payment on backend example server')

      let confirmResult = null

handleCardPayPress = async () => {
    try {
      this.setState({ loading: true, token: null });
      const token = await stripe.createTokenWithCard({
        number: this.state.card.number,
        expMonth: this.state.card.expMonth,
        expYear: this.state.card.expYear,
        cvc: this.state.card.cvc,
      });

      const { data } = await this.props.pay({
        stripeTokenId: token.tokenId,
      });

      const payPayload = data.pay;

      // If payment was instantly chargeable
      if (!payPayload.redirectUrl && payPayload.order.orderStatus === 'PAID') {
        return this.setState({
          loading: false,

handleCardPayPress = async () => {
    try {
      this.setState({ loading: true, token: null })
      const token = await stripe.paymentRequestWithCardForm({
        // Only iOS support this options
        smsAutofillDisabled: true,
        requiredBillingAddressFields: 'full',
        prefilledInformation: {
          billingAddress: {
            name: 'Gunilla Haugeh',
            line1: 'Canary Place',
            line2: '3',
            city: 'Macon',
            state: 'Georgia',
            country: 'US',
            postalCode: '31217',
            email: 'ghaugeh0@printfriendly.com',
          },
        },
      })

handleApplePayPress = async () => {
    try {
      this.setState({
        loading: true,
        status: null,
        token: null,
      })
      const token = await stripe.paymentRequestWithNativePay({
        // requiredBillingAddressFields: ['all'],
        // requiredShippingAddressFields: ['all'],
        shippingMethods: [{
          id: 'fedex',
          label: 'FedEX',
          detail: 'Test @ 10',
          amount: '10.00',
        }],
      },
      [{
        label: 'Whisky',
        amount: '50.00',
      }, {
        label: 'Vine',
        amount: '60.00',
      }, {

tokenizeCardAndSubmit = async () => {
    this.setState({ isLoading: true, isError: false })

    const { params } = this.state

    try {
      const token = await stripe.createTokenWithCard({ ...params })
      this.props.onSubmit(token, this.state.params)
      this.setState({ isLoading: false })
      this.props.navigator.pop()
    } catch (error) {
      console.error("CreditCardForm.tsx", error)
      this.setState({ isError: true, isLoading: false })
    }
  }

async registerAndPlaceBid() {
    this.setState({ isLoading: true })

    const { billingAddress, creditCardFormParams } = this.state
    const token = await stripe.createTokenWithCard({
      ...creditCardFormParams,
      name: billingAddress.fullName,
      addressLine1: billingAddress.addressLine1,
      addressLine2: null,
      addressCity: billingAddress.city,
      addressState: billingAddress.state,
      addressZip: billingAddress.postalCode,
    })

    commitMutation(this.props.relay.environment, {
      onCompleted: () => this.createBidderPosition(),
      onError: e => console.error(e, e.message),
      mutation: creditCardMutation,
      variables: {
        input: {
          token: token.tokenId,

handleAuthenticationChallenge = async ({ clientSecret }) => {
    let response = null
    try {
      console.log('Calling stripe.authenticatePaymentIntent()')
      const authResponse = await stripe.authenticatePaymentIntent({
        clientSecret,
      })
      console.log('stripe.authenticatePaymentIntent()', authResponse)

      if (authResponse.status === 'requires_payment_method') {
        response = {
          message: 'Authentication failed, a new PaymentMethod needs to be attached.',
          status: authResponse.status,
        }
      } else if (authResponse.status === 'requires_confirmation') {
        response = {
          message: 'Authentication passed, requires confirmation (server-side)',
          status: authResponse.status,
        }
      } else {
        response = {

onAttachPaymentMethod = async (cardNumber) => {
    this.setState({ ...this.state, loading: true })
    try {
      const confirmSetupResult = await stripe.confirmSetupIntent({
        clientSecret: this.state.setupIntent.secret,
        paymentMethod: demoPaymentMethodDetailsWithCard(cardNumber),
      })

      this.setState({ ...this.state, loading: false, confirmSetupResult })
    } catch (e) {
      console.log('error')
      console.dir(e)
      this.setState({ ...this.state, loading: false, confirmSetupResult: e })
    }
  }