How do I setup the server-side SDK with Aurelia and PHP

az26
Contributor
Contributor

Hi all, this is the first time I am posting on a community and I'm hoping someone can help out.

 

I'm developing a website using an Aurelia front end (similar to angular using ejs) and rest APIs created in PHP.

 

I've used composer to install the PayPal SDK by following the instructions on the links below.  I am currently on the "set up transaction" page, where you create your first order (link also below).

https://developer.paypal.com/docs/checkout/reference/server-integration/setup-sdk/

https://developer.paypal.com/docs/checkout/reference/server-integration/set-up-transaction/

 

To reduce potential mistakes, for the moment, I'm using the files located in the PHP Sample folder that came with the SDK... specifically altering the samples/PayPalClient.php file (adding my client ID and secret) and the samples/CaptureIntentExamples/CreateOrder.php file (updating autoload.php path).

 

From the Aurelia front end, I've completed basic JavaScript integration and have had a test functioning (i.e. buttons render, window launches, price appears, sandbox payment completes, and the onApprove kicks out the alert.  So I know that works...

 

Now, following the instructions I'm attempting to slide in the fetch call on createOrder and I'm receiving errors whether I am on localhost or deployed to the VPS itself.  I've turned debugger on for CreateOrder and confirmed that hitting the php page directly works properly... I see all the data and the order ID in the response printing to the page.  With debugger off now, trying to launch it from my front end is not working.  Below is my code snippets and error:

 

Error

 az26_1-1617507491072.png

 

paypal-button.html

 <template>

<div id="paypal-button-container" ref="paypal"> pay pal button</div>

</template> 

 

paypal-button.js

In the below code, I've tried the current async function, without async, removing the httpClient, etc. but no change to the error.  I'm also using the "mode: 'no-cors'," because I am receiving that as an issue too.  For testing, I normally just add the headers and * it, but that appears to not make a difference.  I know sometimes if the response doesn't work properly, cors will also kick up.  It's failing on the res.json() based on some of the error messages and that "createOrder - res" is printing to the console but not "createOrder - data".

 

NOTE - I've subtracted a lot of code that doesn't apply to the issue... I've also commented out the onApprove for now.

 

 

import {HttpClient, json} from 'aurelia-fetch-client';
import { autoinject } from 'aurelia-framework';
let httpClient = new HttpClient();

@autoinject
export class paypalButton
{
   attached()
   {

    paypal.Buttons({
      createOrder: async function() {
        return await httpClient.fetch(baseUrlApi + 'api/vendor/paypal/paypayl-checkout-sdk/samples/CaptureIntentExamples/CreateOrder.php', {
            method: 'post',
            mode: 'no-cors',
            headers: {
              'content-type': 'application/json'
            }
        }).then(function(res) {
          console.log("createOrder - res");
          return res.json();
        }).then(function(data) {
          console.log("createOrder - data");
          return data.id; // Use the key sent by your server's response, ex. 'id' or 'token'
        });
      }/*,
      onApprove: function(data, actions) {
        // This function captures the funds from the transaction.
        return actions.order.capture().then(function(details) {
          // This function shows a transaction success message to your buyer.
          alert('Transaction completed by ' + details.payer.name.given_name);
        });
      }*/
    }).render('#paypal-button-container');

    }
}

 

 

The goal is to just get 1 sample working... then I can move files to the folders I want them to be in and start adjusting the content with my own order I pass in via JWT.

Any help is much appreciated!

 

 

 

Login to Me Too
0 REPLIES 0

Haven't Found your Answer?

It happens. Hit the "Login to Ask the community" button to create a question for the PayPal community.