ngCart PayPal checkout page ask for purchase details for cart

Question

This question might be related to Itemized PayPal Checkout using Angular (ngCart)

I'm trying to use ngcart http://ngcart.snapjay.com/cart to add a shopping cart to my website.

I have a working checkout page which has an itemised list of products.

Inspecting the checkout button's element when you load up the cart view with items added to the cart gives this:

<ngcart-checkout template-url="/templates/ngCart/checkout.html" service="paypal" settings="{ url:'/shop/checkout', paypal: { business: 'paypal_email', item_number:'123', currency_code:'GBP'}}" class="ng-isolate-scope">

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" ng-show="ngCart.getTotalItems()" class="ng-pristine ng-valid">
    <input type="hidden" name="cmd" value="_xclick" autocomplete="off">
    <input type="hidden" name="business" value="paypal_email" autocomplete="off">
    <input type="hidden" name="lc" value="CA" autocomplete="off">
    <input type="hidden" name="item_name" value="" autocomplete="off">
    <input type="hidden" name="item_number" value="123" autocomplete="off">
    <input type="hidden" name="amount" value="5.7" autocomplete="off">
    <input type="hidden" name="currency_code" value="GBP" autocomplete="off">
    <input type="hidden" name="button_subtype" value="services" autocomplete="off">
    <input type="hidden" name="no_note" value="" autocomplete="off">
    <input type="hidden" name="tax_rate" value="20" autocomplete="off">
    <input type="hidden" name="shipping" value="2.5" autocomplete="off">
    <input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest" autocomplete="off">
    <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
    <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

When I click the Buy Now button I'm redirected to this page where it asks purchase details and lists the sub total before tax and shipping has been added.

In the ngCart example http://ngcart.snapjay.com/ when you checkout it goes to the standard PayPal page without asking for item details and has a Pay with Debit or Credit Card option which displays the correct total.

Does anyone know why this isn't working? I don't have a lot of experience with PayPal checkout so any help is appreciated. I was wondering if it is to do with the PayPal account itself? Does it need to be a business account with express checkout enabled?

Answer 1

The value for the parameter item_name is empty. Please make it to "Sample Product". It will redirect you to login page.

Cheers!

Answer 2

After doing some more research it looks like the ngCart is only designed to send the aggregate cart amount to PayPal and not an itemised order.

I have updated the checkout.html template to add the contents of the cart as individual items.

<div ng-if="service=='paypal'">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" ng-show="ngCart.getTotalItems()">
    <input type="hidden" name="cmd" value="_cart" />
    <input type="hidden" name="upload" value="1">
    <input type="hidden" name="business" value="{{ settings.paypal.business }}" />
    <input type="hidden" name="lc" value="CA" /> 
    <ng-form name="cartItems" ng-repeat="item in ngCart.getCart().items track by $index">
        <input type="hidden" name="item_name_{{$index+1}}" value="{{item.getName()}}" />
        <input type="hidden" name="amount_{{$index+1}}" value="{{item.getPrice()}}" />
        <input type="hidden" name="quantity_{{$index+1}}" value="{{item.getQuantity()}}" />         
        <ng-form name="shipping" ng-if="$last">
            <input type="hidden" name="item_name_{{$index+2}}" value="Shipping" />
            <input type="hidden" name="amount_{{$index+2}}" value="{{ngCart.getShipping()}}" />
            <input type="hidden" name="quantity_{{$index+2}}" value="1" />  
        </ng-form>          
    </ng-form>
    <input type="hidden" name="currency_code" value="{{ settings.paypal.currency_code }}" />
    <input type="hidden" name="button_subtype" value="services" />
    <input type="hidden" name="no_note" value="{{ settings.paypal.no_note }}" />       
    <input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest" />
    <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" />
    <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1" />
</form>

This appears to be working as I have sent a test order and received an email listing the individual items and quantities.