Cannot pass variable to JS script for PayPal Payments Rest API

Question

The problem is that I cannot pass the paymentID variable that the PayPal script needs from PHP to JS. (Either this or the PHP script never runs).

I am following the steps here: https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/advanced-integration/#set-up-the-payment

and I'm stuck on step 4.

I've used the code from this tutorial: http://paypal.github.io/PayPal-PHP-SDK/sample/doc/payments/CreatePaymentUsingPayPal.html

Here is the HTML:

{% extends 'layout/master.twig' %}

{% block title %} {{ parent() }}PayPal {% endblock title %}

{% block head %}
    <script src="https://www.paypalobjects.com/api/checkout.js"></script>
{% endblock %}

{% block header %} Testing PayPal {% endblock header %}


{% block content %}

    <div id="paypal-button"></div>

{% endblock content %}


{% block scripts %}
    <script>
        paypal.Button.render({

            env: 'sandbox', // Optional: specify 'production' environment

            payment: function(resolve, reject) {

                var CREATE_PAYMENT_URL = 'http://patch-request.app/paypal/payment/create';

                paypal.request.get(CREATE_PAYMENT_URL)
                    .then(function(data) {
                        alert(data);
                        console.log(data);
                        resolve(data.paymentID);
                    })
                    .catch(function(err) {
                        alert(data);
                        console.log(data);
                        reject(err);
                    });
            },

            onAuthorize: function(data) {

                // Note: you can display a confirmation page before executing

                var EXECUTE_PAYMENT_URL = 'http://patch-request.com/paypal/execute-payment';

                paypal.request.post(EXECUTE_PAYMENT_URL,
                    { paymentID: data.paymentID, payerID: data.payerID })

                    .then(function(data) { /* Go to a success page */ })
                    .catch(function(err) { /* Go to an error page  */ });
            }

        }, '#paypal-button');
    </script>
{% endblock scripts %}

And here is the script I'm trying to run:

    public function create_payment ()
    {
        $payer = new Payer();
        $payer->setPaymentMethod("paypal");

        $item1 = new Item();
        $item1->setName('Ground Coffee 40 oz')
            ->setCurrency('USD')
            ->setQuantity(1)
            ->setSku("123123")// Similar to `item_number` in Classic API
            ->setPrice(7.5);
        $item2 = new Item();
        $item2->setName('Granola bars')
            ->setCurrency('USD')
            ->setQuantity(5)
            ->setSku("321321")// Similar to `item_number` in Classic API
            ->setPrice(2);

        $itemList = new ItemList();
        $itemList->setItems([$item1, $item2]);

        $details = new Details();
        $details->setShipping(1.2)
            ->setTax(1.3)
            ->setSubtotal(17.50);

        $amount = new Amount();
        $amount->setCurrency("USD")
            ->setTotal(20)
            ->setDetails($details);

        $transaction = new Transaction();
        $transaction->setAmount($amount)
            ->setItemList($itemList)
            ->setDescription("Payment description")
            ->setInvoiceNumber(uniqid());

//        $baseUrl = getBaseUrl();
        $baseUrl = "http://patch-request.app";
        $redirectUrls = new RedirectUrls();
        $redirectUrls->setReturnUrl("$baseUrl/ExecutePayment.php?success=true")
            ->setCancelUrl("$baseUrl/ExecutePayment.php?success=false");

        $payment = new Payment();
        $payment->setIntent("sale")
            ->setPayer($payer)
            ->setRedirectUrls($redirectUrls)
            ->setTransactions([$transaction]);

        $request = clone $payment;

        try
        {
                $payment->create($this->apiContext); //$payment is a JSON
        }
        catch (Exception $ex)
        {
            echo 'Sth went wrong';
        }

        $approvalUrl = $payment->getApprovalLink();


        return json_encode(['paymentID' => $payment->id]);
    }

Any ideas?

Answer 1

I've got no idea what templating system you're using but you could try this

{% block head %}
    <script src="https://www.paypalobjects.com/api/checkout.js"></script>
    // add it here
    <script>
        window.paymentID = '<?= getPaymentID(); ?>'; // you need to implement this
    </script>
{% endblock %}

Now you can access window.paymentID anywhere in you other JS