VougePay React Lib

Button.jsx

import React from 'react';

const Button = ({ image, btnClass }) =>
  (
    {
      image ? <input type='image' src={image} alt='Submit' className={btnClass} /> :
      <input type='submit' alt='Submit' className={btnClass}/>
    }
  );

Item.jsx

import React from 'react';

const Item = ({ id, name, desc, price, count: parseInt(count) }) => {
  let items;
  if (count > 1) {
    for (let i = 1; i < count; i++ ) {
      items +=
      <div>
        <input type='hidden' name={`item_${i}`} value={name} />
        <input type='hidden' name={`description_${i}`} value={desc} />
        <input type='hidden' name={`price_${i}`} value={price} />
      </div>
    }
    return (
      items
      );
  }
  
  return (
    <div>
      <input type='hidden' name={`item_${id}`} value={name} />
      <input type='hidden' name={`description_${id}`} value={desc} />
      <input type='hidden' name={`price_${id}`} value={price} />
    </div>)
}

VougePay-React-Lib.jsx

<VougePay
  v_merchant_id='qa331322179752'
  merchant_ref='234-567-890'
  memo='Bulk order from McAckney Web Shop'>

  <Item
    id='1'
    name='Face Cap'
    desc='Blue Zizi facecap'
    price='2000'
    count=5
  />
  <Button
    image='http://voguepay.com/images/buttons/buynow_blue.png'
    btnClass='vougepay-btn'
  />
</VougePay>

VougePay.jsx

import React from 'react';

const VougePay = ({ v_merchant_id, merchant_ref, memo, children }) =>
  (
    <form method='POST' action='https://voguepay.com/pay/'>
      <input type='hidden' name='v_merchant_id' value={v_merchant_id} />
      <input type='hidden' name='merchant_ref' value={merchant_ref} />
      <input type='hidden' name='memo' value={memo} />
      {children}
    </form>
  );

Can have multiple Item component