PayPal Checkout Integration with Smart Payment Buttons

Question

I'm currently working with the PHP framework Codeigniter 4.0.4 and trying to add the PayPal Checkout Intergration with Smart Payment Buttons.

I used the PayPal API as an example, but I always get an error message when I try to create an order. When I click on the PayPal button to pay, the window opens for 1-2 seconds and then closes again immediately.

Console error:

Uncaught SyntaxError: Unexpected token < in JSON at position 0

Error: Unexpected token < in JSON at position 0
    at $t.error (https://www.paypal.com/sdk/js?client-id=Af6lu4xavdi1_e_hEFLWQxUj48hq0bndx7o3RGgwNWuChHmenioXFLMnTOKt912F6zmftF1Siv9WsfCp&disable-funding=credit,card:2:59754)
    at Object.<anonymous> (https://www.paypal.com/sdk/js?client-id=Af6lu4xavdi1_e_hEFLWQxUj48hq0bndx7o3RGgwNWuChHmenioXFLMnTOKt912F6zmftF1Siv9WsfCp&disable-funding=credit,card:2:67521)
    at JSON.parse (<anonymous>)
    at o (https://www.paypal.com/sdk/js?client-id=Af6lu4xavdi1_e_hEFLWQxUj48hq0bndx7o3RGgwNWuChHmenioXFLMnTOKt912F6zmftF1Siv9WsfCp&disable-funding=credit,card:2:67380)
    at cr (https://www.paypal.com/sdk/js?client-id=Af6lu4xavdi1_e_hEFLWQxUj48hq0bndx7o3RGgwNWuChHmenioXFLMnTOKt912F6zmftF1Siv9WsfCp&disable-funding=credit,card:2:67533)
    at Cr.u.on (https://www.paypal.com/sdk/js?client-id=Af6lu4xavdi1_e_hEFLWQxUj48hq0bndx7o3RGgwNWuChHmenioXFLMnTOKt912F6zmftF1Siv9WsfCp&disable-funding=credit,card:2:72204)
    at Cr (https://www.paypal.com/sdk/js?client-id=Af6lu4xavdi1_e_hEFLWQxUj48hq0bndx7o3RGgwNWuChHmenioXFLMnTOKt912F6zmftF1Siv9WsfCp&disable-funding=credit,card:2:72341)
    at https://www.paypal.com/sdk/js?client-id=Af6lu4xavdi1_e_hEFLWQxUj48hq0bndx7o3RGgwNWuChHmenioXFLMnTOKt912F6zmftF1Siv9WsfCp&disable-funding=credit,card:2:78460
    at Function.n.try (https://www.paypal.com/sdk/js?client-id=Af6lu4xavdi1_e_hEFLWQxUj48hq0bndx7o3RGgwNWuChHmenioXFLMnTOKt912F6zmftF1Siv9WsfCp&disable-funding=credit,card:2:14069)
    at https://www.paypal.com/sdk/js?client-id=Af6lu4xavdi1_e_hEFLWQxUj48hq0bndx7o3RGgwNWuChHmenioXFLMnTOKt912F6zmftF1Siv9WsfCp&disable-funding=credit,card:2:78257

Serverside:

$clientId = getenv('paypal.CLIENT_ID');
$clientSecret = getenv('paypal.CLIENT_SECRET');

$environment = new SandboxEnvironment($clientId, $clientSecret);
$client = new PayPalHttpClient($environment);

$request = new OrdersCreateRequest();
$request->prefer('return=representation');
$request->body = [
    "intent" => "CAPTURE",
    "purchase_units" => [[
        'reference_id' => '123',
        "amount" => [
            "value" => 10,
            "currency_code" => "USD"
        ]
    ]],
    "application_context" => [
        "cancel_url" => base_url() . "/checkout",
        "return_url" => base_url() . "/checkout"
    ]
];

try {
    $response = $client->execute($request);
    return json_encode($response);
} catch (HttpException $ex) {
    echo $ex->statusCode;
    print_r($ex->getMessage());
}

Clientside:

<script type="text/javascript">
    paypal.Buttons({
        env: 'sandbox',

        style: {
            layout: 'vertical',
            size: 'responsive',
            shape: 'pill',
            color: 'blue',
            label: 'pay'
        },

        createOrder: function() {
            return fetch('/checkout/paypal', {
                method: 'post',
                headers: {
                    'content-type': 'application/json'
                }
            }).then(function(response) {
                return response.json();
            }).then(function(resJson) {
                return resJson.result.id;
            });
        }
    }).render('#paypal-button-container');
</script>

Answer 1

Try

<script type="text/javascript">
    paypal.Buttons({
        env: 'sandbox',

        style: {
            layout: 'vertical',
            size: 'responsive',
            shape: 'pill',
            color: 'blue',
            label: 'pay'
        },

        createOrder: function() {
            return fetch('/checkout/paypal', {
                method: 'post',
                headers: {
                    'content-type': 'application/json'
                }
            }).then(function(response) {
                console.log(response);
          
            });
        }
    }).render('#paypal-button-container');
</script>

what will return on Console