Itemized PayPal Checkout using Angular (ngCart)

2019-08-13 15:00发布

问题:

I'm attempting to use PayPal to check out and show an itemized list of the products. I can get the cart to work showing a total for the amount of items added to the cart, but since they aren not itemized the seller will not know which items were ordered.

I'm using ngCart for my shopping cart. I've followed the docs and I believe that I've configured everything correctly, but when I click "checkout" using the itemized PayPal process my cart is empty in PayPal. The items in my store are listed as such:

<div class="row" ng-repeat="product in products">
  <div class="col s3 right">
    <ngcart-addtocart id="{{product._id}}" name="{{product.title}}" price="{{product.price}}" quantity-max="5" quantity="1">
      <i class="material-icons">shopping_cart</i>
    </ngcart-addtocart>
  </div>

I took a look at the PayPal docs and it appears as if ngCart is configured to provide the necessary information. Here is how the actual checkout form submits to PayPal (this is where I believe something is wrong)

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" ng-show="ngCart.getTotalItems()" target="_top">
    <input name="cmd" type="hidden" value="_cart"/>
    <input type="hidden" name="upload" value="1">
    <input name="business" type="hidden" value="storeEmail@gmail.com"/>
    <input name="lc" type="hidden" value="CA"/>
    <input name="item_name" type="hidden" value="{{ settings.paypal.item_name }}"/>
    <input name="item_number" type="hidden" value="{{ settings.paypal.item_number }}"/>
    <input name="amount" type="hidden" value="{{ ngCart.getSubTotal()}}"/>
    <input name="currency_code" type="hidden" value="{{ settings.paypal.currency_code }}"/>
    <input name="button_subtype" type="hidden" value="services"/>
    <input name="no_note" type="hidden" value="{{ settings.paypal.no_note }}"/>
    <input name="tax_rate" type="hidden" value="{{ ngCart.getTaxRate()}}"/>
    <input name="shipping" type="hidden" value="{{ ngCart.getShipping()}}"/>
    <input name="image_url" type="hidden" value="http://localhost:1337/images/logo.png"/>
    <input name="bn" type="hidden" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest"/>
    <input alt="PayPal - The safer, easier way to pay online!" border="0" name="submit" src="https://www.paypalobjects.com/webstatic/en_US/btn/btn_paynow_cc_144x47.png" type="image"/>
  </form>

After reading the PayPal docs the form fields, such as item_name for example, need to be saved as item_name_1, item_price_1, item_shipping_1, item_name_2, etc... If I hard code the values into the form then it works, but since I have multiple products I need this process to post based on the items added in ngCart, if that makes sense.

Products in Cart:

Checkout using <input name="cmd" type="hidden" value="_xclick"/> in PayPal. As you can see, this isn't itemized, but the total is correct and it recognizes the items in the cart:

Checkout using <input name="cmd" type="hidden" value="_cart"/> to itemize the cart. This is showing that the cart is empty:

I hope my description of the problem was clear. If not, please let me know and I'll provide more information. Thank you for your help.