This is the full developer documentation for SumUp Developer # Getting started Welcome to the SumUp Developer Portal. Here you’ll find everything you need to integrate SumUp’s payment solutions into your product. The documentation is divided into several sections: * **[Quick start](/docs/quickstart/)** – set up a test account and run through a first payment in minutes. * **[Online Payments](/docs/online-payments/)** – accept card payments on the web or in mobile apps. * **[Terminal Payments](/docs/terminal-payments/)** – use SumUp card readers to take in-person payments. * **[Tools](/docs/tools/)** – explore our APIs, SDKs and other utilities. Create a [test account](https://me.sumup.com) to experiment safely and then dive into the section that best fits your use case. # Online Payments > Get started with accepting online payments. The guide will take you through creating test profile to processing your first transaction in matter of minutes. Online payments are an integral part of SumUp product portfolio. At SumUp, accepting online payments is possible through a number of different approaches, to cater every merchants’ use case. You can either use one of our out-of-the-box integrations, or build a complete and custom payments flow yourself using our APIs. Your app can communicate with SumUp via HTTP requests, all defined in our API Reference. ![Image showing integrations in SumUp](/img/guides/integrations.png) To get started, we will walk you through the options SumUp offers for managing online payments. ## Getting a test account [Section titled “Getting a test account”](#getting-a-test-account) To start testing SumUp APIs and tools without involving real money, you need to have a test account. You can create a test account from your account in the Dashboard as shown below. 1. Log in to your SumUp account. 2. Open the drop-down menu between Support and your user panel. 3. Select Test Account. Your merchant account is now switched to test mode. ![A screenshot of the account selection dropdown in the SumUp dashboard with the test account highlighted with red circle](/img/guides/test_acc.png) A screenshot of the account selection dropdown in the SumUp dashboard with the test account highlighted with red circle Once you have your test account you can begin making API calls with real data. Our test accounts **do not** process transactions with real funds. Test account has a different ID, and shows a clear warning. When you try to process a request with the value of 11 (in any currency), the test account will always fail - this is by design, to enable testing failed transactions. ![A screenshot of the dashboard with test account selected](/img/guides/test-account-warning.png) A screenshot of the dashboard with test account selected When you’re done experimenting with the test account, switch back to a regular account for business purposes. ## Authorization [Section titled “Authorization”](#authorization) All Online Payment products consume SumUp APIs, which requires a means of authorization - either an API Key or Access Token. Check the [Authorization Guide](/tools/authorization/authorization/) for details on the available authorization options in SumUp. ## Checkout Products [Section titled “Checkout Products”](#checkout-products) SumUp provides a range of checkout products for seamless integration with your website. ### SumUp Card Widget [Section titled “SumUp Card Widget”](#sumup-card-widget) For a quick and seamless integration, we’ve developed a sleek payment widget. Incorporating the [SumUp Card Widget](/online-payments/checkouts/card-widget/) only requires adding a single script to your payment page! #### Alternative Payment Methods [Section titled “Alternative Payment Methods”](#alternative-payment-methods) The Card Widget supports [Alternative Payment Methods](/online-payments/apm) (APMs), which enable you to accept payments other than traditional card schemes (Visa or Mastercard). APMs can be accessed through the [SumUp Card Widget](/online-payments/checkouts/card-widget/). Request access by contacting us via our [contact form](/contact). At SumUp you can make use of the following APMs: * Apple Pay * Bancontact * Blik * Boleto * EPS * Google Pay * iDeal * MyBank * PIX * Przelewy24 * Satispay Tip The APMs you can offer depend on the location your business is registered and operates in. ### SumUp Hosted Checkout [Section titled “SumUp Hosted Checkout”](#sumup-hosted-checkout) Hosted Checkout is an integration product that offers a complete checkout flow for payment collection. It aims at being easy to integrate and requires little to no code. The solution offers a summary of the checkout details and provides a complete flow for handling payment collection, covering the possible outcomes of payment attempts all the way to the success page. See [Hosted Checkout Documentation](/online-payments/checkouts/hosted-checkout/) for more information. ### SumUp Swift Checkout SDK [Section titled “SumUp Swift Checkout SDK”](#sumup-swift-checkout-sdk) The Swift Checkout SDK enables you to offer a complete and fast checkout experience to your end users, allowing you to collect payment, address, and contact information with a click of a button. See [Swift Checkout Documentation](/online-payments/sdks/swift-checkout/) for more information. ## Plugins [Section titled “Plugins”](#plugins) If you’re using Prestashop, Wix, or WooCommerce, good news! You can use one of our plugins to seamlessly get paid with SumUp. Please check the [Plugins section](/online-payments/plugins/) for details on each plugin. ## Custom Integrations [Section titled “Custom Integrations”](#custom-integrations) ### SumUp APIs [Section titled “SumUp APIs”](#sumup-apis) SumUp provides REST API for most of its services like creating and executing payments, storing cards for future payments, issuing refunds among others. Our API uses either API Keys or [OAuth 2.0](http://tools.ietf.org/html/rfc6749) authorization standards to authenticate applications access to its services. We also support Cross-origin resource sharing (CORS) allowing web browsers securely to consume our API from a different domain origin. The API receives requests and communicates responses mostly in [JSON](http://www.json.org) format, except for when the request needs to contain form encoded data. Typically, the requests are data objects consisting of name/value pairs sent to the SumUp API URI: **api.sumup.com** ### Receiving payments [Section titled “Receiving payments”](#receiving-payments) In order to receive payments, you need to [create a checkout](/online-payments/guides/single-payment/#1-create-a-checkout). Whether you would like to receive payments as a merchant directly, or initiate payments on a merchant’s behalf depends on the type of [authorization](/tools/authorization/authorization/) provided. Checkouts are created in a server-to-server communication. This ensures that you can keep your access token and client credentials secret and guarantees that sensitive checkout details, e.g. amount or recipient, cannot be changed. [Completing checkouts](/online-payments/guides/single-payment/#2-complete-a-checkout) could be done via your web browser or mobile application, which guarantees you do not need to worry about sensitive data, like card data, ever hitting your servers and thus avoiding the need to be PCI DSS compliant. Tip A checkout can be completed in a browser only from a domain that is present as an authorized JavaScript origin when [creating your client credentials](/tools/authorization/register-app/#3-create-oauth-client-credentials). SumUp provides flexibility to complete a checkout by offering a couple of integration approaches: * You could build a [custom card form](/online-payments/guides/single-payment/#2-complete-a-checkout) that you must submit to the SumUp servers for processing * You could use the [SumUp Card Widget](/online-payments/checkouts/card-widget/) * You could process payments with [Alternative Payment Methods](/online-payments/apm), like Boleto, Bancontact & iDeal * You could process [recurring payments](https://developer.sumup.com/online-payments/guides/recurring-payments) Once you complete the checkout, you would have processed a payment successfully to a merchant’s SumUp account. ## Contact SumUp [Section titled “Contact SumUp”](#contact-sumup) Note Do you have specific questions? Check out our [help page](/help) for the most frequently asked questions or [contact us here](/contact). # 3-D Secure flow > Learn about 3DS flow, SCA requirements, and how to handle 3DS when processing payments. Caution Affects all electronic payments accepted by merchants operating within the European Union. SumUp is supporting 3-D Secure payments for an additional layer of security when it comes to online transactions. EMVCo has developed 3D Secure 2, a new authentication protocol for payment card transactions, to meet the requirements of Strong Customer Authentication (SCA). This protocol will reduce fraud with its additional security layers, such as biometrics. Note The final deadline for implementing the SCA requirements was 31 December 2020. [SCA (Strong Customer Authentication)](https://en.wikipedia.org/wiki/Strong_customer_authentication#cite_note-2) is an obligatory security measure that relies on two-factor authentication to verify the identity of the consumer in a payment transaction. As a result, these factors are strictly consumer-based. SCA can combine two of the following three factors, which must be strictly independent of each other: * Something the customer knows (e.g. Password, PIN) * Something the customer has (e.g. Phone, Token generator) * Something the customer is (e.g. Fingerprint, Face ID) Each of these elements must be independent from each other, to ensure the security of others is not compromised in the event of a security breach. ## How it works [Section titled “How it works”](#how-it-works) For the flow to be followed, both the merchant profile and the customer credit card issuer must support 3-D Secure. The flow includes an additional step during checkout, that is shown depending on the card scheme and issuing bank. ![Challenge screen](/img/guides/challenge_screen.png) ## Integration for Single Payments [Section titled “Integration for Single Payments”](#integration-for-single-payments) To begin supporting the 3-D Secure flow, add the `redirect_url` parameter to your [create a checkout](/api/checkouts/create) request scheme. The parameter refers to a URL where the end user is redirected once the payment processing completes. Proceed with [processing the checkout](/api/checkouts/process) which will return a response object (`next_step`) containing necessary details for the following **required** step for processing the payment. Use the `next_step` content to redirect an end user to a challenge screen. The `next_step` object contains: | Parameter | Value | | -------------- | ----------------------------------------------------------------------------- | | `method` | `POST` | | `url` | `https://issuing-bank.com/acs?reqid=B69D8F090C031E959A3BB2C4D7DFE7F8F7C09B28` | | `redirect_url` | `https://mysite.com/completed_purchase` | | `mechanism` | `iframe` or `browser` | | `payload` | `object` | Caution The **payload** object may contain zero or more key-value pairs, defining the payload request to be made. All provided parameters must be passed when redirecting an end-user. As an example, the `payload` object may look like this: ```js 1 { 2 "arbitrary_param_name_1": "arbitrary_param_value_1", 3 "arbitrary_param_name_2": "arbitrary_param_value_2", 4 "arbitrary_param_name_3": "arbitrary_param_value_3", 5 "arbitrary_param_name_4": "arbitrary_param_value_4" 6 } ``` One approach for accomplishing the end user redirection is through a form: ```html 1
6 11 16 21 26
27 ``` Once the form is submitted, the end user will be redirected to their issuer’s bank authentication screen, where the end-user must provide an additional authentication (e.g. a challenge token, SMS or other data). After submitting, SumUp completes the payment and the end user is redirected to the `redirect_url` appointed at the checkout creation, through a `GET` request with the corresponding `checkout_id` query parameter. To confirm a checkout’s status, make a `GET` request to the [retrieve a checkout](/api/checkouts/get) endpoint. # Alternative Payment Methods > Learn about supported alternative payment methods, activation steps, and integration options. Alternative Payment Methods (APMs) are forms of payments that are different from standard card schemes. They offer familiar and frictionless payment experiences to your customers, while making you stand out from your competitors offering only traditional payment experiences. APMs have completely transformed how we once made online payments. For example, in the Netherlands more than half of the consumers use iDeal to pay online merchandise. The types of APMs are prepaid cards, mobile payments, e-wallets, and “buy now, pay later” installment-based approaches. ## Supported Alternative Payment Methods [Section titled “Supported Alternative Payment Methods”](#supported-alternative-payment-methods) The APMs you can offer depend on the country your business is registered and operating in. Here’s a list of the currently available APMs at SumUp: | APM | Country | | | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | - | | Apple Pay | Austria, Belgium, Brazil, Bulgaria, Chile, Croatia, Cyprus, Czech Republic, Denmark, Estonia, Finland, France, Germany, Greece, Hungary, Ireland, Italy, Latvia, Lithuania, Luxembourg, Malta, Netherlands, Norway, Poland, Portugal, Romania, Slovenia, Slovakia, Spain, Sweden, Switzerland, United Kingdom | | | Bancontact | Belgium | | | Blik | Poland | | | Boleto | Brazil | | | EPS | Austria | | | Google Pay | Austria, Belgium, Brazil, Bulgaria, Chile, Croatia, Cyprus, Czech Republic, Denmark, Estonia, Finland, France, Germany, Greece, Hungary, Ireland, Italy, Latvia, Lithuania, Luxembourg, Malta, Netherlands, Norway, Poland, Portugal, Romania, Slovenia, Slovakia, Spain, Sweden, Switzerland, United Kingdom | | | iDeal | Netherlands | | | MyBank | Greece, Italy, Spain | | | PIX | Brazil | | | Przelewy24 | Poland | | | Satispay | Italy | | ## Enabling Alternative Payment Methods [Section titled “Enabling Alternative Payment Methods”](#enabling-alternative-payment-methods) As a **sole trader** APMs are automatically enabled in your profile after completing the regular registration steps and performing a test transaction with one of our remote payment products, such as [Payment Links](https://sumup.co.uk/payment-links/), [Invoices](https://sumup.co.uk/invoices) and [Online Store](https://sumup.co.uk/online-store/). As with any other legal type, you must request the activation from our support team or via our [contact form here](/contact), providing us with your merchant ID (MXXXXX). Our team will onboard your profile and grant you access to the APMs applicable to your business location. Once your request is processed, APMs will instantly become available to you within [Payment Links](https://sumup.co.uk/payment-links/), [Invoices](https://sumup.co.uk/invoices) and [Online Store](https://sumup.co.uk/online-store/). Note At this time APMs are not available in our SumUp plugins. ## Integration [Section titled “Integration”](#integration) You can offer APMs through a number of approaches: * Through the [SumUp Payment Widget](/online-payments/checkouts/card-widget). To make APM payments successful, you must always set a `redirect_url` upon [checkout creation](/api/checkouts/create). Beyond that step, the SumUp Payment Widget will handle the rest. Note Please note that Google Pay [Terms of Service](https://payments.developers.google.com/terms/sellertos) are applied to all Google Pay transactions via SumUp Payment Widget * [API Integrations](/online-payments/apm/integration-guide/) * Through the [Swift Checkout SDK](/online-payments/sdks/swift-checkout/) * Direct Integration: * [Apple Pay](/online-payments/apm/apple-pay) * [Google Pay](/online-payments/apm/google-pay) Caution [Apple Pay](/online-payments/apm/apple-pay) and [Google Pay](/online-payments/apm/google-pay) direct integrations require domain verification in order to be implemented successfully. # Apple Pay > Learn how to integrate Apple Pay, including prerequisites, domain validation, and API calls. In this guide, you will learn how to directly integrate Apple Pay with SumUp. ## Prerequisites [Section titled “Prerequisites”](#prerequisites) * You have a merchant profile with [SumUp](https://me.sumup.com/login) and have already filled in your [profile details](https://me.sumup.com/account). * Get familiar with [Apple Pay on the Web guide](https://developer.apple.com/documentation/apple_pay_on_the_web). * Offering Apple Pay requires registering with Apple on all web domains that will expose an Apple Pay button (includes TLD and subdomains). This is a requirement for production AND test environments. * If you want to test payments without involving real funds, [create a test profile](/online-payments/#getting-a-test-account). * Complete the domain onboarding setup steps described in your Dashboard under **Settings** > **For developers** > **Payment wallets**. ![Screenshot of the dashboard Developer Settings, showing Payment wallets section that includes Apple Pay and Google Pay](/img/guides/find_payment_wallets.png) Screenshot of the dashboard Developer Settings, showing Payment wallets section that includes Apple Pay and Google Pay ## Accepting Apple Pay Payments With SumUp [Section titled “Accepting Apple Pay Payments With SumUp”](#accepting-apple-pay-payments-with-sumup) To begin your implementation, follow these steps: 1. [Create a checkout](https://developer.sumup.com/api/checkouts/create#create-a-checkout) 2. Create an [Apple Payment request](https://developer.apple.com/documentation/apple_pay_on_the_web/applepaypaymentrequest) ```js 1 const applePaymentRequest = { 2 currencyCode: "EUR", 3 countryCode: "DE", 4 merchantCapabilities: ["supports3DS"], 5 supportedNetworks: ["masterCard", "visa"], 6 total: { 7 label: "Demo", 8 amount: "0.00", 9 type: "final", 10 }, 11 }; ``` 3. Initiate an [Apple Pay session](https://developer.apple.com/documentation/apple_pay_on_the_web/applepaysession/2320659-applepaysession) and call the [begin method](https://developer.apple.com/documentation/apple_pay_on_the_web/applepaysession/1778001-begin) 4. Listen for the `onvalidatemerchant` callback and collect the `validateUrl` property. Create the following payload ```json 1 { 2 "target": "https://apple-pay-gateway-cert.apple.com/paymentservices/startSession", 3 "context": "your_domain_name" 4 } ``` and initiate a merchant session by calling ```http 1 PUT https://api.sumup.com/v0.1/checkouts/${checkoutId}/apple-pay-session ``` 5. The response from the previous step is needed to complete the merchant validation with the [`completeMerchantValidation`](https://developer.apple.com/documentation/apple_pay_on_the_web/applepaysession/1778015-completemerchantvalidation/) method 6. Submitting the payment dialogue triggers the `onpaymentauthorized` callback, this is when you need to [process the checkout](https://developer.sumup.com/api/checkouts/process#process-a-checkout). The process checkout request body needs to include a `payment_type` of `apple_pay` and an `apple_pay` object, containing the response from step 7 ```json 1 { 2 "payment_type": "apple_pay", 3 "id": "9be2da07-a7bd-4877-bc0a-e16cd909a876", 4 "amount": 12, 5 "currency": "EUR", 6 "apple_pay": { 7 "token": { 8 "paymentData": { 9 "data": "si2xuT2ArQo689SfE-long-token", 10 "signature": "MIAGCSqGSIb3DQEHA-long-signature", 11 "header": { 12 "publicKeyHash": "PWfjDi3TSwgZ20TY/A7f3V6J/1rhHyRDCspbeljM0io=", 13 "ephemeralPublicKey": "MFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAEaBtz7UN2MNV0qInJVEEhXy10PU0KfO6KxFjXm93oKWL6lCsxZZGDl/EKioUHVSlKgpsKGin0xvgldfxeJVgy0g==", 14 "transactionId": "62e0568bc9258e9d0e059d745650fc8211d05ef7a7a1589a6411bf9b12cdfd04" 15 }, 16 "version": "EC_v1" 17 }, 18 "paymentMethod": { 19 "displayName": "MasterCard 8837", 20 "network": "MasterCard", 21 "type": "debit" 22 }, 23 "transactionIdentifier": "62E0568BC9258E9D0E059D745650FC8211D05EF7A7A1589A6411BF9B12CDFD04" 24 } 25 } 26 } ``` Tip Handling the responses from the API calls should be according to our public [API contract & guidelines](https://developer.sumup.com/api) # Google Pay > Learn how to integrate Google Pay, including domain registration, payment requests, and processing. In this guide, you will learn how to directly integrate Google Pay with SumUp. This payment method is also available via the [SumUp Payment Widget](/online-payments/checkouts/card-widget/). ## Prerequisites [Section titled “Prerequisites”](#prerequisites) * You have a merchant profile with [SumUp](https://me.sumup.com/login) and have already filled in your [profile details](https://me.sumup.com/account). * If you want to test payments without involving real funds, [create a test profile](/online-payments/#getting-a-test-account). * Review [Google Pay API terms of service](https://payments.developers.google.com/terms/sellertos). * Complete the domain onboarding setup steps described in your Dashboard under **Settings** > **For developers** > **Payment wallets**. You can read Google’s tutorial [Google Pay for Payments](https://developers.google.com/pay/api/web/guides/tutorial), which covers the requirements you’re expected to follow in order to successfully offer this payment method. ![Screenshot of the dashboard Developer Settings, showing Payment wallets section that includes Apple Pay and Google Pay](/img/guides/find_payment_wallets.png) Screenshot of the dashboard Developer Settings, showing Payment wallets section that includes Apple Pay and Google Pay ## Accepting Google Pay Payments With SumUp [Section titled “Accepting Google Pay Payments With SumUp”](#accepting-google-pay-payments-with-sumup) Considering you’ve adhered to the prerequisites, the following steps will enable you to begin accepting Google Pay payments through SumUp: 1. Create a base payment request object, containing: * `tokenizationSpecification` object with the following parameters: * `gateway`- always equal to “sumup” * `gatewayMerchantId`- your SumUp merchant code * [`merchantInfo` object](https://developers.google.com/pay/api/web/reference/request-objects#MerchantInfo) with the following keys: * `merchantId`- unique identifier provided to you by Google once you register your domain with them * `merchantName`- your merchant name ```js 1 const baseRequest = { 2 apiVersion: 2, 3 apiVersionMinor: 0, 4 merchantInfo: { 5 merchantId: '123456789123456789' 6 merchantName: 'Example Merchant', 7 }, 8 allowedPaymentMethods: [ 9 { 10 type: 'CARD', 11 parameters: { 12 allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'], 13 allowedCardNetworks: ['MASTERCARD', 'VISA'], 14 }, 15 tokenizationSpecification: { 16 type: 'PAYMENT_GATEWAY', 17 parameters: { 18 gateway: 'sumup', 19 gatewayMerchantId: 'exampleGatewayMerchantId', 20 }, 21 }, 22 }, 23 ], 24 }; ``` 2. Load the [Google Pay API JavaScript library](https://developers.google.com/pay/api/web/guides/tutorial#js-load) on the web page you will offer this payment method 3. Initialize a `PaymentsClient` object for the environment you are implementing ```js 1 const paymentsClient = new google.payments.api.PaymentsClient({ 2 environment: 'TEST', 3 }); ``` 4. [Check readiness to pay](https://developers.google.com/pay/api/web/guides/tutorial#isreadytopay) with Google Pay API 5. [Launch the Google Pay button](https://developers.google.com/pay/api/web/guides/tutorial#add-button) 6. [Create a PaymentDataRequest](https://developers.google.com/pay/api/web/guides/tutorial#paymentdatarequest) using the baseRequest object and append the `transactionInfo` and `merchantInfo` objects. Your `PaymentDataRequest` should look like this: ```js 1 const paymentDataRequest = { 2 apiVersion: 2, 3 apiVersionMinor: 0, 4 merchantInfo: { 5 merchantName: 'Example Merchant', 6 }, 7 allowedPaymentMethods: [ 8 { 9 type: 'CARD', 10 parameters: { 11 allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'], 12 allowedCardNetworks: ['MASTERCARD', 'VISA'], 13 }, 14 tokenizationSpecification: { 15 type: 'PAYMENT_GATEWAY', 16 parameters: { 17 gateway: 'sumup', 18 gatewayMerchantId: 'exampleGatewayMerchantId', 19 }, 20 }, 21 merchantInfo: { 22 merchantId: 'your_merchant_id', 23 merchantName: 'your_merchant_name', 24 }, 25 transactionInfo: { 26 totalPriceStatus: 'FINAL', 27 totalPriceLabel: 'Total', 28 totalPrice: `${checkoutInfo.amount}`, 29 currencyCode: checkoutInfo.currency || 'EUR', 30 countryCode: 'DE', 31 }, 32 }, 33 ], 34 }; ``` 7. [Create a checkout](/api/checkouts/create) with SumUp 8. [Call the `loadPaymentData`](https://developers.google.com/pay/api/web/reference/client#loadPaymentData) method and pass it the `PaymentDataRequest` as an argument. This method will respond in a Promise, where if resolved you will receive a `PaymentData` object 9. [Process the checkout](/api/checkouts/process). The process checkout request body needs to include a `payment_type` of `google_pay` and a `google_pay` object, containing the response from the previous step ```json 1 { 2 "payment_type": "google_pay", 3 "id": "6te2da07-a7bd-4877-bc0a-e16cd909a876", 4 "amount": 12, 5 "currency": "EUR", 6 "google_pay": { 7 "apiVersionMinor": 0, 8 "apiVersion": 2, 9 "paymentMethodData": { 10 "description": "Visa •••• 1111", 11 "tokenizationData": { 12 "type": "PAYMENT_GATEWAY", 13 "token": "token-data" 14 }, 15 "type": "CARD", 16 "info": { 17 "cardNetwork": "VISA", 18 "cardDetails": "1111" 19 } 20 } 21 } 22 } ``` Note Handling the responses from the API calls should be according to our public [API contract & guidelines](/api) # Integration Guide > Learn about the request parameters and flows required to process alternative payment methods. ### General [Section titled “General”](#general) Alternative Payment Methods, from now on referred to as APMs. APM checkouts are very similar to normal checkouts. The biggest difference is that the customer most of the time needs to take an additional action in order to finalize the payment. Please make sure that before you read this you familiarize yourself with how [card payments](/online-payments/introduction/) are done. First, you need to know which payment methods are available to your merchant profile. To check this [create a checkout](/api/checkouts/create) and use the checkout id to fetch the list of available payment methods from the following endpoint `https://api.sumup.com/v0.1/checkouts/{checkout_id}/payment-methods`. The response will look like this ```json 1 { 2 "items": [ 3 { 4 "id": "card", 5 "name": "Credit Card" 6 }, 7 { 8 "id": "blik", 9 "name": "Blik" 10 }, 11 { 12 "id": "apple_pay", 13 "name": "Apple Pay" 14 } 15 ] 16 } ``` Note here that this is not a static list and might change from checkout to checkout as payment methods are not offered for all currencies and amounts, and we are continuously introducing new APMs you can include in your list of payment options. Our suggestion would be to handle the returned payment methods as an allowlist for this checkout, and then from this list pick all the payment methods you want/can offer. Do **not** display all methods returned if you can not handle their respective flows. The customer chooses one of the payment methods from the returned values, which should be sent as part of the process checkout request under `payment_type`. The currently available payment method ids are: `card`, `ideal`, `bancontact`, `boleto`, `eps`, `mybank`, `satispay`, `blik`, `p24`, `pix`, `qr_code_pix`, `apple_pay`, `paypal`, `google_pay`. *name* is just for display purposes. APMs differ from the behaviour of cards. There are two possible flows, which we call `artifacts` or `redirect instructions`, explained in more detail below. APMs also require different input parameters which you need to gather from the customer. The required parameters to gather and the payment method flows are listed below: | Payment method name | Parameters | Flow | | ------------------- | --------------------------------------------------- | -------- | | bancontact | First name, Last name, Country | Redirect | | blik | First name, Last name, Country, Email | Redirect | | boleto | First name, Last name, Country, Email, Address, CPF | Artifact | | eps | First name, Last name, Country, Email | Redirect | | ideal | First name, Last name, Country, Email | Redirect | | myBank | First name, Last name, Country, Email | Redirect | | p24 | First name, Last name, Country, Email | Redirect | | satispay | First name, Last name, Country, Email | Redirect | | pix | | Artifact | | qr\_code\_pix | | Artifact | The payload needs to be filled out like this: ```json 1 { 2 "payment_type": "#Payment method name", 3 "personal_details": { 4 "email": "#Email", 5 "first_name:": "#First Name", 6 "last_name": "#Last Name", 7 "tax_id": "#CPF", 8 "address": { 9 "country": "#Country", 10 "city": "#Address", 11 "line1": "#Address", 12 "postal_code": "#Address", 13 "state": "#Address" 14 } 15 } 16 } ``` ### Redirect Flow [Section titled “Redirect Flow”](#redirect-flow) In the redirect flow when the checkout is processed you will receive the state “PENDING” and the response will include a `next_step` parameter, this means an additional action for the processing is needed. The response will look something like this: ```json 1 { 2 ... 3 "status": "pending", 4 "next_step": { 5 "url": "https://apm-redirect-link", 6 "method": "POST", 7 "payload": { 8 "....": "..." 9 } 10 }, 11 ... 12 } ``` Most of the time this is a simple redirect to a 3rd party page, like Blik, where the customer can pay. But in this example, you can also see that this might be a POST request. For all calls, you should make sure that the payload is included and the appropriate method is used. Once the customer completes the necessary actions on the page they will be redirected to the `redirect_url` specified under the [create checkout request](/api/checkouts/create). Now you can retrieve the final status via a GET [checkout call](/api/checkouts/get/) request. ### Payment Method Artifacts [Section titled “Payment Method Artifacts”](#payment-method-artifacts) Payment method artifacts are images, pdfs etc. which the customer gets in order to pay. Currently, we have 3 payment methods which have artifacts: `boleto`, `pix` and `qr_code_pix`. Examples of the type of information to expect can be found below: **boleto:** ```json 1 { 2 "boleto": { 3 "barcode": "23790001246004987209031123456704579990000010000", 4 "url": "https://api.sumup.com/v0.1/checkouts/19c11c6c-be1d-4dd6-b718-2798878117cb/boletos/1044833949", 5 "valid_until": "2022-02-01T17:57:10.442+00:00", 6 "artefacts": [ 7 { 8 "name": "invoice", 9 "content_type": "application/pdf", 10 "location": "https://homolog.meiosdepagamentobradesco.com.br/apiboleto/Bradesco?token=bWJvYXpkc1hXRzdhRVkyUUFGZUV4T25NYjBVVEZrNG93Y3RKLzM4cTh5dWdDWEh5dDQyTXN6ZHl5NFdjaHBkZg..", 11 "created_at": "2022-01-21T17:57:10.443+00:00" 12 }, 13 { 14 "name": "code", 15 "content_type": "text/plain", 16 "location": "https://api.sumup.com/v0.1/artefacts/5266b29e-625b-43c0-a74a-8985ea3acd8a/content", 17 "content": "23790001246004987209031123456704579990000010000", 18 "created_at": "2022-01-21T17:57:10.445+00:00" 19 } 20 ] 21 } 22 } ``` **pix:** ```json 1 { 2 "pix": { 3 "artefacts": [ 4 { 5 "name": "barcode", 6 "content_type": "image/jpeg", 7 "location": "https://api.sumup.com/v0.1/artefacts/ee69508f-1b16-4ead-8416-8d2085933e6f/content", 8 "created_at": "2021-10-12T22:06:46.327+00:00" 9 }, 10 { 11 "name": "code", 12 "content_type": "text/plain", 13 "location": "https://api.sumup.com/v0.1/artefacts/1e1e5130-17d1-495a-8e36-2a50d40dacde/content", 14 "content": "00020126580014br.gov.bcb.pix0136a4fac492-d03b-45a8-bd43-c3f23d4bac68520400005303986540520.005802BR5916Priscila Manhaes6009Sao Paulo62290525SUMUP202110122206453822986304A61E", 15 "created_at": "2021-10-12T22:06:46.326+00:00" 16 } 17 ] 18 } 19 } ``` **qr\_code\_pix:** ```json 1 { 2 "qr_code_pix": { 3 "artefacts": [ 4 { 5 "name": "barcode", 6 "content_type": "image/jpeg", 7 "location": "https://api.sam-app.ro/v0.1/artefacts/ee69508f-1b16-4ead-8416-8d2085933e6f/content", 8 "created_at": "2021-10-12T22:06:46.327+00:00" 9 }, 10 { 11 "name": "code", 12 "content_type": "text/plain", 13 "location": "https://localhost:3000/v0.1/artefacts/1e1e5130-17d1-495a-8e36-2a50d40dacde/content", 14 "content": "00020126580014br.gov.bcb.pix0136a4fac492-d03b-45a8-bd43-c3f23d4bac68520400005303986540520.005802BR5916Priscila Manhaes6009Sao Paulo62290525SUMUP202110122206453822986304A61E", 15 "created_at": "2021-10-12T22:06:46.326+00:00" 16 } 17 ] 18 } 19 } ``` Note that the major difference between `qr_code_pix` and `pix` itself is that `pix` will be paid directly into the merchant’s SumUp bank account if they have one. `qr_code_pix` will be paid out with the normal payout process and incurs a fee. For all artifact payments, you need to provide the customer with the artifact and wait for the checkout to eventually complete. Once the user has paid, you can retrieve the final status via a GET [checkout call](/api/checkouts/get/). # Payment Widget > Explore the SumUp Payment Widget and how to mount and configure it on your site. ## About Payment Widget [Section titled “About Payment Widget”](#about-payment-widget) SumUp provides the Payment Widget for easier processing of checkouts on your website, solving multiple issues for you as a merchant, including PCI and PSD2 compliance, while offering a number of customization options. The Payment Widget lets you collect card and alternative payment method information from your customers. For the card method, the Payment Widget dynamically recognizes the card brand and shows the respective brand icon. A secure HTTPS connection is used to submit the payment information. To ensure an uninterrupted experience, without browser warnings on content being served through non-secure web pages, we highly recommend you serve your page containing the payment data form via HTTPS as well. ## Prerequisites [Section titled “Prerequisites”](#prerequisites) Payment Widget is available to all SumUp merchants and getting started with it is really easy! The only requirement to use Payment Widget is the ability to create online checkouts [using SumUp checkout API](/api/checkouts/create). SumUp API requires authorization with an API Key or Access Token - see the [Authorization Guide](/tools/authorization/authorization/) for details. ## Compliance [Section titled “Compliance”](#compliance) ### Payment Card Industry [Section titled “Payment Card Industry”](#payment-card-industry) By using SumUp’s Payment Widget for your business, you comply with the Payment Card Industry (PCI) standards and you do not need to worry about storing or sending sensitive information such as card details to our servers. ### Payment Services Directive 2 [Section titled “Payment Services Directive 2”](#payment-services-directive-2) Strong Customer Authentication (SCA) is part of a Payment Services Directive (PSD) 2 regulation in Europe which requires changes to how customers authenticate online payments. To ensure that SCA requirements are met, card transactions need to use two-factor authentication like 3D Secure where customers are typically directed to their bank’s website to approve the payment, or a code is sent to their phone, or they need to confirm the payment through the banking app on their phone. SumUp’s card widget is PSD2 SCA compliant and supports 3D Secure 2, provided the individual customers’ banks support it. In cases where they don’t, the authentication falls back to 3D Secure 1. Regardless of the version of 3D Secure, these additional security layers reduce fraud while ensuring a seamless checkout experience for customers. ## Integration [Section titled “Integration”](#integration) 1. In order to integrate the Payment Widget on your website, you simply need to include the `sdk.js` script on your payment page. ```js 1 ``` 2. Once the script is loaded, you have access to a global variable `SumUpCard`, that has a `mount` method which renders the available payment methods. 3. [Create a checkout](/api/checkouts/create) and copy the returned `id`. 4. Pass the returned `id` from the checkout response to the widget component. ```html 1
2 6 ``` The Payment Widget makes a request to execute the checkout and after the request is completed, you get a response based on the callback function configured. As a result of successful integration, you can see the following component: You can experience the payment widget's functionality by using the interactive demo below (no real charges will occur) ## Configurations [Section titled “Configurations”](#configurations) The Payment Widget allows you to customize certain properties on the card display. Listed below are the available configuration properties. If you wish to override the default settings, add your own configuration property-value pairs to the `SumUpCard.mount` method. ```js 1 SumUpCard.mount({ 2 checkoutId: "...", 3 // 'config-name': 'config-value' 4 }); ``` | Property Name | Description | Value | Default Value | Required | | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | -------- | | checkoutId | The unique ID you receive once you [create a checkout](/online-payments/guides/single-payment/#1-create-a-checkout). | `string` | *no default value* | yes | | onResponse | The callback function that will be called when you receive a response from the payment form. The first parameter is one of the following:- `sent` - the form is sent to the server for processing. The second parameter contains information about the last four digits of the card’s number and the card’s scheme. - `invalid` - trying to submit the form but there are validation errors. - `auth-screen` - the user is prompt to authenticate the payment. - `error` - the server responded with error. The second parameter gives more information about the error. - `success` - successful result returned by the checkout endpoint **which does not always mean the transaction was successful**. We recommend verifying the [checkout status](/api/checkouts/get) on your server. The second parameter contains the response from the [endpoint](/api/checkouts/process). - `fail` - failed result returned by the checkout endpoint, can occur when the user cancels the payment form or the session has timed out. | `function` | `null` | no | | onLoad | The callback function that will be called when the card widget is loaded. | `function` | `null` | no | | onPaymentMethodsLoad | The callback is called when the payment methods are loaded for the given `checkoutId`. Usually used for when the host page needs to change depending on the payment methods available. Payment methods can be filtered in order to limit those shown by the widget. `return` the list of payment methods for the widget to render as an *Array of Strings*. E.g. to show only Boleto, when available: `() => ['boleto']`; | `function` | `null` | no | | onChangeInstallments\* | The callback function that will be called when the user changes the dropdown for installments. The first and only parameter will be the number of selected installments. (`showInstallments` must be enabled). | `function` | `null` | no | | showSubmitButton | Displays or hides the form’s submit button. | `boolean` | `true` | no | | showFooter | Displays or hides “Powered by SumUp” label. | `boolean` | `true` | no | | showInstallments\* | Displays or hides a dropdown for choosing installments. Once enabled this overrides any value of the configuration `installments` and will not display `amount` on the submit button. | `boolean` | `false` | no | | showZipCode\*\* | Displays or hides ZIP code input field. It is mandatory for merchant users from USA. | `boolean` | `false` | no | | showEmail | Displays or hides email input field. At some time in the future it’ll be a mandatory field for every integrator because of the [SCA](https://en.wikipedia.org/wiki/Strong_customer_authentication). | `boolean` | `false` | no | | email | Alternative way (to `showEmail`) to pass user’s email if for example you know it from a previous step in your application. This configuration doesn’t display additional input fields. If for some reason both `showEmail` and `email` are passed the `email` will have no effect over the displayed input field. | `string` | `null` | no | | installments\* | The number of installments with which the transaction should be processed. | `number` \[1 .. 12] | `null` | no | | maxInstallments\* | The maximum amount of installments in the selector displayed by the widget. | `number` \[1 .. 12] | `12` | no | | id | `id` of the element that you wish to render the card widget in. *Example:* `
` | `string` | `"sumup-card"` | no | | donateSubmitButton | Changes the text of the submit button to “Donate”. | `boolean` | `false` | no | | amount | The `amount` you want to be displayed on the submit button. *Requires* `currency` *and* `locale` *to take effect.* | `string` | `null` | no | | currency | The `currency` for the `amount` you want to be displayed on the submit button. | One of: `"EUR"`, `"BGN"`, `"BRL"`, `"CHF"`, `"CZK"`, `"DKK"`, `"GBP"`, `"HUF"`, `"NOK"`, `"PLN"`, `"SEK"`, `"USD"` | `null` | no | | locale | Translates all texts into the given locale. Also specifies the formatting of the `amount` and `currency`. | One of: `"bg-BG"`, `"cs-CZ"`, `"da-DK"`, `"de-AT"`, `"de-CH"`, `"de-DE"`, `"de-LU"`, `"el-CY"`, `"el-GR"`, `"en-GB"`, `"en-IE"`, `"en-MT"`, `"en-US"`, `"es-CL"`, `"es-ES"`, `"et-EE"`, `"fi-FI"`, `"fr-BE"`, `"fr-CH"`, `"fr-FR"`, `"fr-LU"`, `"hu-HU"`, `"it-CH"`, `"it-IT"`, `"lt-LT"`, `"lv-LV"`, `"nb-NO"`, `"nl-BE"`, `"nl-NL"`, `"pt-BR"`, `"pt-PT"`, `"pl-PL"`, `"sk-SK"`, `"sl-SI"`, `"sv-SE"` | `"en-GB"` | no | | country | Sets the country where the user account is from. | One of: `"AT"`, `"BE"`, `"BG"`, `"BR"`, `"CH"`, `"CL"`, `"CO"`, `"CY"`, `"CZ"`, `"DE"`, `"DK"`, `"EE"`, `"ES"`, `"FI"`, `"FR"`, `"GB"`, `"GR"`, `"HR"`, `"HU"`, `"IE"`, `"IT"`, `"LT"`, `"LU"`, `"LV"`, `"MT"`, `"NL"`, `"NO"`, `"PL"`, `"PT"`, `"RO"`, `"SE"`, `"SI"`, `"SK"`, `"US"` | `null` | no | | googlePay | Required for accepting payments with the widget via Google Pay: - **`merchantId`** is a value provided by Google [after registration](https://developers.google.com/pay/api/web/guides/setup#registration). (not to be confused with your SumUp `merchantCode`) - **`merchantName`** is visible to the customer on the Google Pay payment flow.For more details check [Google Pay **`merchantInfo`** documentation](https://developers.google.com/pay/api/web/reference/request-objects#MerchantInfo). | `{merchantId: string, merchantName: string}` | `null` | no | *\* Installments are available only to merchant users in Brazil.*\ *\*\* ZIP code is required only for merchant users in the USA.* ## Methods [Section titled “Methods”](#methods) | Name | Description | Parameters | Return Type | | ------- | ----------------------------------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `mount` | Initializes and renders the payment form. | JSON object with a [configuration](#configurations). | Returns object that contains three methods: `submit`, `unmount` and `update`.- `submit()` method will submit the form. - `unmount()` method will destroy the card. - `update({})` method will dynamically change some configurations, it accepts one argument which has to be an object with at least one of the following configuration keys: `checkoutId`, `email`, `amount`, `currency` or `installments`. | ## Alternative Payment Methods [Section titled “Alternative Payment Methods”](#alternative-payment-methods) Depending on the country a merchant is registered in, [Alternative Payment Methods (APMs)](/online-payments/apm) are available for accepting payments from your customers. Please note, the `show*` configuration properties from the [widget configurations](#configurations) do not apply to APMs. The APMs will only render fields applicable to the respective payment method. You can begin offering APMs to your customers, once you are onboarded as a merchant. Request assistance with getting onboarded for APMs through our [contact form](/contact). Note Instalments are not applicable to Alternative Payment Methods. ## Custom Styling [Section titled “Custom Styling”](#custom-styling) Custom styling to most of the SumUp Payment Card Widgets’ elements is enabled by querying the `data-sumup-id` attribute. To get all elements with the `data-sumup-id` attribute, query the DOM with `document.querySelectorAll('[data-sumup-id]')`. Here’s an example of updating styles for one of the queryable elements: ```css 1 [data-sumup-id="widget__container"] { 2 color: red; 3 line-height: 18px; 4 } ``` You can also style child elements to those with the `data-sumup-id`, by chaining their tag or other uniquely identifiable attribute. Elements like Payment Selector have some additional items you can query to extend your customisations. To style a specific Payment Selector, you need to appoint the `data-sumup-item=${payment.id}`. ```css 1 [data-sumup-id="payment_option"][data-sumup-item="blik"] { 2 display: none; 3 } ``` ## Using your own submit button [Section titled “Using your own submit button”](#using-your-own-submit-button) If you need to use your own submit button you can achieve this by following the example below: ```html 1 2 ``` ## Handling strict Content Security Policies [Section titled “Handling strict Content Security Policies”](#handling-strict-content-security-policies) Pages with strict [Content Security Policies](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) (CSP), may experience issues with styles or images when rendering the SumUp Payment Widget. This section contains the necessary adjustments to render the Payment Widget properly. To confirm your issue is related to CSP, check your browser’s console for an error message of this nature: ```text 1 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' \*\*\* Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution. ``` ### Required Configurations [Section titled “Required Configurations”](#required-configurations) In order to properly render the card widget with CSP in place, you must whitelist the following URLs for your application: | Content Type | URL | | ------------ | ------------------------------------- | | SDK & API | ’https\://\*.sumup.com’ | | Images | ’data:’, ‘’ | Additionally to the above, `nonce` is required to make inline styles work on your host page. For more information view [the CSP docs](https://content-security-policy.com/nonce/). Here’s an example implementation with nonce: ```js 1 const express = require("express"); 2 const app = express(); 3 const http = require("http"); 4 const server = http.createServer(app); 5 6 const port = process.env.PORT || 4000; 7 8 const crypto = require("crypto"); 9 10 // Resources 11 const apisToConnect = ["https://gateway.sumup.com", "https://api.sumup.com"]; 12 13 const imagesResources = [ 14 "data:", // inline icons 15 "https://static.sumup.com", 16 // For generated barcodes 17 18 "https://api.sumup.com", 19 ]; 20 21 const scriptsResources = [ 22 "https://gateway.sumup.com", 23 // PLUS nonce-$HASH 24 ]; 25 26 const stylesResources = [ 27 // nonce-$HASH 28 ]; 29 30 const framesResources = ["https://gateway.sumup.com"]; 31 32 app.get("/", (req, res) => { 33 const nonce = crypto.randomBytes(16).toString("base64"); 34 res.setHeader( 35 "Content-Security-Policy", 36 `default-src 'self';` + 37 ` connect-src 'self' ${apisToConnect.join(" ")};` + 38 ` img-src 'self' ${imagesResources.join(" ")};` + 39 ` script-src 'self' ${scriptsResources.join(" ")} 'nonce-${nonce}';` + 40 ` style-src 'self' 'nonce-${nonce}';` + 41 ` frame-src 'self' ${framesResources.join(" ")};`, 42 ); 43 44 // 45 res.send(` 46

Test CSP

47
Test using generated nonce: ${nonce}
48
49 59 See without nonce 60
Footer
61 `); 62 }); 63 64 server.listen(port, () => { 65 console.log("listening on:", port); 66 }); ``` If you continue to experience issues with rendering the Payment Widget, reach out to our support through this [contact form](/contact). # Hosted Checkout > Learn about Hosted Checkout and how configure the fully hosted payment experience. ## About Hosted Checkout [Section titled “About Hosted Checkout”](#about-hosted-checkout) Hosted Checkout is an integration product that offers a complete checkout flow for payment collection. It’s called “Hosted Checkout”, because SumUp renders and hosts the entire checkout UI, which your customers can access via URL returned by our checkout API. The hosted checkout page aims at being easy to integrate and requires little to no code, offering a summary of the checkout details and provides a complete flow for handling payment collection, covering the possible outcomes of payment attempts all the way to the success page. All SumUp payment methods are available in Hosted Checkout, according to availability per merchant. ![A screenshot of the Hosted Checkout form showing available payment options, including Google Pay, Apple Pay, and card payment](/img/guides/hosted_checkout_landing_page.png) A screenshot of the Hosted Checkout form showing available payment options, including Google Pay, Apple Pay, and card payment ## Prerequisites [Section titled “Prerequisites”](#prerequisites) Hosted Checkouts is available to all SumUp merchants and getting started with it is really easy! The only requirement to access Hosted Checkout is the ability to create online checkouts [using SumUp checkout API](/api/checkouts/create), which returns the hosted checkout URL. SumUp API requires authorization with an API Key or Access Token - see the [Authorization Guide](/tools/authorization/authorization/) for details. ## Accessing Hosted Checkout [Section titled “Accessing Hosted Checkout”](#accessing-hosted-checkout) Once you’re able to create checkouts via API calls, you can opt-in for Hosted Checkout by providing an extra parameter to your POST request payload. The parameter name should be `hosted_checkout` and the value should be an object with the following structure: `{ "enabled": true }`. The response should then include the Hosted Checkout properties: * `hosted_checkout` is returned as provided in the request * `hosted_checkout_url` provides the URL of the page handling the payment flow 1. Send a request with the `"hosted_checkout": { "enabled": true }` in the body. ```bash 1 curl -X POST https://api.sumup.com/v0.1/checkouts \ 2 -H "Content-Type: application/json" \ 3 -H "Authorization: Bearer $SUMUP_API_KEY" \ 4 -d '{ 5 "amount": 12.00, 6 "checkout_reference": "b50pr914-6k0e-3091-a592-890010285b3d", 7 "currency": "EUR", 8 "description": "A sample checkout", 9 "merchant_code": "MCXXXXXX", 10 "hosted_checkout": { "enabled": true } 11 }' ``` The response body contains the `hosted_checkout` and `hosted_checkout_url` parameters: ```json 1 { 2 "amount": 12, 3 "checkout_reference": "b50pr914-6k0e-3091-a592-890010285b3d", 4 "checkout_type": "checkout", 5 "currency": "EUR", 6 "date":"2000-01-01T12:49:24.899+00:00", 7 "description": "A sample checkout", 8 "id": "64553e20-3f0e-49e4-8af3-fd0eca86ce91", 9 "merchant_code": "MCXXXXXX", 10 "merchant_country": "DE", 11 "merchant_name": "Sample Shop", 12 "purpose": "CHECKOUT", 13 "status": "PENDING", 14 "transactions": [], 15 "hosted_checkout": { "enabled": true }, 16 "hosted_checkout_url": "https://checkout.sumup.com/pay/8f9316a3-cda9-42a9-9771-54d534315676" 17 } ``` 2. Use the payment page provided under `hosted_checkout_url` to complete the flow you’re building. See [Configuring Hosted Checkout](#configuring-hosted-checkout) for more information. Note Each Hosted Checkout session lasts for 30 minutes, after which end users are presented with a “not found” page upon access attempts. ## Configuring Hosted Checkout [Section titled “Configuring Hosted Checkout”](#configuring-hosted-checkout) ### Redirecting users after successful payment [Section titled “Redirecting users after successful payment”](#redirecting-users-after-successful-payment) Hosted Checkout is meant to suit a broad range of use cases, from a simple self-contained payment solution, to a checkout step integrated within a longer flow. When creating a checkout, simply provide a `redirect_url` parameter to include a redirect link in the success page, under a “Redirect to merchant website” button. Note Differently from what’s stated in our [API docs](/api/checkouts/create), the absence of this parameter does not affect the availability of payment methods in Hosted Checkouts. ## Hosted Checkout status pages [Section titled “Hosted Checkout status pages”](#hosted-checkout-status-pages) With Hosted Checkout, your payment flow is covered from start to finish. All successful payments are presented with a success page, informing users of the completed payment. Hosted Checkout also accommodates other payment outcomes: * Successful payments. This page will include the “Back to merchant website” button only if the `redirect_url` was provided at checkout creation. ![A screenshot of the Hosted Checkout payment successful confirmation form]() A screenshot of the Hosted Checkout payment successful confirmation form * Failed payments will include express checkout payment methods for a quick retry. ![A screenshot of the Hosted Checkout payment failed form]() A screenshot of the Hosted Checkout payment failed form * Expired session page will be shown for all unpaid checkouts after session expiration or checkout expiration (currently 30 minutes). ![A screenshot of the Hosted Checkout session expiry form]() A screenshot of the Hosted Checkout session expiry form * Not found page, for all URLs that do not match any existing session in our system ![A screenshot of the Hosted Checkout page not found form]() A screenshot of the Hosted Checkout page not found form Caution Hosted Checkout is currently in beta and may be subject to change. We’re currently working on new features, so keep an eye on this page as we’ll continue to add features in the upcoming months! Feel free to reach out with feature requests via our [contact form](/contact). # Custom Integrations > Introduces the custom integration guides and prerequisites for building with the SumUp SDKs and APIs. Guides in this section will walk you through basic usage of SumUp APIs, which allow you to develop a custom integration in case SumUp integrations don’t fully support your use case. ## Getting a test account [Section titled “Getting a test account”](#getting-a-test-account) To start testing SumUp APIs and tools without involving real money, you need to have a test account. You can create a test account from your account in the Dashboard as shown below. 1. Log in to your SumUp account. 2. Open the drop-down menu between Support and your user panel. 3. Select Test Account. Your merchant account is now switched to test mode. ![A screenshot of the account selection dropdown in the SumUp dashboard with the test account highlighted with red circle](/img/guides/test_acc.png) A screenshot of the account selection dropdown in the SumUp dashboard with the test account highlighted with red circle Once you have your test account you can begin making API calls with real data. Our test accounts **do not** process transactions with real funds. Test account has a different ID, and shows a clear warning. When you try to process a request with the value of 11 (in any currency), the test account will always fail - this is by design, to enable testing failed transactions. ![A screenshot of the dashboard with test account selected](/img/guides/test-account-warning.png) A screenshot of the dashboard with test account selected When you’re done experimenting with the test account, switch back to a regular account for business purposes. SumUp provides SDKs for [PHP](https://github.com/sumup/sumup-ecom-php-sdk) and [Go](https://github.com/sumup/sumup-go). # Recurrent Payments > Describes how to set up recurring payments with customer tokens, mandates, and 3DS-compliant flows. ## Prerequisites [Section titled “Prerequisites”](#prerequisites) * You have completed the [card tokenization](/online-payments/guides/tokenization-with-payment-sdk) for a customer * You have an API Key. For more details see the [Authorization Guide](/tools/authorization/authorization/#api-keys). * You have control over the backend server to retrieve data securely. ## Overview [Section titled “Overview”](#overview) To ease the subsequent payments event, an initial checkout is authenticated according to 3DS checks. All following checkouts refer to the initial one in terms of 3DS authentication. You will go through the following steps: 1. [Set up a checkout session](#setting-up-checkout-session) 2. [Process checkout](#processing-checkout) 3. [Retrieve the checkout](#retrieving-checkout) 4. [Process future subsequent payments with a token](#processing-subsequent-payments) ## Setting up Checkout Session [Section titled “Setting up Checkout Session”](#setting-up-checkout-session) The flow is initiated with the `create a checkout` endpoint. It is important to pass the `customer_id` parameter in this step, for future linking to a payment instrument, ideal for quickly creating and processing later payments. Additionally, a `purpose` parameter is passed to indicate the payment type as **recurrent** and process an authorization charge of the checkout amount indicated, **which is instantly reimbursed**. ```json 1 { 2 ... 3 "purpose": "SETUP_RECURRING_PAYMENT" 4 ... 5 } ``` The initial checkout may be subject to the 3DS challenge, depending on multiple factors described briefly [here](/online-payments/features/3ds/). Sample request available in our [API Reference](/api/checkouts/create). ```json 1 { 2 "checkout_reference": "CO746453", 3 "amount": 5, 4 "currency": "EUR", 5 "merchant_code": "ME7RMQN3", 6 "description": "Sample request", 7 "return_url": "http://example.com", 8 "customer_id": "DC000101", 9 "purpose": "SETUP_RECURRING_PAYMENT" 10 } ``` ### Processing Checkout [Section titled “Processing Checkout”](#processing-checkout) A `mandate` object must be passed at checkout processing stage. This object indicates that a customer has given consent to store their payment details for recurrent payments. You need to handle consent, 3DS flow and PCI/DSS compliance yourself in case of recurring payments, and by passing the `mandate` object, you assert that you have done so. Depending on the local region regulations, this request may result in a 3DS redirection step, which you will need to handle accordingly. If you want to test 3DS flow, you can request SumUp to enable 3DS on your test account. ```json 1 { 2 "payment_type": "card", 3 "installments": 1, 4 "card": { 5 "name": "FIRSTNAME LASTNAME", 6 "number": "4111111111111111", 7 "expiry_year": "2023", 8 "expiry_month": "01", 9 "cvv": "123", 10 "zip_code": "12345" 11 }, 12 "mandate": { 13 "type": "recurrent", 14 "user_agent": "Chrome: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36.", 15 "user_ip": "2001:0db8:85a3:0000:0a00:8a2e:0370:7300" 16 } 17 } ``` ### Retrieving Checkout [Section titled “Retrieving Checkout”](#retrieving-checkout) If you have successfully processed the checkout, a token representing a payment instrument is created. You can [retrieve the checkout](/api/checkouts/get) to find the token within a `payment_instrument` object. ```json 1 { 2 "id": "cd36780e-f43d-4f22-1i9e-e32a1a1bafc8", 3 "checkout_reference": "0BYNWLYC7KV", 4 "amount": 3.51, 5 "currency": "EUR", 6 ... 7 "payment_instrument": { 8 "token": "2fa27578-e765-5dbh-aa97-d45d3d6cdfbb" 9 } 10 } ``` ### Processing Subsequent Payments [Section titled “Processing Subsequent Payments”](#processing-subsequent-payments) After following the above requests you can now process recurring payments by referencing the saved token and the associated customer. Both `token` and `customer_id` fields are required. ```json 1 { 2 "payment_type": "card", 3 "installments": 1, 4 "token": "{{CARD_TOKEN}}" 5 "customer_id": "DC000101", 6 } ``` # Refunds > Walks through looking up transactions and issuing full or partial refunds. In this guide, you will learn how to refund a transaction for a payment you have already processed. You will go through the following steps: 1. [Look up a transaction ID (Optional)](#1-look-up-a-transaction-id) 2. [Refund a transaction](#2-refund-a-transaction) by using one of the available options: * [Option A: Make a full refund](#option-a-make-a-full-refund) * [Option B: Make a partial refund](#option-b-make-a-partial-refund) When you complete these steps, the payment you have previously processed through SumUp will be refunded either partially or in full. ## Before you begin [Section titled “Before you begin”](#before-you-begin) Here are the things that you need in order to complete the steps in this guide: * You have a merchant account with [SumUp](https://me.sumup.com/login) and have already filled in your [account details](https://me.sumup.com/account). * For a **test account** reach out to our support team through this [contact form](/contact). * You have [registered your client application](/tools/authorization/register-app/) with SumUp. * You have a valid access token obtained via the [Authorization code flow](/tools/authorization/authorization/#authorization-code-flow). * You have processed successfully a payment checkout and you need to refund the transaction. Note Transactions are associated with active merchant user accounts. As a result, you *cannot* use an access token obtained via the [Client credentials flow](/tools/authorization/authorization/#client-credentials-flow) to complete the steps in this guide. ## Steps [Section titled “Steps”](#steps) ### 1. Look up a transaction ID [Section titled “1. Look up a transaction ID”](#1-look-up-a-transaction-id) Note If you already have the ID of the transaction you want to refund, you can skip this step and continue with [Step 2](#2-refund-a-transaction). To look up the identifier of a transaction for a payment checkout you have already completed, make a GET request to the `https://api.sumup.com/v0.1/checkouts/{id}` endpoint, where the value of the `{id}` path parameter is the identifier of the checkout resource. Following is a sample request for retrieving a checkout: ```bash 1 curl -X GET \ 2 https://api.sumup.com/v0.1/checkouts/4ebc2ed7-bb8c-4d4d-a110-08fd31301bf2 \ 3 -H "Authorization: Bearer $SUMUP_API_KEY" ``` ```go 1 ctx := context.Background() 2 client := sumup.NewClient().WithAuth(os.Getenv("SUMUP_API_KEY")) 3 4 checkout, err := client.Checkouts.Get(ctx, "4ebc2ed7-bb8c-4d4d-a110-08fd31301bf2") ``` ```php 1 $checkoutsService = $sumup->getCheckoutService(); 2 $response = $checkoutsService->findById('4ebc2ed7-bb8c-4d4d-a110-08fd31301bf2'); 3 $checkoutReference = $response->getBody()->checkout_reference; 4 $checkoutId = $response->getBody()->id; ``` * cURL ```bash 1 curl -X GET \ 2 https://api.sumup.com/v0.1/checkouts/4ebc2ed7-bb8c-4d4d-a110-08fd31301bf2 \ 3 -H "Authorization: Bearer $SUMUP_API_KEY" ``` * Go ```go 1 ctx := context.Background() 2 client := sumup.NewClient().WithAuth(os.Getenv("SUMUP_API_KEY")) 3 4 checkout, err := client.Checkouts.Get(ctx, "4ebc2ed7-bb8c-4d4d-a110-08fd31301bf2") ``` * PHP ```php 1 $checkoutsService = $sumup->getCheckoutService(); 2 $response = $checkoutsService->findById('4ebc2ed7-bb8c-4d4d-a110-08fd31301bf2'); 3 $checkoutReference = $response->getBody()->checkout_reference; 4 $checkoutId = $response->getBody()->id; ``` The response contains a JSON body with the full details of the processed checkout resource. You can find the transaction ID in the `id` attribute of the respective transaction resource (`664200af-2b62-4142-9c73-a2a505310d78` in the sample response below). ```json 1 { 2 "checkout_reference": "CO287866", 3 ... 4 "id": "4ebc2ed7-bb8c-4d4d-a110-08fd31301bf2", 5 ... 6 "transactions": [ 7 { 8 "id": "664200af-2b62-4142-9c73-a2a505310d78", 9 ... 10 } 11 ] 12 } ``` ### 2. Refund a transaction [Section titled “2. Refund a transaction”](#2-refund-a-transaction) You can use one the two available options for refunding a processed transaction: * [Option A: Make a full refund](#option-a-make-a-full-refund) * [Option B: Make a partial refund](#option-b-make-a-partial-refund) #### Option A: Make a full refund [Section titled “Option A: Make a full refund”](#option-a-make-a-full-refund) To make a full refund for a processed transaction, make a POST request with an empty request body to the `https://api.sumup.com/v0.1/me/refund/{txn_id}` endpoint, where the value of the `{txn_id}` path parameter is the identifier of the transaction resource. Following is a sample request for making a full refund for the transaction with identifier `664200af-2b62-4142-9c73-a2a505310d78`: * cURL ```bash 1 curl -X POST \ 2 https://api.sumup.com/v0.1/me/refund/19aa3cca-89f6-42d2-b462-463b0b53e959 \ 3 -H "Authorization: Bearer $SUMUP_API_KEY" ``` * Go ```go 1 ctx := context.Background() 2 client := sumup.NewClient().WithAuth(os.Getenv("SUMUP_API_KEY")) 3 4 _, err := client.Transactions.Refund(ctx, "19aa3cca-89f6-42d2-b462-463b0b53e959", sumup.RefundTransactionBody{}) ``` * PHP ```php 1 $transactionsService = $sumup->getTransactionService(); 2 $response = $transactionsService->refund('19aa3cca-89f6-42d2-b462-463b0b53e959'); ``` The response returns a 204 HTTP status code and contains no body. #### Option B: Make a partial refund [Section titled “Option B: Make a partial refund”](#option-b-make-a-partial-refund) To make a partial refund for a processed transaction, make a POST request to the `https://api.sumup.com/v0.1/me/refund/{txn_id}` endpoint, where the value of the `{txn_id}` path parameter is the identifier of the transaction resource. Unlike the option for a full refund, the request body for partial refunds should be a JSON object with the amount you want to refund for the transaction. Following is a sample request for making a partial refund for the amount of 24.42 EUR: * cURL ```bash 1 curl -X POST \ 2 https://api.sumup.com/v0.1/me/refund/19aa3cca-89f6-42d2-b462-463b0b53e959 \ 3 -H "Authorization: Bearer $SUMUP_API_KEY" \ 4 -H 'Content-Type: application/json' \ 5 -d '{"amount": 24.42}' ``` * Go ```go 1 ctx := context.Background() 2 client := sumup.NewClient().WithAuth(os.Getenv("SUMUP_API_KEY")) 3 4 amount := 12.24 5 client.Transactions.Refund(ctx, "sa", sumup.RefundTransactionBody{ 6 Amount: &amount, 7 }) ``` * PHP ```php 1 $transactionsService = $sumup->getCheckoutService(); 2 $response = $transactionsService->refund('19aa3cca-89f6-42d2-b462-463b0b53e959', 24.42); ``` The response returns a 204 HTTP status code and contains no body. ## Result [Section titled “Result”](#result) You have successfully refunded a transaction (either partially or in full) for a payment you previously processed. The refunded amount will be credited to the same payment method the customer had used to pay with in the original transaction. The processing fees associated with the original transaction are not returned. # Response Handling > Explains how to interpret SumUp API responses. Once an API call is submitted to SumUp, you will receive a response informing you if your request has been successful or not. In most cases the HTTP codes are accompanied by a response body in [JSON](https://json.org/) format. Returned codes in the `2xx` range indicate success. Returned codes in the `4xx` range indicate errors where the information provided results in a failure. Returned codes in the `5xx` range are rare and indicate server-side errors. ## Successful requests [Section titled “Successful requests”](#successful-requests) Successfully processed requests return one of the following HTTP status codes: `200 OK`, `201 Created`, `202 Accepted`, `204 No Content`. Depending on the use case response bodies may not be present at all. A response body can look like this: ```json 1 { 2 "next_step": { 3 "url": "https://dummy-3ds-gateway.com/cap?RID=1233&VAA=A", 4 "method": "POST", 5 "redirect_url": "https://mysite.com/completed_purchase", 6 "mechanism": "iframe", 7 "payload": { 8 "PaReq": "eJxVUttu2zAM/RXDr4MjyY5dO6BVuE27FZuDZHGG9VGRmMSFb/..f16+jLt/gPhUvGGw==", 9 "MD": "b1a536c0-29b9-11eb-adc1-0242ac120002" 10 } 11 } 12 } ``` ## Client-side issues [Section titled “Client-side issues”](#client-side-issues) `4xx` are occasions where you can take action to correct your application requests. Typically, these codes are returned upon user error, such as invalid API calls, incorrect values, missing parameters, etc. The response you receive will provide an indication to the root cause that triggered it. Here’s an example of a `4xx` response: ```json 1 { 2 "message": "Validation error", 3 "error_code": "MISSING", 4 "param": "merchant_code" 5 } ``` ## Server-side issues [Section titled “Server-side issues”](#server-side-issues) `5xx` stand for server errors. Although rare, if you receive such code, we recommend retrying your request. Should the returned codes continue to be in the `5xx` range, [reach out to us](/contact). # Accept a Payment > Teaches how to create and complete a checkout for a one-off card payments. In this guide, you will learn how to make a single payment with a payment card entered by a customer without associating it with a specific customer saved for the merchant user’s account. This type of payment is most useful for quick processing of payment checkouts in which you don’t store and manage any account data for your customers. You will go through the following steps: 1. [Create a checkout](#1-create-a-checkout) 2. [Complete a checkout](#2-complete-a-checkout) When you complete these steps, you will have processed a payment with a payment card entered by a customer. ## Before you begin [Section titled “Before you begin”](#before-you-begin) Here are the things that you need in order to complete the steps in this guide: * You have a merchant account with [SumUp](https://me.sumup.com/login) and have already filled in your [account details](https://me.sumup.com/account). * For a **test account** reach out to our support team through this [contact form](/contact). * You have [registered your client application](/tools/authorization/register-app/) with SumUp. * You have a valid access token obtained via one of the supported OAuth2 authorization flow, the [Authorization code flow](/tools/authorization/authorization/#authorization-code-flow) or [Client credentials flow](/tools/authorization/authorization/#client-credentials-flow). Note You can create and complete a payment checkout for any valid SumUp merchant user’s account. As a result, you *can* use an access token obtained either via the [Client credentials flow](/tools/authorization/authorization/#client-credentials-flow) or via the [Authorization code flow](/tools/authorization/authorization/#authorization-code-flow). ## Steps [Section titled “Steps”](#steps) ### 1. Create a checkout [Section titled “1. Create a checkout”](#1-create-a-checkout) To create a new checkout resource, make a POST request to the `https://api.sumup.com/v0.1/checkouts` endpoint. Caution This request must be made in a server-to-server communication between your server and SumUp API. The request body should be a JSON object with the following minimum details: Note The table below lists only the required parameters for the request. For a full list of the available parameters, see the [API Reference](/api/checkouts/create). | Attribute name | Description | | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | checkout\_reference | A unique string identifying the payment in your system. It must be unique for your application. | | amount | The amount for which the payment is made. | | currency | The three-letter [ISO4217](https://en.wikipedia.org/wiki/ISO_4217) code of the currency in which the payment is made. The value must match the currency registered for the specified merchant (see `merchant_code`). | | merchant\_code | The code of the registered SumUp merchant the payment is made. | Following is a sample request for creating a new checkout resource: * cURL ```bash 1 curl -X POST \ 2 https://api.sumup.com/v0.1/checkouts \ 3 -H "Authorization: Bearer $SUMUP_API_KEY" \ 4 -H 'Content-Type: application/json' \ 5 -d '{ 6 "checkout_reference": "CO746453", 7 "amount": 10, 8 "currency": "EUR", 9 "merchant_code": "ME7RMQN3", 10 "description": "Sample one-time payment" 11 }' ``` * Go ```go 1 ctx := context.Background() 2 client := sumup.NewClient().WithAuth(os.Getenv("SUMUP_API_KEY")) 3 4 checkout, err := client.Checkouts.Create(ctx, sumup.CreateCheckoutBody{ 5 Amount: 19, 6 CheckoutReference: "CO746453", 7 Currency: "EUR", 8 MerchantCode: "MK0001", 9 }) ``` * PHP ```php 1 $checkoutsService = $sumup->getCheckoutService(); 2 $response = $checkoutsService->create(10, 'EUR', 'CO746453', 'docuser@sumup.com', 'Sample one-time payment'); 3 $checkoutId = $response->getBody()->id; ``` The response contains a JSON body with the details of the created checkout resource. What you need to note in the response is the identifier of the resource - you will need it for all operations that you perform with the resource, such as completing it in the next step. The resource identifier is returned in the `id` attribute, or `f14425c6-8bc1-4d02-957c-47573f762828` in the sample response below. The `status` attribute shows that the payment for this resource is pending and will be processed when you complete the checkout with the payment instrument details. ```json 1 { 2 "checkout_reference": "CO746453", 3 "amount": 10, 4 "currency": "EUR", 5 "merchant_code": "ME7RMQN3", 6 "description": "Sample one-time payment", 7 "id": "f14425c6-8bc1-4d02-957c-47573f762828", 8 "status": "PENDING", 9 "date": "2018-09-28T13:47:01.832Z", 10 "transactions": [] 11 } ``` ### 2. Complete a checkout [Section titled “2. Complete a checkout”](#2-complete-a-checkout) To complete the checkout and trigger the payment, make a PUT request to the `https://api.sumup.com/v0.1/checkouts/{id}` endpoint, where the value of the `{id}` path parameter is the identifier of the checkout resource. Caution This request must be made from your client, *not* from your server. The request body should be a JSON object with the payment type (`card`) and the payment card details. For more information about the request, see the [API Reference](/api/checkouts/process). Following is a sample request for completing the checkout from [Step 1](#1-create-a-checkout): * cURL ```bash 1 curl -X PUT \ 2 https://api.sumup.com/v0.1/checkouts/f14425c6-8bc1-4d02-957c-47573f762828 \ 3 -H "Authorization: Bearer $SUMUP_API_KEY" \ 4 -H 'Content-Type: application/json' \ 5 -d '{ 6 "payment_type": "card", 7 "card": { 8 "name": "Boaty McBoatface", 9 "number": "4200000000000042", 10 "expiry_month": "12", 11 "expiry_year": "23", 12 "cvv": "123" 13 } 14 } ``` * Go ```go 1 ctx := context.Background() 2 client := sumup.NewClient().WithAuth(os.Getenv("SUMUP_API_KEY")) 3 4 checkoutSuccess, err := client.Checkouts.Process(ctx, "f14425c6-8bc1-4d02-957c-47573f762828", sumup.ProcessCheckoutBody{ 5 Card: &sumup.Card{ 6 Cvv: "123", 7 ExpiryMonth: "12", 8 ExpiryYear: "23", 9 Name: "Boaty McBoatface", 10 Number: "4200000000000042", 11 }, 12 PaymentType: sumup.ProcessCheckoutBodyPaymentTypeCard, 13 }) ``` The response contains a JSON body with the details of the processed checkout resource in which the attributes related to the payment outcome are populated: ```json 1 { 2 "checkout_reference": "CO746453", 3 "amount": 10.0, 4 "currency": "EUR", 5 "merchant_code": "ME7RMQN3", 6 "description": "Sample one-time payment", 7 "id": "f14425c6-8bc1-4d02-957c-47573f762828", 8 "status": "PAID", 9 "date": "2018-09-28T13:47:01.832Z", 10 "transaction_code": "TFDCP3FLQ7", 11 "transaction_id": "19aa3cca-89f6-42d2-b462-463b0b53e959", 12 "transactions": [ 13 { 14 "id": "19aa3cca-89f6-42d2-b462-463b0b53e959", 15 "transaction_code": "TFDCP3FLQ7", 16 "merchant_code": "ME7RMQN3", 17 "amount": 10.0, 18 "vat_amount": 0.0, 19 "tip_amount": 0.0, 20 "currency": "EUR", 21 "timestamp": "2018-09-28T13:48:28.768Z", 22 "status": "SUCCESSFUL", 23 "payment_type": "ECOM", 24 "entry_mode": "CUSTOMER_ENTRY", 25 "installments_count": 1, 26 "auth_code": "585388", 27 "internal_id": 24118507 28 } 29 ] 30 } ``` ## Result [Section titled “Result”](#result) You have made a payment with a payment card entered by a customer without associating it with a specific customer saved for a merchant user’s account. If the payment is successful, the funds will be transferred to the merchant user according to the configured account settings. # Save Customer Cards > Shows how to tokenize cards with the Payment Widget so you can save payment instruments for future charges. ## Overview [Section titled “Overview”](#overview) In this guide, you will learn how to use the payment widget to store card details for future use, for example to set up recurring payments. This feature is also known as **card on file** or **tokenization**. You will go through the following steps: 1. [Create a customer](#creating-customer) 2. [Create checkout intended for card tokenization](#creating-checkout-to-save-card), where we specify it’s for tokenization purpose. This is where 3DS verification takes place. The transaction amount is instantly reimbursed. 3. [Process payment with the payment widget](#processing-request-with-payment-widget) 4. [Make subsequent payments with a payment instrument](#setting-up-recurring-payments) ## Prerequisites [Section titled “Prerequisites”](#prerequisites) * You have a merchant account with [SumUp](https://me.sumup.com/login) and have already filled in your [account details](https://me.sumup.com/account). * For a **test account** reach out to our support team through this [contact form](/contact). * You have an API Key. For more details see the [Authorization Guide](/tools/authorization/authorization/#api-keys). * You have control over the backend server to retrieve data securely. ## Creating Customer [Section titled “Creating Customer”](#creating-customer) A customer resource is a representation of a person or business that is paying for a product or service. It contains personal information such as their name, contact details, postal address, as well as a unique identifier that is relevant to your business logic (`customer_id`). To create a new customer resource, make a POST request to the `https://api.sumup.com/v0.1/customers` endpoint: ```bash 1 curl -X POST \ 2 https://api.sumup.com/v0.1/customers \ 3 -H "Authorization: Bearer $SUMUP_API_KEY" \ 4 -H 'Content-Type: application/json' \ 5 -d '{ 6 "customer_id": "MYCUSTOMERID-123", 7 "personal_details": { 8 "address": { 9 "city": "Venice", 10 "state": "California", 11 "country": "US", 12 "line1": "606 Venezia Ave", 13 "line2": "Front", 14 "postal_code": "90291" 15 }, 16 "birthdate": "1949-11-11", 17 "email": "thedude@example.com", 18 "first_name": "Jeffrey", 19 "last_name": "Lebowski", 20 "phone": "+1 310-555-1234" 21 } 22 }' ``` You should expect a standard `201 Created` response, with the customer details you passed. For more details see the [create a customer](/api/customers/create) endpoint. Having created the customer, we can now proceed to making a payment ## Creating Checkout to Save Card [Section titled “Creating Checkout to Save Card”](#creating-checkout-to-save-card) The checkout resource is a representation of a payment being made by the previously created customer. It contains information such as the amount, currency, and a unique `checkout_reference` identifier that is relevant to your business logic. The flow is initiated with the `create a checkout` endpoint. It is important to pass the `customer_id` parameter in this step, for future linking to a payment instrument. Critically, a `purpose` parameter is passed to indicate the payment type as **recurring payment** and process an authorization charge of the checkout amount indicated, **which is instantly reimbursed**. Note that this doesn’t automatically imply further payments from this customer - at this point, we’re just tokenizing the card. To create a new checkout resource, make a POST request to the `https://api.sumup.com/v0.1/checkouts` endpoint. Example of such request: ```bash 1 curl -X POST \ 2 https://api.sumup.com/v0.1/checkouts \ 3 -H "Authorization: Bearer $SUMUP_API_KEY" \ 4 -H 'Content-Type: application/json' \ 5 -d '{ 6 "checkout_reference": "MYCHECKOUT", 7 "amount": 100, 8 "currency": "EUR", 9 "merchant_code": "MDEERENR", 10 "description": "My checkout", 11 "customer_id": "MYCUSTOMERID-123", 12 "purpose": "SETUP_RECURRING_PAYMENT" 13 }' ``` You should expect a standard `201 Created` response, with the checkout reference and both merchant and customer information. ```json 1 { 2 "amount": 100, 3 "checkout_reference": "MYCHECKOUT", 4 "checkout_type": "checkout", 5 "currency": "EUR", 6 "customer_id": "MYCUSTOMERID-123", 7 "date": "2025-10-29T15:09:11.550+00:00", 8 "description": "My checkout", 9 "id": "7164c99b-13cb-42a1-8ba1-3c2c46a29de7", 10 "merchant_code": "MDEERENR", 11 "merchant_country": "PL", 12 "merchant_name": "Test Account", 13 "pay_to_email": "a8e019f9bb2f49159182e8bd61eb5ea6@developer.sumup.com", 14 "purpose": "SETUP_RECURRING_PAYMENT", 15 "status": "PENDING", 16 "transactions": [] 17 } ``` For more information, see the [create a checkout](/api/checkouts/create) endpoint. ## Processing Request with Payment Widget [Section titled “Processing Request with Payment Widget”](#processing-request-with-payment-widget) The [SumUp’s Payment Widget](/online-payments/checkouts/card-widget/) is a JavaScript library that allows you to securely process checkouts and collect card details securely, handling consent collection and 3DS verification. These steps are mandatory due to legal requirements, which is why you should always process the checkout with the widget. Once you have a checkout reference from the step above, you can mount the payment widget into your website and collect the card details. Pass the `checkout_reference` from above as the `checkoutId` here. ```html 1
2 6 ``` Upon mounting the Payment Widget with a recurring purpose checkout, you should see the following screen: ![Card on file with payment widget](/img/guides/cof-payment-sdk.png) Card on file with payment widget The user is prompted to enter their card details, give consent to store their card details and complete the checkout. The widget uses the [Process Checkout endpoint](/api/checkouts/process) to securely process the checkout. We strongly recommend using the widget over direct integration, as the widget correctly handles all legal requirements for payments. If the previous operation is successful, and the card is stored with the **Save for future payments option**, a `payment_instrument` object containing a `token` representing the card is created (AKA tokenized card) for this customer. ```json 1 "payment_instrument": { 2 "mandate_reference": "2078683", 3 "token": "6878cb7f-6515-47bf-bdd9-1408d270fdce" 4 } ``` At any time, you can fetch the list of tokenized cards of a customer by requesting them via [the list payment instruments](/api/customers/list-payment-instruments) endpoint. ```bash 1 curl -X GET \ 2 "https://api.sumup.com/v0.1/customers/${CUSTOMER_ID}/payment-instruments" \ 3 -H "Authorization: Bearer $SUMUP_API_KEY" \ 4 -H "Content-Type: application/json;charset=UTF-8" ``` ## Setting up Recurring Payments [Section titled “Setting up Recurring Payments”](#setting-up-recurring-payments) Having tokenized the customer’s card, we can use it to process recurring payments. For detailed information, read the [Recurring Payments](/online-payments/guides/recurring-payments) guide. # Plugins > Summarizes the SumUp plugins offering for third-party tools. Plugins are dedicated solutions for a quick implementation of payments via SumUp on specific platforms, specifically Prestashop, Wix, and Woocomerce. They only require you to provide an API key and your merchant information to get started. For detailed information, select the plugin you want to use. [Prestashop](/online-payments/plugins/prestashop/) [Prestashop](/online-payments/plugins/prestashop/) [![Prestashop](/img/ecom-plugins.png)](/online-payments/plugins/prestashop/) [Wix](/online-payments/plugins/wix/) [Wix](/online-payments/plugins/wix/) [![Wix](/img/ecom-plugins.png)](/online-payments/plugins/wix/) [Woocommerce](/online-payments/plugins/woocommerce/) [Woocommerce](/online-payments/plugins/woocommerce/) [![Woocommerce](/img/ecom-plugins.png)](/online-payments/plugins/woocommerce/) # PrestaShop > Accept payments using SumUp with PrestaShop. For PrestaShop you can use the SumUp Payment module plugin, which requires a few configurations in your SumUp dashboard. [Download PrestaShop Plugin](https://addons.prestashop.com/en/payment-card-wallet/44630-sumup-payment.html) ## Prerequisites [Section titled “Prerequisites”](#prerequisites) 1. To get started you will need an active [SumUp account](https://me.sumup.com). As an authorised Payment Institution by the Central Bank of Ireland, SumUp will require certain documents to verify you as the individual and owner of the business you’re registering with. Please make sure your business model is supported by SumUp, according to our [allowed businesses article](https://help.sumup.com/en-GB/articles/3G8ZHjdgFZjmKWOmDWS52m). Note Currently the Alternative Payment Methods (APMs) are not available in SumUp plugins. We are working on it and will soon be able to offer APMs in plugins. ## Installation [Section titled “Installation”](#installation) 1. Follow the instructions described in [the register application guide](/tools/authorization/register-app) in order to obtain the client credentials for your app. 2. Download the client credentials JSON as described in the [access client credentials section](/tools/authorization/register-app/#4-access-the-client-credentials) 3. Upload the JSON to the “Module Configuration” page in your PrestaShop Backoffice. 4. Once your account is fully verified by SumUp, [contact us](/contact) to request enabling of the online payments scope for your PrestaShop online store. ![SumUp Payment Gateway for PrestaShop](/img/guides/prestashop_step_5.png) Once you receive a confirmation from SumUp you’re fully set-up! Please note that the smallest amount that you can accept through SumUp is 1 EUR (or equivalent). Note Need help? Contact our [customer service](https://me.sumup.com/en-gb/support) for assistance. # WIX > Accept payments using SumUp with WIX. This guide will help you set up SumUp as your payment provider on your [WIX online store](https://wix.com). By connecting your WIX dashboard to SumUp, you can accept payments through our secure and easy-to-use payment gateway. ## Prerequisites [Section titled “Prerequisites”](#prerequisites) Before you start, make sure you have: 1. An active [SumUp account](https://me.sumup.com). If you don’t have one yet, you can sign up on [our website](https://me.sumup.com/signup). As an authorized Payment Institution by the Central Bank of Ireland, SumUp will require certain documents to verify your identity and business ownership. Please make sure your business model is supported by SumUp, according to our [allowed businesses article](https://help.sumup.com/en-GB/articles/3G8ZHjdgFZjmKWOmDWS52m). 2. A WIX online store. With this integration, the following Alternative Payment Methods (APMs) are available at checkout: iDeal (Netherlands), Bancontact (Belgium), P24 (Poland), EPS (Austria). Please note, that currently Apple Pay and Google Pay are not available. ## Installation [Section titled “Installation”](#installation) Here’s how you can connect SumUp to your WIX online store: 1. First, create your secret API Key. [See this article](/tools/authorization/authorization/#integration-via-api-keys) for full information on how to do it. Copy your key before proceeding. 2. Head over to your WIX dashboard. 3. Go to **Settings** and click on **Accept payments**. 4. Select **SumUp**, paste your secret API Key in the required field under **Account Information** and **Save**. That’s it! You can now start accepting payments through SumUp on your WIX online store. If you have any questions or encounter any issues, don’t hesitate to contact our [customer service](https://me.sumup.com/en-gb/support) team. # WooCommerce > Accept payments using SumUp with WooCommerce. If you already have a WordPress website and would like to complete it with accepting payments, you can do so with the [SumUp Payment Gateway for WooCommerce plugin](https://wordpress.org/plugins/sumup-payment-gateway-for-woocommerce/). It will allow you to take payments in your online store with an easy and quick integration without any coding required. The plugin is a lightweight integration option enabling your customizations and providing your customers the convenience of securely buying products from your website without being redirected to other pages. It accepts all major card schemes like VISA, MasterCard, American Express, Diners, Discover and JCB. Transactions are processed through the SumUp payment platform allowing you to track your [transaction history through the SumUp Dashboard](https://me.sumup.com/sales/transactions). Note The SumUp WooCommerce plugin is SCA ready and compliant with PCI standards. If you’re just getting started with SumUp, review our [allowed businesses list](https://help.sumup.com/hc/en-gb/articles/115008338707-Restricted-businesses) prior to [signing up](https://me.sumup.com). [Go to plugin page](https://wordpress.org/plugins/sumup-payment-gateway-for-woocommerce/) ## Prerequisites [Section titled “Prerequisites”](#prerequisites) To get started you will need an active [SumUp account](https://me.sumup.com). As an authorized Payment Institution by the Central Bank of Ireland, SumUp will require certain documents to verify you as the individual and owner of the business you’re registering with. Please make sure your business model is supported by SumUp, according to our [allowed businesses article](https://help.sumup.com/en-GB/articles/3G8ZHjdgFZjmKWOmDWS52m). ## Installing the plugin [Section titled “Installing the plugin”](#installing-the-plugin) ### Automatic Installation [Section titled “Automatic Installation”](#automatic-installation) The automatic installation is the easiest option, as WordPress handles the file transfer and you don’t need to leave your web browser. 1. Install the plugin via the **Plugins** section in the WordPress Dashboard. 2. Click on **Add new** and search for **SumUp Payment Gateway for WooCommerce**. 3. Click on the **Install Now** button. 4. Click **Activate** to active the plugin. ### Manual Installation [Section titled “Manual Installation”](#manual-installation) The manual installation method involves downloading our plugin and uploading it to your web server via your favorite FTP application. The [WordPress codex](https://wordpress.org/support/article/managing-plugins/#manual-upload-via-wordpress-admin) contains instructions on how to do this. Before setting up the plugin, you must create your client credentials. They will be used afterwards to configure the plugins. ## Integration Options [Section titled “Integration Options”](#integration-options) For plugin versions above `2.5` both a [simple](#simple-integration) and [advanced](#advanced-integration) integration flows are available. If you are using a plugin version below `2.5`, follow the steps in our [advanced integration guide](#advanced-integration). ### Simple Integration [Section titled “Simple Integration”](#simple-integration) This integration option is available to plugin versions above `2.5`. 1. Click on the **Connect account** button to initiate the lightweight integration flow. You will be redirected to your Online Payments settings in the SumUp Dashboard. 2. In your SumUp Dashboard, click on **Start setup** to begin the creation of your production API keys. Once the flow is initiated, we will take care of generating live API keys for your SumUp account. When the flow completes successfully, they will become available to your WordPress shop. You can now begin accepting payments through SumUp on your WordPress shop. Note The [Online Payments settings page](https://me.sumup.com/settings/online-payments) in the SumUp Dashboard, allows you to view your plugin connections and manage payment method settings. ![SumUp Payment Gateway for WooCommerce plugin settings](/img/guides/woocommerce_plugin.png) ### Advanced Integration [Section titled “Advanced Integration”](#advanced-integration) 1. Once the plugin is activated, click on **Advanced version** option. 2. [Create your API Key](/tools/authorization/authorization/#create-api-key) 3. Enter your credentials from your SumUp account (API Key, email and merchant code) and configure any settings as needed. ## Additional configuration [Section titled “Additional configuration”](#additional-configuration) * Enable the SumUp Payment Gateway * Apply custom title of the payment method, visible by your customers * Apply an optional payment method description, visible by your customers * Apply your shop currency corresponding to the one set in your SumUp account * Requires ZIP code from your customers. **Mandatory for US merchants** * We recommend enabling the logging option for better troubleshooting should any issues occur (Logs can be accessed in WooCommerce/Status/Logs) * Choose between popup or embedded payment form with the “Open Payment in modal?” option #### Update your website [Section titled “Update your website”](#update-your-website) Before you begin accepting payments through SumUp, your website should display the following information: * Business & product information * Delivery, cancellation & return/refund policy * Payment & billing process * All prices must have the respective currency prefix * Privacy policy * Security policy Note We recommend configuring a “Thank You” page for successful checkouts, according to [WooCommerce official standards](https://docs.woocommerce.com/document/woocommerce-custom-thank-you-pages/). ## Configuration for legacy plugin (version older than 2.5) [Section titled “Configuration for legacy plugin (version older than 2.5)”](#configuration-for-legacy-plugin-version-older-than-25) ### Create your client credentials [Section titled “Create your client credentials”](#create-your-client-credentials) To create client credentials you must have an active [SumUp account](https://me.sumup.com) and have already filled in your [account details](https://me.sumup.com/account). It is important that your account has successfully completed the onboarding process and you have requested the `payments` scope activation. If you don’t have the `payments` scope activated, [message us](/contact) for assistance. Create your credentials [here](https://developer.sumup.com/apps). Caution SumUp aims to respond to all [contact queries](/contact) within 24 hours, Monday through Friday. Once you ensure you’ve met the above requirements, you can proceed with our [Register application guide](/tools/authorization/register-app/) to set up your client credentials. In that page you find information on how to register an app and your client credentials which are necessary for setting up the plugin in your Wordpress account. ## Plugin Configuration [Section titled “Plugin Configuration”](#plugin-configuration) Now that you have created your client credentials, you can proceed with configuring the SumUp WooCommerce plugin. Before you begin make sure you have the WooCommerce plugin installed. Once in the WordPress Dashboard, navigate to the **Plugins** section and select **Settings** under the SumUp Woocommerce plugin. Descriptions of the setting page fields can be found below: * Enable the SumUp Payment Gateway * Apply custom title of the payment method, visible by your customers * Apply an optional payment method description, visible by your customers * Apply your shop currency corresponding to the one set in your SumUp account * Client ID and Client Secret of your application. Both are located in the JSON file you created in the [Create your client credentials step](#create-your-client-credentials), in the following key-value pair: ```json 1 { 2 "id": "CCCFAXYD", 3 "name": "My Online Store Name", 4 "client_id": "fOcmczrYtYMJ7Li5GjMLLcUeC9dN", 5 "client_secret": "717bd571b54297494cd7a79b491e8f2c1da6189c4cc2d3481380e8366eef539c", 6 "application_type": "web", 7 "redirect_uris": ["https://mywebsite.com/callback"] 8 } ``` * The email address you sign into your SumUp merchant account with * The merchant code associated to your SumUp account * Requires ZIP code from your customers. **Mandatory for US merchants** * We recommend enabling this option for better troubleshooting should any issues occur (Logs can be accessed in WooCommerce/Status/Logs) # Online Payments SDKs > Overview of the available SumUp SDKs for online payments. SumUp provides the following Online Payment SDKs: * [PHP SDK](/online-payments/sdks/php-sdk) - general purpose SDK for all endpoints * [React Native SDK](/online-payments/sdks/react-native-sdk) - provides a payment sheet that is displayed on top of your app * [Swift Checkout SDK](/online-payments/sdks/swift-checkout) - fast online checkout experience for Apple Pay and Google Pay # PHP SDK > Introduction to the SumUp PHP SDK and first steps to get you started. SumUp provides a library that allows smoother integration into the [SumUp’s API](/api). It is written in [PHP](http://php.net/) as one of the most requested by developers programming language. It is designed to facilitate payment integrators, developers and other interested parties when building payment checkout experiences and provides easier access to other services like: * managing merchant profiles * managing checkouts * managing customers * managing payouts * querying transactions ## Installation [Section titled “Installation”](#installation) The SumUp eCom PHP SDK can be installed with [Composer](https://getcomposer.org/). Run the following command: ```bash 1 composer require sumup/sumup-ecom-php-sdk ``` ## Basic usage [Section titled “Basic usage”](#basic-usage) ```php 1 try { 2 $sumup = new \SumUp\SumUp([ 3 'app_id' => 'YOUR-CLIENT-ID', 4 'app_secret' => 'YOUR-CLIENT-SECRET', 5 'code' => 'YOUR-AUTHORIZATION-CODE' 6 ]); 7 $checkoutService = $sumup->getCheckoutService(); 8 $checkoutResponse = $checkoutService->create($amount, $currency, $checkoutRef, $payToEmail); 9 $checkoutId = $checkoutResponse->getBody()->id; 10 // pass the $chekoutId to the front-end to be processed 11 } catch (\SumUp\Exceptions\SumUpAuthenticationException $e) { 12 echo 'Authentication error: ' . $e->getMessage(); 13 } catch (\SumUp\Exceptions\SumUpResponseException $e) { 14 echo 'Response error: ' . $e->getMessage(); 15 } catch(\SumUp\Exceptions\SumUpSDKException $e) { 16 echo 'SumUp SDK error: ' . $e->getMessage(); 17 } ``` ## SDK documentation [Section titled “SDK documentation”](#sdk-documentation) For more information read the **[documentation](https://github.com/sumup/sumup-ecom-php-sdk)**. # React Native Payment SDK > Step-by-step guide for integrating the SumUp React Native Payment SDK, from prerequisites to checkout creation and mounting the payment sheet. SumUp’s React Native Payment SDK provides a payment sheet that is displayed on top of your app. It collects user payment details, confirms a payment, and saves a card for future usage. Moreover, it allows a user to use Apple Pay or Google Pay to process payments. ![Challenge screen](/img/guides/react_native_payment_sheet.png) Challenge screen ## Integration [Section titled “Integration”](#integration) ### Before you begin [Section titled “Before you begin”](#before-you-begin) Here are the things that you need in order to complete the steps in this guide: * You have a merchant account with [SumUp](https://me.sumup.com/login) and have already filled in your [account details](https://me.sumup.com/account). * For a **test account** reach out to our support team through this [contact form](/contact). * You have [registered your client application](/tools/authorization/register-app/) with SumUp. * You have a valid access token obtained via the [Authorization code flow](/tools/authorization/authorization/#authorization-code-flow). * The restricted `payment_instruments` scope is enabled for your client application. If it isn’t enabled, [contact us](/contact) and request it. * Review how to create a single payment [here](https://developer.sumup.com/online-payments/guides/single-payment/#before-you-begin). ### Create a checkout [Section titled “Create a checkout”](#create-a-checkout) Initializing the SDK works by passing it a `checkout_id`. To [create a checkout](/api/checkouts/create) on your backend make the following request: * cURL ```bash 1 curl --request POST \ 2 --url https://api.sumup.com/v0.1/checkouts \ 3 --header "Authorization: Bearer $SUMUP_API_KEY" \ 4 --header 'Content-Type: application/json' \ 5 --data '{ 6 "checkout_reference": "44ea5096-b83f-46e1-9323-fe82a8cb7eb5", 7 "currency": "SEK", 8 "amount": 9.99, 9 "description": "Order #1234", 10 "merchant_code": "MXXXXXXX", 11 "return_url": "https://example.com", 12 "redirect_url": "https://sumup.com" 13 }' ``` The SDK will process the checkout once a customer provides payment details. If payment details aren’t passed an error will be received. ## Set up SDK [Section titled “Set up SDK”](#set-up-sdk) Install the npm module by one of the following commands: * npm ```bash 1 npm i sumup-react-native-alpha 2 npm i react-native-webview ``` * yarn ```bash 1 yarn add sumup-react-native-alpha 2 yarn add react-native-webview ``` You need to install `react-native-localization` to automatically detect the user system language. * npm ```bash 1 npm i react-native-localization ``` * yarn ```bash 1 yarn add react-native-localization ``` If you don’t need it, please provide the language field in the `initPaymentSheet` function. ```javascript 1 await initPaymentSheet({ 2 checkoutId, 3 language: 'en', 4 }); ``` Next, install the native modules. ```bash 1 cd ios 2 pod install ``` SDK should be initialized by wrapping your payment screen into SumUpProvider. This component requires an `apiKey` that can be created [here](/protected/api-keys/). ```javascript 1 import { SumUpProvider } from 'sumup-react-native-alpha'; 2 3 export default function App() { 4 return ( 5 6 7 8 ); 9 } ``` ## Provide payment details [Section titled “Provide payment details”](#provide-payment-details) Before showing the payment sheet, it needs to be initialized. Call `initPaymentSheet` with the parameters like in example below: ```js 1 import React, { useEffect } from "react"; 2 import { View, Alert } from "react-native"; 3 import { useSumUp } from "sumup-react-native-alpha"; 4 5 export default function MainScreen() { 6 const { initPaymentSheet } = useSumUp(); 7 8 const initSumUpPaymentSheet = async () => { 9 const { error } = await initPaymentSheet({ 10 checkoutId: "...", 11 customerId: "...", 12 language: "en", // en or sv are supported 13 }); 14 15 16 if (error) { 17 Alert.alert( 18 error.status, 19 error.status === "failure" ? error.message : undefined 20 ); 21 } else { 22 Alert.alert("Payment Sheet was configured"); 23 } 24 }; 25 26 useEffect(() => { 27 initSumUpPaymentSheet(); 28 }, []); 29 30 ... ``` **Required** fields for `initPaymentSheet`: * `checkoutId` - described in section [Create a checkout](/online-payments/sdks/react-native-sdk/#create-a-checkout). *Optional*: * `customerId` - used for saving cards for future usage. * `language` - English and Sweden are supported (if undefined, react-native-localization will be used to check user device language). ## Show Payment Sheet [Section titled “Show Payment Sheet”](#show-payment-sheet) After initialization a payment sheet can be shown. When a user presses a button, you can show it by calling `presentPaymentSheet()`. After a user completes a payment, this function will return a callback. If any errors take place, the callback will contain an error field with the details. ```js 1 ... 2 3 const showPaymentSheet = async () => { 4 const { error } = await presentPaymentSheet(); 5 6 7 if (error) { 8 Alert.alert( 9 error.status, 10 error.status === "failure" ? error.message : undefined 11 ); 12 } else { 13 Alert.alert("Payment successfully was processed"); 14 } 15 }; 16 17 18 return ( 19 20