Integrate Przelewy24 using the JavaScript SDK

1<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&components=buttons,payment-fields,marks,funding-eligibility&enable-funding=p24&currency=EUR"></script>

1paypal.Marks({
2    fundingSource: paypal.FUNDING.P24
3}).render('#p24-mark')

1paypal.PaymentFields({
2  fundingSource: paypal.FUNDING.P24,
3  /* style object (optional) */
4  style: {
5    /* customize field attributes (optional) */
6    variables: {},
7    /* set custom rules to apply to fields classes (optional) */
8    rules: {},
9  },
10  fields: {
11    /* fields prefill info (optional) */
12    name: {
13      value: "John Doe",
14    },
15    email: {
16      value: "jdoe@example.com",
17    },
18  }
19})
20.render("#p24-container");

1paypal.Marks({
2    fundingSource: paypal.FUNDING.P24
3}).render('#p24-mark')

1paypal.Buttons({
2  fundingSource: paypal.FUNDING.P24,
3  style: {
4    label: "pay",
5  },
6  createOrder() {
7    return fetch("/my-server/create-paypal-order", {
8      method: "POST",
9      headers: {
10        "Content-Type": "application/json",
11      },
12      // use the "body" param to optionally pass additional order information
13      // like product skus and quantities
14      body: JSON.stringify({
15        cart: [
16          {
17            sku: "YOUR_PRODUCT_STOCK_KEEPING_UNIT",
18            quantity: "YOUR_PRODUCT_QUANTITY",
19          },
20        ],
21      }),
22    })
23    .then((response) => response.json())
24    .then((order) => order.id);
25  },
26  onApprove(data) {
27    return fetch("/my-server/capture-paypal-order", {
28      method: "POST",
29      headers: {
30        "Content-Type": "application/json",
31      },
32      body: JSON.stringify({
33        orderID: data.orderID
34      })
35    })
36    .then((response) => response.json())
37    .then((orderData) => {
38      // Successful capture! For dev/demo purposes:
39      console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
40      const transaction = orderData.purchase_units[0].payments.captures[0];
41      console.log('Transaction Status:',  transaction.status);
42      console.log('Transaction ID:', transaction.id);
43      // When ready to go live, remove the alert and show a success message within this page. For example:
44      // const element = document.getElementById('paypal-button-container');
45      // element.innerHTML = '<h3>Thank you for your payment!</h3>';
46      // Or go to another URL:  window.location.href = 'thank_you.html';
47    });
48  },
49  onCancel(data, actions) {
50    console.log(`Order Canceled - ID: ${data.orderID}`);
51  },
52  onError(err) {
53    console.error(err);
54  }
55}).render("#p24-btn");

1paypal.Buttons({
2  fundingSource: paypal.FUNDING.P24,
3  createOrder() {
4    return fetch("/my-server/create-paypal-order", {
5      method: "POST",
6      headers: {
7        "Content-Type": "application/json",
8      },
9      // use the "body" param to optionally pass additional order information
10      // like product skus and quantities
11      body: JSON.stringify({
12        cart: [
13          {
14            sku: "YOUR_PRODUCT_STOCK_KEEPING_UNIT",
15            quantity: "YOUR_PRODUCT_QUANTITY",
16          },
17        ],
18      }),
19    })
20    .then((response) => response.json())
21    .then((order) => order.id);
22  },
23  onApprove(data) {
24    return fetch("/my-server/capture-paypal-order", {
25      method: "POST",
26      headers: {
27        "Content-Type": "application/json",
28      },
29      body: JSON.stringify({
30        orderID: data.orderID
31      })
32    })
33    .then((response) => response.json())
34    .then((orderData) => {
35      // Successful capture! For dev/demo purposes:
36      console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
37      const transaction = orderData.purchase_units[0].payments.captures[0];
38      console.log('Transaction Status:',  transaction.status);
39      console.log('Transaction ID:', transaction.id);
40      // When ready to go live, remove the alert and show a success message within this page. For example:
41      // const element = document.getElementById('paypal-button-container');
42      // element.innerHTML = '<h3>Thank you for your payment!</h3>';
43      // Or go to another URL:  window.location.href = 'thank_you.html';
44    });
45  }
46}).render('#p24-button-container');
47//This function displays payment buttons on your web page.