用于wordpress循环生成的多种形式的条带API

Question

所以我对条带API有点情况。 我有多个通过wordpress循环生成的模态表单，我试图单独为每个单独的表单付款但由于某种原因我的javascript只针对第一个表单而不是页面上的其他表单

这是生成表单的循环

<div class="col-lg-3 col-md-4 col-xs-6 col-sm-6 col-6 col-space">
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="entry-content">
        <div class="card text-center price-box">
          <div class="card-body">
            <span class="price-box__title card-title">
                <b><?php the_title() ?></b>
                <?php foreach((get_the_category()) as $category) { ?>
                  <center>
                    <?php echo $category->cat_name . ' '; ?>
                  </center>
                <?php } ?>
            </span>
            <span class="price-box__value card-text">
                $<?php echo get_the_content() ?>
            </span>
            <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal-<?php the_ID(); ?>">Buy Now</a>
          </div>
        </div>
        <?php get_template_part( 'template-parts/payment', 'form' ); ?>
    </div><!-- .entry-content -->
</div><!-- #post-<?php the_ID(); ?> -->

这是表格代码

<!-- Modal -->
<div class="modal fade" id="exampleModal-<?php the_ID(); ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="bg-primary safe-checkout">
        <br>
        <span class="secure-icon">
            <img 
                src="<?php bloginfo('template_url') ?>/img/fingerprint.svg" 
                width="32" 
                height="32">
        </span>
        <h5 class="text-white text-center">
            Safe Checkout
        </h5>
    </div>
    <br><br>
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close cancel-button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true" class="text-white">&times;</span>
        </button>
      </div>
      <?php foreach((get_the_category()) as $category) { ?>
      <center>
        <h1 class="modal-title"><?php the_title() ?> <?php echo $category->cat_name . ' '; ?></h1>
      </center>
      <?php } ?>
      <div class="modal-body">
        <form class="form-<?php the_ID(); ?>">
          <label style="position: absolute; display: none; top: -9999999px;">
            <input name="price-<?php the_ID(); ?>" id="price-<?php the_ID(); ?>" type="hidden" value="<?php echo get_the_content() ?>" style="position: absolute; display: none; top: -9999999px;" />
          </label>
          <label>
            <input name="instagram-uname-<?php the_ID(); ?>" id="insta-uname-<?php the_ID(); ?>" class="field is-empty" placeholder="zoey123" />
            <span><span><img width="24" height="24" src="<?php bloginfo('template_url') ?>/img/instagram.svg"> Instagram Username</span></span>
          </label>
      <?php if ( in_category('comments') ) { ?>
      <label>
            <textarea rows="3" cols="60" name="instagram-comments-<?php the_ID(); ?>" class="field" placeholder="Comments (1 per line)" style="max-height: 127px;" maxlength="<?php the_title() ?>"></textarea>
      <span style="height: 120px;"><span></span></span>
      </label>
      <div class="clr_100"></div>
      <?php } ?>
      <div class="clr_20"></div>
      <h6 class="sep"><span><b>Payment info</b></span></h6>
      <div class="clr_20"></div>
          <div class="row">
            <div class="col-lg-6 col-sm-12">
              <label>
            <input name="cardholder-name-<?php the_ID(); ?>" class="field is-empty" placeholder="Jane Doe" />
            <span><span><img width="30" height="30" src="<?php bloginfo('template_url') ?>/img/profile.svg"> Name</span></span>
        </label>
            </div>
            <div class="col-lg-6 col-sm-12">
              <label>
            <input class="field is-empty" type="email" placeholder="janedoe@gmail.com" />
            <span><span><img width="30" height="30" src="<?php bloginfo('template_url') ?>/img/mail.svg"> Email</span></span>
        </label>
            </div>
          </div>

          <div class="row">
            <div class="col-lg-12 col-sm-12">
        <label>
          <div id="cardnumber-element-<?php the_ID(); ?>" class="field is-empty"></div>
          <span><span><img width="32" height="32" src="<?php bloginfo('template_url') ?>/img/credit-card-back-symbol.svg"> Credit or debit card</span></span>
        </label>
      </div>
      </div>

      <div class="row">
        <div class="col-lg-8 col-8 col-sm-8">
          <label>
            <div id="card-expiry-<?php the_ID(); ?>" class="field is-empty"></div>
            <span><span><img width="32" height="32" src="<?php bloginfo('template_url') ?>/img/credit-card.svg"> Expiry Date</span></span>
          </label>
        </div>

        <div class="col-lg-4 col-4 col-sm-4">
            <label>
              <div id="card-cvc-<?php the_ID(); ?>" class="field is-empty"></div>
              <span><span><img width="32" height="32" src="<?php bloginfo('template_url') ?>/img/credit-card-with-cvv-code.svg"> CVC</span></span>
            </label>
        </div>
      </div>

      <button class="btn btn-primary btn-block btn-<?php the_ID(); ?>" type="submit">Pay $<?php echo get_the_content() ?></button>
      <div class="outcome-<?php the_ID(); ?>">
        <style type="text/css">
            .outcome-<?php the_ID(); ?> {
              float: left;
              width: 100%;
              padding-top: 8px;
              min-height: 20px;
              text-align: center;
            }

            .success-<?php the_ID(); ?>, .error-<?php the_ID(); ?> {
              display: none;
              font-size: 15px;
            }

            .success-<?php the_ID(); ?>.visible, .error-<?php the_ID(); ?>.visible {
              display: inline;
            }

            .error-<?php the_ID(); ?> {
              color: #E4584C;
            }

            .success-<?php the_ID(); ?> {
              color: #34D08C;
            }

            .success-<?php the_ID(); ?> .token-<?php the_ID(); ?> {
              font-weight: 500;
              font-size: 15px;
            }
        </style>
        <div class="error-<?php the_ID(); ?>" role="alert"></div>
        <div class="success-<?php the_ID(); ?>">
          Success! Your Stripe token is <span class="token-<?php the_ID(); ?>"></span>
        </div>
      </div>
    </form>
      </div>
      <div class="modal-footer text-center">
        <div style="width: 80%; margin: 0 auto;">
          <a href="https://stripe.com" target="_blank text-center"><img class="img-responsive" src="<?php bloginfo('template_url') ?>/img/stripe.gif" width="727" height="124" /></a>
        </div>
      </div>
    </div>
  </div>
</div>

这是生成令牌

的JavaScript

<script type="text/javascript">
var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
  var elements = stripe.elements();

  var price = document.querySelector('#price-<?php the_ID(); ?>');
  var instagramUsername = document.querySelector('#insta-uname-<?php the_ID(); ?>');


  // Card Number Element
  var cardNumber = elements.create('cardNumber', {
    iconStyle: 'solid',
    style: {
      base: {
        iconColor: '#8898AA',
        color: '#333',
        lineHeight: '36px',
        fontWeight: 300,
        fontSize: '19px',

        '::placeholder': {
          color: '#8898AA',
        },
      },
      invalid: {
        iconColor: '#e85746',
        color: '#e85746',
      }
    },
    classes: {
      focus: 'is-focused',
      empty: 'is-empty',
    },
  });
  cardNumber.mount('#cardnumber-element-<?php the_ID(); ?>');



  // Card Expiry Element
  var cardExpiry = elements.create('cardExpiry', {
    iconStyle: 'solid',
    style: {
      base: {
        iconColor: '#8898AA',
        color: '#333',
        lineHeight: '36px',
        fontWeight: 300,
        fontSize: '19px',

        '::placeholder': {
          color: '#8898AA',
        },
      },
      invalid: {
        iconColor: '#e85746',
        color: '#e85746',
      }
    },
    classes: {
      focus: 'is-focused',
      empty: 'is-empty',
    },
  });
  cardExpiry.mount('#card-expiry-<?php the_ID(); ?>');



  // Postal Code Element
  /*var postalCode = elements.create('postalCode', {
    iconStyle: 'solid',
    style: {
      base: {
        iconColor: '#8898AA',
        color: '#333',
        lineHeight: '36px',
        fontWeight: 300,
        fontSize: '19px',

        '::placeholder': {
          color: '#8898AA',
        },
      },
      invalid: {
        iconColor: '#e85746',
        color: '#e85746',
      }
    },
    classes: {
      focus: 'is-focused',
      empty: 'is-empty',
    },
  });
  postalCode.mount('#card-postal-<?php //the_ID(); ?>');*/



  // Card CVC Element
  var cardCvc = elements.create('cardCvc', {
    iconStyle: 'solid',
    style: {
      base: {
        iconColor: '#8898AA',
        color: '#333',
        lineHeight: '36px',
        fontWeight: 300,
        fontSize: '19px',

        '::placeholder': {
          color: '#8898AA',
        },
      },
      invalid: {
        iconColor: '#e85746',
        color: '#e85746',
      }
    },
    classes: {
      focus: 'is-focused',
      empty: 'is-empty',
    },
  });
  cardCvc.mount('#card-cvc-<?php the_ID(); ?>');



  var inputs = document.querySelectorAll('input.field');
  Array.prototype.forEach.call(inputs, function(input) {
    input.addEventListener('focus', function() {
      input.classList.add('is-focused');
    });
    input.addEventListener('blur', function() {
      input.classList.remove('is-focused');
    });
    input.addEventListener('keyup', function() {
      if (input.value.length === 0) {
        input.classList.add('is-empty');
      } else {
        input.classList.remove('is-empty');
      }
    });
  });

  function setOutcome(result) {
    var successElement = document.querySelector('.success-<?php the_ID(); ?>');
    var errorElement = document.querySelector('.error-<?php the_ID(); ?>');
    successElement.classList.remove('visible');
    errorElement.classList.remove('visible');

    if (result.token) {
      // Use the token to create a charge or a customer
      // https://stripe.com/docs/charges
     // axios.defaults.headers.post["Content-type"] = "application/x-www-form-urlencoded";
      axios.post('<?php bloginfo('template_url') ?>/charge.php', JSON.stringify({
        stripeToken: result.token.id,
        amount: price.value,
      }))
      .then(function (response) {
        console.log('success');
      })
      .catch(function (error) {
        console.log('failed');
      });


      successElement.querySelector('.token-<?php the_ID(); ?>').textContent = result.token.id;
      successElement.classList.add('visible');
    } else if (result.error) {
      errorElement.textContent = result.error.message;
      errorElement.classList.add('visible');
    }
  }

  cardNumber.on('change', function(event) {
    setOutcome(event);
  });

  cardExpiry.on('change', function(event) {
    setOutcome(event);
  });

  /*postalCode.on('change', function(event) {
    setOutcome(event);
  });*/

  cardCvc.on('change', function(event) {
    setOutcome(event);
  });

  document.querySelector('.form-<?php the_ID(); ?>').addEventListener('submit', function(e) {
      e.preventDefault();
      stripe.createToken(cardNumber).then(setOutcome);
  });
  document.querySelector('.form-<?php the_ID(); ?>').addEventListener('submit', function(e){
    console.log(instagramUsername.value);
  })
</script>

我相信后端工作正常，但由于某种原因，生成令牌的javascript仅从循环中的第一个表单中选择值

但这是我的charge.php

<?php
    error_reporting(E_ALL); ini_set('display_errors', 1);
    require_once('stripe-php/init.php');

    \Stripe\Stripe::setApiKey('sk_test_BQokikJOvBiI2HlWgH4olfQ2');

    $_POST = json_decode(file_get_contents('php://input'), true);


    $charge = \Stripe\Charge::create(array(
      "amount" => $_POST['price'],
      "currency" => "usd",
      "source" => $_POST['stripeToken'],
    ));
?>

我永远感激任何人让我摆脱这个烂摊子请...谢谢你

Answer 1

所以经过大量的研究后我终于得到了我的问题的答案，我将把它留在这里，以防万一有人碰到同样的问题，在这里。 首先关闭API键不应该放在循环中你可以在你的标题中修复它只是确保stripe.js URL在它之前，接下来javascript变量必须与上面的一些css类不同相同，你可以通过使用wordpress的本机功能实现这一目标

<?php the_ID(); ?>

只需将所有类和变量附加到此处即可开始