Paying with iDEAL or PayPal on the web

This integration uses the JavaScript SDK to accept iDEAL payments

See a hosted version of the sample

Features:

• Accept iDEAL or PayPal payments 🏦 💶
• Localization in over 35 different languages 🌍
• Customizable styles
• Handling Webhook events ⚓️

Demo:

How to run locally

1. Clone the repo git clone [email protected]:paypal-examples/ideal-paypal-payment-js-sdk.git

2. Copy the .env.example file into a file named .env

cp .env.example .env

3. Run npm install

4. configure your .env config file with your Paypal (Sandbox) CLIENT_ID and CLIENT_SECRET

these can be obtained here

5. Update client/index.html script src clientId param

   https://www.paypal.com/sdk/js?client-id=<CLIENT_ID>&...

6. npm start.

Listen to Webhooks

1. Run npm run webhook-proxy take note of the webhookId.

2. Update your .env file WEBHOOK_ID value.

3. Restart the server npm start

 

Loading the JavaScript SDK

The sdk requires the following query params to be configured on the script src to accept ideal payments.

Param	Value
client-id	PayPal ClientId
components	buttons,fields,marks,funding-eligibility
enable-funding	ideal
currency	EUR

Example:

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

Order Payload

Please note iDEAL orders are required to be created in EUR

{
  purchase_units: [
    {
      amount: {
        currency_code: "EUR",
        value: "49.99"
      }
    }
  ],
  application_context: {
    return_url: `${window.location.origin}/success`,
    cancel_url: `${window.location.origin}/cancel`
  }
}

Components

Mark

paypal
  .Marks({
    fundingSource: paypal.FUNDING.IDEAL
  })
  .render("#ideal-mark");

PaymentFields

Render the fields to capture required customer information.

It gives the option to prefil the customer name field if this is already obtained via fields.name.value property.

paypal
  .PaymentFields({
    fundingSource: paypal.FUNDING.IDEAL,
    style: {},
    fields: {
      name: {
        value: "",
      },
    },
  })
  .render("#ideal-fields");

Style object:

const style = {
  base: {
    backgroundColor: "white",
    color: "black",
    fontSize: "16px",
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    lineHeight: "1.4",
    letterSpacing: "0.3"
  },
  input: {
    backgroundColor: "white",
    fontSize: "16px",
    color: "#333",
    borderColor: "#dbdbdb",
    borderRadius: "4px",
    borderWidth: "1px",
    padding: "1rem"
  },
  invalid: {
    color: "red"
  },
  active: {
    color: "black"
  }
}

Button

paypal
  .Buttons({
    fundingSource: paypal.FUNDING.IDEAL,
    style: {
      label: "pay"
    },
    createOrder(data, actions) {
      /* see order payload info */
      return actions.order.create(order);
    },
    onApprove(data, actions) {
       console.log("order approved")
    },
    onCancel(data, actions) {
      console.log("onCancel called");
    },
    onError(err) {
      console.error(err);
    }
  })
  .render("#ideal-btn");

 

PayPal Codespaces

PayPal codespaces require a client ID and client secret for your app.

Link to codespaces

Learn more

You can read more about codespaces in the PayPal Developer Docs.

Feedback

• To report a bug or suggest a new feature, create an issue in GitHub.
• To submit feedback, go to PayPal Developer Docs and select the "Feedback" tab.