如何安装Stripe的支付元素

Question

您好，我正在尝试安装 Stripe 的输入字段以接受信用卡/借记卡。我知道我应该使用付款元素作为文档中的说明。我正在使用带有 Ionic 5 Angular 15 电容器 5 的 node.js。根据 HTML，我使用

 <form id="payment-form" (ngSubmit)="subscribe()">
    <div id="payment-element">
      <!-- Elements will create form elements here -->
    </div>
    <button type="submit" id="submit">Subscribe</button>
    <div id="error-message">
      <!-- Display error message to your customers here -->
    </div>
  </form>

我的component.ts是这个

    import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
    import { Router } from '@angular/router';
    import { UserData } from 'src/app/services/user-data/user-data';
    import { loadStripe, Stripe, StripeElements, StripeCardElement, StripeElementsOptions } from '@stripe/stripe-js';
    
    @Component({
      selector: 'app-subscription',
      templateUrl: 'subscription.page.html',
      styleUrls: ['subscription.page.scss'],
    })
    export class SubscriptionPage {
      stripe: Stripe | null = null; // Initialize as null
      elements: StripeElements | null = null;
      paymentElement: StripeCardElement | null = null;
      clientSecret: string = ''; // You need to set this to your actual client secret
      appearance: any = { /* appearance */ };
    
      user: any = {};
      email: string = '';
      uid: string = '';
    
      cardDetail: any = {
        name: '',
        cardNumber: '',
        expiryDate: '',
        securityCode: '',
      };
    
      menuOpenCopyright: boolean = false;
    
      modalOpen: boolean = false;
      cardInputFocused: boolean = false;
    
      constructor(public router: Router, public userData: UserData) {
        this.user = this.userData.getUserData();
        this.uid = this.user.uid;
        this.email = this.user.email;
      }
    
      async ngAfterViewInit() {
        // Initialize Stripe with your publishable key
        this.initializeStripe();
      }
    
    
 

    async initializeStripe() {
    try {
      // Use loadStripe to load Stripe.js
       // LIVE KEY
      // const stripePromise = loadStripe('pk_live_51HiSUoGozbMWFnurKPHcwbz5TLsIWWXswYOErYJsT8a00KoQK9Vq3ohsgta3NJVTTx7cK9QgjSrzuClSOC78gj7e00XDbc5HSJ'); // Replace with your actual publishable key
       // TEST KEY
        const stripePromise = loadStripe('pk_test_51HiSUoGozbMWFnurWW3azSXFZV47mcnH8p4MQG6HvbHuszrDPvUFYuq15TbVqZujcJNv4CSHSqkAkFm3pRk7nwod00iHrTzUTS');
   
      const stripe = await stripePromise;

      // Set up Stripe.js and Elements
      const options = {
        clientSecret: '{{sk_test_51HiSUoGozbMWFnurBqY9URXX7pEVd0Rwnm9kyyyXuOr9pKNluCdpNp522HiGN65djoplcuJcCKjiXqtFBgZoM4f000XfvRgSgi}}',
        // Fully customizable with appearance API.
        appearance: {/*...*/},
      };
      
      
      // Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in step 5
      const elements = stripe.elements(options);
      
      // Create and mount the Payment Element
      const paymentElement = elements.create('payment');
      paymentElement.mount('#payment-element');
    } catch (error) {
      console.error('Error initializing Stripe:', error);
    }
  }
    
  
  

  async subscribe() {
    try {
     event.stopPropagation();
    console.log('Card Number: ' + this.cardDetail.cardNumber);

      // Tokenize the card details using the new cardElement
      const { token, error } = await this.stripe.createToken(this.paymentElement, {
        name: this.cardDetail.name,
      });

      if (!error) {
        console.log('Tokenization successful');

        const paymentData = {
          email: this.cardDetail.email,
          token: token.id,
          uid: this.uid,
          name: this.cardDetail.name,
          business: this.cardDetail.business,
        };
  
        // Send the token and user's email to your server
        this.userData.createCustomer(paymentData).subscribe((customerResponse: any) => {
          if (customerResponse.success) {
            const customerId = customerResponse.customer.id;
            console.log('Customer created:', customerResponse.customer);
            this.userData.createSetupIntent(customerId).subscribe((setupIntentResponse: any) => {
              if (setupIntentResponse.success) {
                const setupIntentClientSecret = setupIntentResponse.setupIntent.client_secret;
  
                // Create a subscription with the saved payment method
                const planId = 'price_1O2VVjGozbMWFnurNiXUurH7'; // Replace with your actual pricing plan ID
                this.userData.createSubscription(customerId, planId).subscribe((subscriptionResponse: any) => {
                  if (subscriptionResponse.success) {
                    console.log('Subscription successful:', subscriptionResponse.subscription);
                  } else {
                    console.error(subscriptionResponse.error);
                  }
                });
              } else {
                console.error(setupIntentResponse.error);
              }
            });
          } else {
            console.error(customerResponse.error);
            console.error('Error creating customer:', customerResponse.error);
          }
        });
      } else {
        console.error('Tokenization error:', error);
        // Handle the error if tokenization fails
        console.error(error);
      }
    } catch (error) {
      console.error('Error in subscribe:', error);
      console.error(error);
    }
  }

createCustomer、createSetupIntent 工作正常，我无法显示输入字段来输入卡号、CVC 和到期日期。我得到的只是一张空白页。有什么帮助吗？

Answer 1

您的

options

对象的

clientSecret

值错误。您正在传递您的秘密 API 密钥，该密钥“永远”不应该与客户端共享。该密钥可用于对您的帐户执行几乎任何操作，并且应像敏感密码一样对待。 相反，

您需要在那里传递设置意图或付款意图的客户端密钥

。 我

认为

这是主要问题，但很难说，因为您没有共享控制台输出。如果传递正确的客户端密钥值不起作用，请在尝试加载页面时使用完整的控制台日志更新您的问题。