multiple payment forms on a page?

Follow

Evan Carey

November 28, 2017 22:19

Is it possible to have more than one set of number and cvv elements on a page? Our current UI supports a group admin creating hotel reservations for small groups. The group admin may use different payment details for each person in the group and can submit them all at once. For instance, a medical practice of 4 or 5 doctors who are to attend a conference have the office manager book the group's hotel reservations but each doctor's reservation is paid with that doctor's card. Our UI has an accordion presentation of the list of doctors in one form. Each accordion section has it's own CC input subform and one submit button for the page.

0

• Official comment

  

  Permanently deleted user November 29, 2017 14:33

  Hi Evan, 

  The iFrame can only tokenize one card at a time so while you can customize the UI a fair amount, each payment method needs to be tokenized individually and the most efficient way to do that is by using an onSubmit handler for each. 

  Comment actions Permalink
• 

  Evan Carey November 29, 2017 15:45

  Hi Nicole,

  Thanks for the reply. I may not have been clear in my question. I'm not asking if I can tokenize more than one at a time. I'm asking if there can be more than one instance of a the pair of inputs (number and cvv) on a page. I've tried to initialize multiple pairs, each with unique paired values for numberEl and cvvEl, but it seems only the last pair of inputs initialized is able to accept input.

  For example: can I call

  Spreedly.init(<env key>, {'numberEl':'spreedly-number-0','cvvEl':'spreedly-cvv-0'});

  Spreedly.init(<env key>, {'numberEl':'spreedly-number-1','cvvEl':'spreedly-cvv-1'});

  and be able to enter values into inputs identified by spreedly-number-0, spreedly-cvv-0 AND spreedly-number-1, spreedly-cvv-1? I would then of course tokenize each separately. The issue I find is that only the last pair of inputs initialized are able to accept input. Is this a hard limitation or is there something I've missed that would enable more than one pair of inputs?

  0

  Comment actions Permalink
• 

  Permanently deleted user November 29, 2017 17:07

  No problem. It is possible to use more than one iFrame on a page, what you'll want to do is provide an id for each of the forms like the example below.  As far as submitting each of these at the same time, that sounds possible but, due to it being more of an edge-case, is not something that we have seen customers do before or have done ourselves so unfortunately we don't have any examples on how that could be accomplished. I hope this helps clarify - just let me know if I can do anything else for you!

  <script
        id="spreedly-iframe-1"
        data-environment-key="SPREEDLY_ENV_KEY"
        data-number-id="spreedly-number-1"
        data-cvv-id="spreedly-cvv-1">
  </script>
  <script
        id="spreedly-iframe-2"
        data-environment-key="SPREEDLY_ENV_KEY"
        data-number-id="spreedly-number-2"
        data-cvv-id="spreedly-cvv-2">
  </script>
  <script>
  Spreedly.init(SPREEDLY_ENV_KEY, {
      numberEl: 'spreedly-number-1',
      cvvEl: 'spreedly-cvv-1'
    });
  let otherSpreedlyInstance = new SpreedlyPaymentFrame();
  otherSpreedlyInstance.init(SPREEDLY_ENV_KEY, {
      numberEl: 'spreedly-number-2',
      cvvEl: 'spreedly-cvv-2'
  });
  </script>

  0

  Comment actions Permalink

Please sign in to leave a comment.