{"section":"tutorials","requestedLocale":"en","requestedSlug":"setting-up-payments-with-easypay","locale":"en","slug":"setting-up-payments-with-easypay","path":"docs/en/tutorials/payments/payment-settings/setting-up-payments-with-easypay.md","branch":"main","content":"On VTEX, you can integrate with the easypay payment provider. Your store can sell using easypay, MBWay, and MultiBanco through this provider.\n\nTo use easypay, you need to:\n\n- [Install the easypay app](#install-the-easypay-app)\n- [Configure the easypay app](#configure-the-easypay-app)\n- [Configure the easypay webhook](#configure-the-easypay-webhook)\n- [Configure the easypay affiliation](#configure-the-easypay-affiliation)\n- [Configure payment with Apple Pay on easypay (optional)](#configure-payment-with-apple-pay-on-easypay-optional) \n\n> ⚠️ If you are a marketplace or seller, read [Configuring payment with easypay in a marketplace](/en/docs/tutorials/setting-up-payments-with-easypay-marketplace) or [Configuring payment with easypay seller](/en/docs/tutorials/setting-up-payments-with-easypay-seller).\n\n## Install the easypay app\n\nTo install the easypay app, follow the steps below:\n\n1. In the [VTEX IO CLI](https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-install), run the command `vtex login accountname` to log in to your account.\n2. Install the easypay app using the `vtex install easypaypartnerpt.payment-provider-easypay` command. \n\n## Configure the easypay app\n\nAfter installing the easypay app, you need to configure it. To access the settings screen, follow the steps below:\n\n1. In the VTEX Admin, go to __Extensions Hub > App Management__, or type __App Management__ in the search bar at the top of the page.\n2. Find the __Easypay Payment Provider__ app and click __Settings__.\n\nConfiguration is divided in four sections:\n\n- [easypay credentials (required)](#easypay-credentials)\n- [Payment (required)](#payment)\n- [easypay checkout customization (required)](#easypay-checkout-customization)\n- [Sandbox mode](#sandbox-mode)\n\n![easypay_pt_1](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/payments/payment-settings/setting-up-payments-with-easypay_1.png)\n\n> ⚠️ You must set up the following configurations in the [easypay environment](https://backoffice.easypay.pt/). easypay controls these settings, therefore, VTEX does not guarantee that the steps below will be permanently updated. Use this document as a reference and check your [easypay environment](https://backoffice.easypay.pt/) for up-to-date information.\n\n### easypay credentials\n\nThe information in this section must be completed.\n\n__Key ID e Key Value__: easypay key value and ID.\n\n
1. In the [easypay environment](https://backoffice.easypay.pt/), click the easypay logo in the top left corner of the screen and the arrow of the desired account.\n\n![easypay_pt_2](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/payments/payment-settings/setting-up-payments-with-easypay_2.PNG)\n\n
2. Go to **Web Services > Configuration API 2.0 > Keys**.\n\n![easypay_en_3](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/payments/payment-settings/setting-up-payments-with-easypay_3.png)\n\n
3. Copy and save the **ID** and **Key** information.\n\n![easypay_en_4](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/payments/payment-settings/setting-up-payments-with-easypay_4.png)\n\n__Merchant account UID__: identification of the merchant account where purchase amounts from store sales will be deposited. If there is no separate merchant account, you can use the \"Account UID\" of the payment account.\n\n
1. In the [easypay environment](https://backoffice.easypay.pt/), click the easypay logo in the top left corner of the screen, then click the arrow on the \"MERCHANT 1\" account.\n\n![easypay_pt_5](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/payments/payment-settings/setting-up-payments-with-easypay_5.PNG)\n\n
2. Copy and save the **Account UID** information.\n\n![easypay_en_6](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/payments/payment-settings/setting-up-payments-with-easypay_6.png)\n\n__Margin account UID__: identification of the margin account. \n\n> ℹ️ This field should only be completed if the store is a marketplace and splits payments. Learn more in the [Configuring payment with easypay in a marketplace](/en/docs/tutorials/setting-up-payments-with-easypay-marketplace) article.\n\n__Refund account ID and Refund account key__: If there is no specific refund account, the __Key ID__ value must be entered in the __Refund account ID__ field, and the __Key value__ in the __Refund account key__.\n\n### Payment\n\nIn this section, you must indicate whether your store will use asynchronous and/or synchronous payments. See the easypay documentation to check the available [payment methods](https://docs.quality-utility.aws.easypay.pt/concepts/payment-methods) and their identification [acronyms](https://docs.quality-utility.aws.easypay.pt/checkout/reference).\n\n![easypay_en_7](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/payments/payment-settings/setting-up-payments-with-easypay_7.png)\n\n__Accepted asynchronous payment types__: asynchronous payment methods available to the customer. Only enter the acronyms of the asynchronous payment types, separated by commas without periods or spaces.\n\nExample:\n\n| Correct | Incorrect |\n| ---------------- | ---------------- |\n| mb,dd,vi | mb, dd, vi |\n\n> ⚠️ If you complete this field, you must also complete the **Expiration days for asynchronous payments** field.\n\n__Accepted synchronous payment types__: synchronous payment methods available to the customer. Only enter the acronyms of the synchronous payment types, separated by commas without periods or spaces.\n\nExample:\n\n| Correct | Incorrect |\n| ---------------- | ---------------- |\n| cc,mbw | cc, mbw |\n\n__Expiration days for asynchronous payments__: expiration period, in days, for asynchronous payments. Only enter the desired number of days.\n\nExample:\n\n| Correct | Incorrect |\n| ---------------- | ---------------- |\n| 10 | 10 days, Dec, or 05/10/2023 |\n\n### easypay checkout customization\n\neasypay has a native checkout layout configured in the app. See below:\n\n![easypay_en_8](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/payments/payment-settings/setting-up-payments-with-easypay_8.png)\n\nIf you want to customize easypay's native checkout, complete one or more fields in this section:\n\n- __Checkout logo URL__: logo displayed at the easypay checkout. Enter the link to the image you want to use\n- __Checkout background color__: background color. Enter the HEX code of the desired color. Native default: #ffffff.\n- __Checkout accent color__: highlight color, button pattern, and input borders. Enter the HEX code of the desired color. Native default: #0d71f9.\n- __Checkout error color__: error message color. Enter the HEX code of the desired color. Native default: #ff151f.\n- __Checkout input background color__: input background color. Enter the HEX code of the desired color. Native default: transparent.\n- __Checkout input border color__: input border color. Enter the HEX code of the desired color. Native default: the same color used in the __accent color__.\n- __Checkout input border radius__: allows you to define the rounded borders of the inputs. Enter the desired value in pixels (numbers only). Native default: 50 pixels.\n\nExample:\n\n| Correct | Incorrect |\n| ---------------- | ---------------- |\n| 35 | 35px |\n\n- __Checkout button background color__: background color of the buttons. Enter the HEX code of the desired color. Native default: the same color used in the __accent color__.\n- __Checkout button border radius__: allows you to set the rounded borders of the buttons. Enter the desired value in pixels (numbers only). Native default: 50 pixels.\n\nExample:\n\n| Correct | Incorrect |\n| ---------------- | ---------------- |\n| 30 | 30px |\n\n- __Checkout button box shadow__: option to enable or disable the button shadow.\n- __Checkout font family__: fonts used in texts. Enter the generic family name, web-safe font, or font link. Native default: Overpass. Example, correct: sans-serif, verdana, ou https://fonts.gstatic.com/s/overpass/v12/qFda35WCmI96Ajtm83upeyoaX6QPnlo6_PPbM5qKl8Kuo8AzesE.woff2\n\n- __Checkout base font size__: allows you to set the font size in the root element. Enter the desired value in pixels (numbers only). Native default: 10 pixels.\n\nExample:\n\n| Correct | Incorrect |\n| ---------------- | ---------------- |\n| 11 | 11px |\n\n> ⚠️ Do not use fonts over 12 pixels, as they can blur the layout.\n\n### Sandbox mode\n\nTo enable the development test environment, select the __Enable sandbox mode__ option. You must use test credentials.\n\nAfter completing the configuration fields, click __Save__.\n\n## Configure the easypay webhook\n\nTo configure the easypay webhook, follow the steps below:\n\n
1. In the [easypay environment](https://backoffice.easypay.pt/), click the easypay logo in the top left corner of the screen, then click the arrow of the desired account.\n\n![easypay_pt_2](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/payments/payment-settings/setting-up-payments-with-easypay_9.PNG)\n\n
2. Go to **Web Services > URL Configuration**.\n\n
3. In **URL: Notify**, use the link below, adding the name of your store.\n\n`https://{your-account-name}.myvtex.com/_v/easypaypartnerpt.payment-provider-easypay/webhook`\n\n![easypay_en_9](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/payments/payment-settings/setting-up-payments-with-easypay_10.png)\n\n
4. Click **Submit**.\n\n## Configure the easypay affiliation\n\nTo configure the easypay affiliation, follow the steps below:\n\n1. In the VTEX Admin, go to __Store Settings > Payment > Providers__, or type __Providers__ in the search bar at the top of the page.\n2. On the providers screen, click the `New Provider` button.\n3. Type the name __easypay__ in the search bar and click on the name of the provider.\n4. Complete the __App Key__ and __App Token__ fields with your easypay account information.\n5. If you wish to modify the identification name to be displayed for the easypay provider on the VTEX Admin screen, enter the information in the __Name__ field in __Basic Information__.\n6. In __Payment Control__, select whether you want to activate the provider in a test environment by clicking __Enable test mode__.\n7. If you want to use [payment split](/en/docs/tutorials/split-payment) in your store, select the option __Enable payout split and send payment recipients__ and indicate the __Accountable for payment processing charges__ and __Accountable for chargebacks__ (marketplace, sellers or marketplaces and sellers).\n8. Click `Save`.\n\n## Configure payment with Apple Pay on easypay (optional) \n\nTo process payments with Apple Pay on easypay, you must first perform configurations to enable your store in the Apple Pay environment. Learn more at [Setting up Merchant ID in Apple Pay](https://developers.vtex.com/docs/guides/setting-up-merchant-id-in-apple-pay). \n\nTo configure other payment methods that easypay will process, read the [Configuring payment conditions](/en/docs/tutorials/how-to-configure-payment-conditions) article.\n\nTo set special conditions for payment methods, read [Configuring payment special conditions](/en/docs/tutorials/special-conditions).\n\nAfter following the instructions, it can take up to 10 minutes for the easypay connector to be displayed as a payment option at your store checkout."}