Paypal REST API Multiple Buttons on a Page

I am having an issue implementing multiple PayPal Express Checkout buttons on a single page using the REST API. This is a video purchasing site where the users will only purchase single videos so there is no need for a shopping cart that keeps track of multiple items. I simply want to list the available videos, and then display a PayPal Buy Now button next to each one. I have a loop that is pulling the video information content from my database but I can't seem to figure out why the buttons won't work.

I keep getting an error in the console stating

Error: Document is ready and element #ws_lifh1 does not exist? at https://www.paypalobjects.com/api/checkout.js:7798:54?

ws_lifh1 is the video id for each video. I get this error 4 times but each shows its proper video id in the error.

Here is an image of the page.

Here is my code that generates this

var ppbutton = paypal.Button.render( {

env: 'sandbox', // Or 'sandbox',

client: {
	sandbox: 'something',
	production: 'something'
},

commit: true, // Show a 'Pay Now' button

style: {
	label: 'buynow',
	branding: 'true',
	size: 'small', // small | medium | large | responsive
	shape: 'rect', // pill | rect
	color: 'blue' // gold | blue | silver | black
},

payment: function ( data, actions ) {
	return actions.payment.create( {
		payment: {
			transactions: [ {
				amount: {
					total: '12.95',
					currency: 'USD'
},

description: 'Video purchase from Boomer Fitness with Michael G.',
	item_list: {
		items: [ {
			name: 'Lean in Fifteen at Home #1',
			videoid: 'ws_lifh1',
			price: '12.95',
			currency: 'USD'
      } ]
		}
	} ]
	}
} );
},

onAuthorize: function ( data, actions ) {
	return actions.payment.execute().then( function ( payment ) {
		window.alert( 'payment received' );
		} );
},

onCancel: function ( data, actions ) {
  /* 
	* Buyer cancelled the payment 
	*/
},

onError: function ( err ) {
	/* 
	* An error occurred during the transaction 
	*/
	}
}, '#' + videoid );

var videolisting = document.createElement( 'div' );
videolisting.setAttribute( 'class', 'row bottom-margin' );
videolisting.innerHTML = "<div class='col-md-12'><h3>" + videoname + "</h3><h3>$ " + videoprice + "</h3><div id='" + videoid + "'></div>" + ppbutton + "</div></div>";
document.getElementById( 'container' ).appendChild( videolisting );
} );

Paypal REST API Multiple Buttons on a Page

Answers:

Tags

Recent Questions

Top Questions