MyBank

DocsCurrentLast updated: May 18th 2022, @ 4:02:27 pm


MyBank is a payment method in Europe.

CountriesPayment typePayment flowCurrenciesMinimum amountRefunds
Italy (IT)bank redirectredirectEURN/AWithin 180 days

How it works

Alternative payment methods diagram
  1. Your checkout page offers alternative payment methods.
  2. Buyer provides their personal details and selects an alternative payment method from your checkout page.
  3. Buyer is transferred from your checkout page to the third-party bank to confirm the purchase.
  4. Buyer authorizes and confirms payment.
  5. Buyer returns to your site to see confirmation of purchase.
  6. Merchant initiates completion of payment. PayPal moves the funds to the merchant. Transaction shows in your PayPal account with the payment method the buyer used.

Eligibility

  • Available to merchants globally, except in Russia, Japan, and Brazil.
  • Billing agreements, multiple seller payments, and shipping callback are not supported.
  • Support for order capture only (order authorize is not supported). See authorized and captured payments.
  • Chargebacks are not supported.
  • Transaction must be an online purchase (buy online, pay in store is not supported).

Integrate

There are two integration paths you can take:

  • JS SDK integration - Merchants can collect payment information using PayPal hosted UI components, called payment fields components, for alternative payment methods.
  • Orders REST API integration - Allows you to fully customize the checkout experience.

  1. JS SDK
  2. Orders API

Use the JavaScript SDK to render payment fields and buttons and process payments with Orders API.

Buyer experience

Note: The payment button is disabled in the buyer experience demo. On button click, the user is redirected to their bank to authorize the transaction.

Know before you code

  • Complete the steps in Get started to get your sandbox account information from the Developer Dashboard:
    • Client ID
    • Client Secret
    • Business account credentials
  • Make sure the preference for receiving payments in your PayPal business account is set to accept and convert them to the default currency. To verify, in your profile select Account Settings > Payment preferences > Block payments and click Update to mark this preference.
  • This client-side and server-side integration uses the following:
  • Make sure you're subscribed to the following webhook events:
    • CHECKOUT.ORDER.APPROVED - Listen for this webhook and then capture the payment.
    • CHECKOUT.PAYMENT-APPROVAL.REVERSED - Listen for this webhook as an indication that an approved order wasn't captured within the capture window resulting in a cancellation of the order and a refund to the buyer's account. Then notify your buyer of the problem and the reversed order.
  • By adding funding sources to your checkout integration, you agree to the PayPal alternative payment methods agreement. This is in addition to the user agreement applicable to the country in which your business is physically located.

Note: Integration steps for implementing alternate payment methods are similar. If an alternate payment method has been previously integrated, most of the code may be reused.

1. Add PayPal JavaScript SDK

Add or update the JavaScript SDK script on your web page.

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

This table lists the parameters you pass to the JavaScript SDK.

Query param Default Description
client-id n/a Your PayPal REST client ID. This identifies your PayPal account and determines where transactions are paid.
components buttons A comma-separated list of components to enable. The buttons, payment-fields, marks, and funding-eligibility components are required for payment fields components.
enable-funding none Funding sources to allow from showing in the buttons and marks. 

Note: By default, PayPal JavaScript SDK provides smart logic to display only appropriate marks and buttons for the current buyer. This optional parameter bypasses the buyer country check for desired payment methods.

For example: src="https://www.paypal.com/sdk/js?....&enable-funding=ideal,bancontact"

currency USD Currency of the transaction.
locale automatic By default, PayPal detects the preferred locale for the buyer based on their geolocation and browser preferences. It is recommended to pass this parameter with a supported locale if you would like the payment fields components to render in the same language as the rest of your site. 
intent capture The funds are captured immediately while the buyer is present on your site.
commit true This indicates that the final amount won't change after the buyer returns from PayPal to your site.
vault false Displays all funding sources including those that don’t support vaulting.

See additional, optional parameters.

2. Render payment mark

You can use a mark integration for payment fields components to present the payment method options to the buyer as radio buttons.

MyBank Mark
paypal.Marks({
    fundingSource: paypal.FUNDING.MYBANK
}).render('#mybank-mark')

3. Render payment fields

Use payment fields to collect payment information from buyers. Fields dynamically render based on the selected funding source and you can customize the fields to align with your brand.

Choose from a single page checkout flow or a multi-page checkout flow.

  1. Single page
  2. Multi-page
For mybank, payment fields collect first name and last name.

If there are validation errors in the input fields, they'll show on the click of the button.

paypal.PaymentFields({
  fundingSource: paypal.FUNDING.MYBANK,
  style: {
    // style object (optional)
  },
  fields: {
    // fields prefil info (optional)
    name: {
      value: "John Doe",
    },
  }
})
.render("#mybank-container");

4. Render payment button

paypal.Buttons({
  fundingSource: paypal.FUNDING.MYBANK,
  style: {
    label: "pay",
  },
  createOrder(data, actions) {
    return actions.order.create({
      purchase_units: [{
        amount: {
          currency: 'EUR',
          value: '99.99'
        }
      }]
    });
  },
  onApprove(data, actions) {
    // see #5. Capture the transaction
  },
  onCancel(data, actions) {
    console.log(`Order Canceled - ID: ${data.orderID}`);
  },
  onError(err) {
    console.error(err);
  }
}).render("#mybank-btn");
  • createOrder

    Implement the createOrder function to allow the JavaScript SDK to submit buyer information and set up the transaction on the click of the button.

    Note: Create MyBank orders in EUR currency.

    Call actions.order.create() to set up the details of a one-time transaction, including the amount, line item details, and more.

    For the list of parameters you can pass to actions.order.create() to set up the transaction, and example responses, see Create order in the Orders v2 API reference.

    If order creation fails, the Orders API can return an error in the console.

    After order creation, orders are confirmed with buyer selected payment source. If the order cannot be processed with the selected payment source, the relevant errors are returned in the console.

  • onCancel

    Implement the optional onCancel() function to show a cancellation page or return to the shopping cart.

  • onError

    Implement the optional onError() function to handle errors and display generic error message or page to the buyers. This error handler is a catch-all. Errors at this point are not expected to be handled beyond showing a generic error message or page.

5. Capture the transaction

Implement the onApprove function, which is called after the buyer approves the transaction.

Make the capture call from your server to capture the funds from the transaction and show a message to the buyer to let them know the transaction is successful.

paypal.Buttons({
    // ...
    onApprove(data, actions) {
        fetch(`/capture/${data.orderID}`, {
          method: "post",
        })
        .then((res) => res.json())
        .then((data) => {
            console.log(data);
        })
        .catch((err) => console.error(err));
    }
})

For the capture call details and example responses, see Capture payment for order in the Orders API reference.

If order capture fails, the Orders API can return an error in the console.

6. Handle webhook events

A webhook handler is a script you create on your server that completes specific actions on webhooks that hit your listener URL.

  • We recommend subscribing to CHECKOUT.ORDER.APPROVED webhook event in case a customer accidentally closes the browser and exits the checkout process after approving the transaction through their APM but before finalizing the transaction on your site.
  • Listen for the CHECKOUT.PAYMENT-APPROVAL.REVERSED webhook as an indication that an approved order wasn't captured within the capture window resulting in a cancellation of the order and a refund the buyer's account. Then notify your buyer of the problem and the reversed order.
  • PAYMENT.CAPTURE.PENDING, PAYMENT.CAPTURE.COMPLETED, and PAYMENT.CAPTURE.DENIED webhooks indicate capture status.

See Subscribe to checkout webhooks for more information.

Here are some additional resources as you create webhook handler code:

Sample integration

See a sample MyBank integration in the PayPal GitHub repository.

Next steps