diff --git a/_data/toc/graphql.yml b/_data/toc/graphql.yml index 279f667437f..a4085705cf1 100644 --- a/_data/toc/graphql.yml +++ b/_data/toc/graphql.yml @@ -105,9 +105,6 @@ pages: - label: Payflow Pro handlePayflowProResponse mutation url: /graphql/reference/paypal-handle-payflow-pro-response.html - - label: Paypal endpoint - url: /graphql/reference/paypal.html - - label: Products endpoint url: /graphql/reference/products.html children: @@ -198,6 +195,9 @@ pages: - label: Authorize.Net url: /graphql/payment-methods/authorize-net.html + + - label: PayPal Express Checkout + url: /graphql/payment-methods/paypal-express-checkout.html - label: PayPal Payflow Link url: /graphql/payment-methods/payflow-link.html diff --git a/_includes/graphql/payment-methods/paypal-express-checkout-attributes.md b/_includes/graphql/payment-methods/paypal-express-checkout-attributes.md new file mode 100644 index 00000000000..5a845b2fd02 --- /dev/null +++ b/_includes/graphql/payment-methods/paypal-express-checkout-attributes.md @@ -0,0 +1,4 @@ +Attribute | Data Type | Description +--- | --- | --- +`payer_id` | String! | The unique ID of the PayPal customer +`token` | String! | The token returned by the `createPaypalExpressToken` mutation \ No newline at end of file diff --git a/_includes/graphql/payment-methods/paypal-express-checkout-workflow.md b/_includes/graphql/payment-methods/paypal-express-checkout-workflow.md new file mode 100644 index 00000000000..4b956664ecf --- /dev/null +++ b/_includes/graphql/payment-methods/paypal-express-checkout-workflow.md @@ -0,0 +1,23 @@ +1. When the buyer clicks a PayPal button, the frontend executes the [`createPaypalExpressToken`]({{page.baseurl}}/graphql/mutations/create-paypal-express-token.html) mutation. + +1. Magento requests a secure token from PayPal. Magento gathers information in the specified cart and sends this information to PayPal as part of a request for a secure token. + +1. If the token request succeeds, PayPal returns a token. You must include this token in subsequent steps. + +1. Magento sends the token to the client. The `createPaypalExpressToken` response includes the token and the PayPal URLs to be used in the next step. + +1. Redirect the customer to PayPal for approval. Depending on your implementation, the customer is either redirected to the PayPal login screen, or the customer enters their credentials in-context. + +1. If the customer approves the payment, PayPal redirects the customer back to the payment confirmation page. The response includes the secure token and payer ID as GET parameters. + +1. Set the payment method. The frontend runs the [`setPaymentMethodOnCart`]({{page.baseurl}}/graphql/reference/quote-payment-method.html) mutation. The payload includes the PayPal token, the payer ID, and the cart ID. The cart may have been updated since the token was requested, as shipping costs, taxes, and other adjustments might have been applied to the cart. Magento submits the updated cart to PayPal. + +1. Magento returns a `Cart` object. + +1. Place the order with the [`placeOrder`]({{page.baseurl}}/graphql/reference/quote-place-order.html) mutation. + +1. Magento sends the secure token, payer ID, and final cart information to PayPal. + +1. PayPal captures the payment by transferring the funds from the customer account to the appropriate merchant account. + +1. Magento creates an order, ready for fulfillment. diff --git a/common/images/graphql/paypal-express-checkout.svg b/common/images/graphql/paypal-express-checkout.svg new file mode 100644 index 00000000000..88025cf10d1 --- /dev/null +++ b/common/images/graphql/paypal-express-checkout.svg @@ -0,0 +1,2 @@ + +
8
[Not supported by viewer]

Magento returns a Cart object.

[Not supported by viewer]
5
[Not supported by viewer]

Redirect the customer to PayPal and include the token.

[Not supported by viewer]
4
[Not supported by viewer]

Magento returns the token and info.

[Not supported by viewer]

Client
(PWA)

[Not supported by viewer]

Magento

[Not supported by viewer]
1
[Not supported by viewer]

Run the createPaypal
ExpressToken mutation

[Not supported by viewer]

PayPal

[Not supported by viewer]
11
[Not supported by viewer]

PayPal returns the response.

[Not supported by viewer]

Magento creates an order.

[Not supported by viewer]
12
[Not supported by viewer]

Run the placeOrder mutation.

[Not supported by viewer]
9
[Not supported by viewer]

Magento sends the token, payer ID, and updated cart info.

[Not supported by viewer]
10
[Not supported by viewer]
2
[Not supported by viewer]

Magento requests a secure token.

[Not supported by viewer]
3
[Not supported by viewer]

PayPal returns a token and other payment info.

[Not supported by viewer]
6
[Not supported by viewer]

Upon customer approval, return to the payment confirmation page.

[Not supported by viewer]

Run the setPayment
MethodOnCart mutation.

[Not supported by viewer]
7
[Not supported by viewer]
\ No newline at end of file diff --git a/guides/v2.3/graphql/mutations/create-paypal-express-token.md b/guides/v2.3/graphql/mutations/create-paypal-express-token.md new file mode 100644 index 00000000000..a57de428653 --- /dev/null +++ b/guides/v2.3/graphql/mutations/create-paypal-express-token.md @@ -0,0 +1,104 @@ +--- +group: graphql +title: createPaypalExpressToken mutation +--- + +The `createPaypalExpressToken` mutation begins the authorization process for the following payment methods: + +* PayPal Express Checkout +* PayPal Payflow Pro with Express Checkout +* PayPal Payflow Link with Express Checkout + +The input includes the cart ID, the payment method code, and a set of URLs that PayPal uses to respond to the token request. If the request is successful, PayPal returns a token. The [`setPaymentMethodOnCart`]({{page.baseurl}}/graphql/reference/quote-payment-method.html) mutation uses this token later in the authorization process. + +## Syntax + +`mutation: {createPaypalExpressToken(input: PaypalExpressTokenInput!): {PaypalExpressToken}}` + +## Example usage + +**Request** + +```graphql +mutation { + createPaypalExpressToken( + input: { + cart_id: "rMQdWEecBZr4SVWZwj2AF6y0dNCKQ8uH" + code: "paypal_express" + express_button: true + urls: { + return_url: "paypal/action/return.html" + cancel_url: "paypal/action/cancel.html" + } + } + ) + { + token + paypal_urls{ + start + edit + } + } +} +``` + +**Response** + +```json +{ + "data": { + "createPaypalExpressToken": { + "token": "" + "paypal_urls": { + "start": "https://www.sandbox.paypal.com/checkoutnow?token=" + "edit": "https://www.sandbox.paypal.com/cgi-bin/webscr?cmd=_express-checkout&useraction=continue&token=" + } + } + } +} +``` + +## Input attributes + +### PaypalExpressTokenInput {#PaypalExpressTokenInput} + +The `PaypalExpressTokenInput` object defines the attributes required to receive a payment token from PayPal. + +Attribute | Data Type | Description +--- | --- | --- +`cart_id` | String! | The unique ID that identifies the customer's cart +`code` | String! | Payment method code +`express_button` | Boolean | Indicates whether the buyer selected the PayPal Express Checkout button. The default value is `false` +`urls` | [`PaypalExpressUrlsInput!`](#PaypalExpressUrlsInput) | A set of relative URLs that PayPal will use in response to various actions during the authorization process. +`use_paypal_credit` | Boolean | Indicates whether the buyer clicked the PayPal credit button. The default value is `false` + +### PaypalExpressUrlsInput {#PaypalExpressUrlsInput} + +The `PaypalExpressUrlsInput` object contains a set of relative URLs that PayPal will use in response to various actions during the authorization process. Magento prepends the base URL to this value to create a full URL. For example, if the full URL is `https://www.example.com/path/to/page.html`, the relative URL is `path/to/page.html`. Use this input for Express Checkout and Payments Standard payment methods. + +Attribute | Data Type | Description +--- | --- | --- +`cancel_url` | String! | The relative URL of the page that PayPal will redirect to when the buyer cancels the transaction in order to choose a different payment method. If the full URL to this page is `https://www.example.com/paypal/action/cancel.html`, the relative URL is `paypal/action/cancel.html`. +`pending_url` | String | The relative URL of the page that PayPal will redirect to when the payment has been put on hold for additional review. This condition mostly applies to ACH transactions, and is not applicable to most PayPal solutions. If the full URL to this page is `https://www.example.com/paypal/action/success_pending.html`, the relative URL is `paypal/action/success_pending.html`. +`return_url` | String! | The relative URL of the final confirmation page that PayPal will redirect to upon payment success. If the full URL is `https://www.example.com/paypal/action/success_review.html`, the relative URL is `paypal/action/success_review.html`. +`success_url` | String | The relative URL of the order confirmation page that PayPal will redirect to when the payment is successful and additional confirmation is not needed. Not applicable to most PayPal solutions. If the full URL to this page is `https://www.example.com/paypal/action/success.html`, the relative URL is `paypal/action/success.html`. + +## Output attributes + +### PaypalExpressToken {#PaypalExpressToken} + +The `PaypalExpressToken` object contains a token returned by PayPal and a set of URLs that allow the buyer to authorize payment and adjust checkout details. + +Attribute | Data Type | Description +--- | --- | --- +`paypal_urls` | [PaypalExpressUrlList](#PaypalExpressUrlList) | A set of URLs that allow the buyer to authorize payment and adjust checkout details +`token` | String | The token returned by PayPal + +### PaypalExpressUrlList {#PaypalExpressUrlList} + +The `PaypalExpressUrlList` object defines a set of URLs that allow the buyer to authorize payment and adjust checkout details. + +Attribute | Data Type | Description +--- | --- | --- +`edit` | String | The PayPal URL that allows the buyer to edit their checkout details +`start` | String | The URL to the PayPal login page diff --git a/guides/v2.3/graphql/payment-methods/paypal-express-checkout.md b/guides/v2.3/graphql/payment-methods/paypal-express-checkout.md new file mode 100644 index 00000000000..0a44364200e --- /dev/null +++ b/guides/v2.3/graphql/payment-methods/paypal-express-checkout.md @@ -0,0 +1,84 @@ +--- +group: graphql +title: PayPal Express Checkout payment method +--- + +The PayPal Express Checkout payment method enables customers to pay by credit card or from the security of their personal PayPal accounts. During checkout, the customer is redirected to the secure PayPal site to complete the payment information. The customer is then returned to your store to complete the remainder of the checkout process. + +The merchant can use PayPal Express Checkout as a standalone option, or combine it with one of these other PayPal payment solutions: + +- PayPal Payflow Link +- PayPal Payment Standard +- Website Payments Standard (Australia only) +- Website Payments Standard (United Kingdom only) + +When these other payment solutions are combined with PayPal Express Checkout, they use the same workflow as PayPal Express Checkout. From the GraphQL perspective, the only difference is the payment method `code` specified in the `setPaymentMethodOnCart` mutation. + +## PayPal Express Checkout workflow + +The following diagram shows the workflow for placing an order when PayPal Express Checkout is the selected payment method. + +![PayPal Express Checkout sequence diagram]({{site.baseurl}}/common/images/graphql/paypal-express-checkout.svg) + +The following steps describe the flow of calls required to complete a typical PayPal Express Checkout authorization. A successful purchase requires that you send three mutations to PayPal, and the buyer must approve the purchase by logging in to PayPal. + +{% include graphql/payment-methods/paypal-express-checkout-workflow.md %} + +## Additional Payment information + +When you set the payment method code to `paypal_express` in the `setPaymentMethodOnCart` mutation, you must also specify attributes specific to this payment method in `additional_data` object. These attributes are defined in the `paypal_express` object: + +{% include graphql/payment-methods/paypal-express-checkout-attributes.md %} + +## Example setPaymentMethodOnCart mutation + +The following example shows the `setPaymentMethodOnCart` mutation constructed for the PayPal Express payment method. + +**Request** + +```graphql +mutation { + setPaymentMethodOnCart(input: { + cart_id: "rMQdWEecBZr4SVWZwj2AF6y0dNCKQ8uH" + payment_method: { + code: "paypal_express" + additional_data: { + paypal_express: { + payer_id: "" + token: "" + } + } + } + }) { + cart { + selected_payment_method { + code + title + } + } + } +} +``` + +**Response** + +```json +{ + "data": { + "setPaymentMethodOnCart": { + "cart": { + "selected_payment_method": { + "code": "paypal_express", + "title": "PayPal Express Checkout" + } + } + } + } +} +``` + +## Related topics + +- [`createPaypalExpressToken` mutation]({{page.baseurl}}/graphql/mutations/create-paypal-express-token.html) +- [`placeOrder` mutation]({{page.baseurl}}/graphql/reference/quote-place-order.html) +- [`setPaymentMethodOnCart` mutation]({{page.baseurl}}/graphql/reference/quote-payment-method.html) diff --git a/guides/v2.3/graphql/reference/paypal.md b/guides/v2.3/graphql/reference/paypal.md deleted file mode 100644 index c60a97cf946..00000000000 --- a/guides/v2.3/graphql/reference/paypal.md +++ /dev/null @@ -1,231 +0,0 @@ ---- -group: graphql -title: Paypal endpoint ---- - -The `Paypal` endpoint provides support for the following PayPal payment methods: - -* PayPal Express Checkout -* PayPal Payflow Pro and PayPal Payflow Link - -The following steps describe the flow of calls required to complete a typical PayPal checkout transaction. A successful purchase requires that you send three mutations to PayPal, and the buyer must approve the purchase by logging in to PayPal. - -1. **Send a token request.** When the buyer clicks a PayPal button, the frontend executes the `createPaypalExpressToken` mutation. The Magento `PaypalGraphQl` module gathers information in the specified cart and sends this information to PayPal. - -2. **PayPal returns a token.** If the token request succeeds, PayPal returns a token and a payer ID. PayPal also sends payment-related data that is outside the scope of GraphQL. You must include this token in subsequent steps. The buyer is redirected to the payment confirmation page, which was specified in the token request. - -3. **Redirect the customer to PayPal for approval.** Depending on your implementation, the buyer is either redirected to the PayPal login screen, or the buyer enters their credentials in-context. - -4. **PayPal redirects the customer back to your site.** If the customer approves the payment, PayPal directs the customer back to the payment confirmation page. - -5. **Set the payment method.** The frontend runs the `setPaymentMethodOnCart` mutation. The payload includes the PayPal token and the payer ID. The cart may have been updated since the token was requested with shipping costs, taxes, and other adjustments. Magento submits the updated cart to PayPal. - -6. **Complete the transaction.** Place the order with the `placeOrder` mutation. PayPal captures the payment by transferring the funds from the customer account to the appropriate merchant account. Magento creates an order, ready for fulfillment. - -## Mutation - -The `createPaypalExpressToken` mutation initiates a PayPal checkout transaction and receives a token. You must specify this token when setting a PayPal payment method. - -## Syntax - -`createPaypalExpressToken(input: PaypalExpressTokenInput): PaypalExpressToken` - -## Examples - -These examples show all the mutations required to complete a PayPal purchase. - -### Request a PayPal token - -The PayPal `token` will be used in the other mutations. The raw response from PayPal also includes the payer ID in the URL. Extract the payer ID so that it used in the mutation that sets the payment method. - -**Request** - -```text -mutation { - createPaypalExpressToken( - input: { - cart_id: "rMQdWEecBZr4SVWZwj2AF6y0dNCKQ8uH" - code: "paypal_express" - express_button: true - urls: { - return_url: "http://magento.test/paypal/express/return/" - cancel_url: "http://magento.test/paypal/express/cancel/" - } - } - ) - { - token - paypal_urls{ - start - edit - } - } -} -``` - -**Response** - -```json -{ - "data": { - "createPaypalExpressToken": { - "token": "" - "paypal_urls": { - "start": "https://www.sandbox.paypal.com/checkoutnow?token=" - "edit": "https://www.sandbox.paypal.com/cgi-bin/webscr?cmd=_express-checkout&useraction=continue&token=" - } - } - } -} -``` - -### Set the payment method - -Magento GraphQL supports the `paypal_express` and `paypal_payflow` payment methods. - -**Request** - -```text -mutation { - setPaymentMethodOnCart(input: { - cart_id: "rMQdWEecBZr4SVWZwj2AF6y0dNCKQ8uH" - payment_method: { - code: "paypal_express" - additional_data: { - paypal_express: { - payer_id: "" - token: "" - } - } - } - }) { - cart { - selected_payment_method { - code - title - } - } - } -} -``` - -**Response** - -```json -{ - "data": { - "setPaymentMethodOnCart": { - "cart": { - "selected_payment_method": { - "code": "paypal_express", - "title": "PayPal Express Checkout" - } - } - } - } -} -``` - -### Place the order - -**Request** - -``` text -mutation { - placeOrder( - input: { - cart_id: "rMQdWEecBZr4SVWZwj2AF6y0dNCKQ8uH" - } - ) { - order { - order_id - } - } -} -``` - -**Response** - -```json -{ - "data": { - "placeOrder": { - "order": { - "order_id": "000000006" - } - } - } -} -``` - -## Input attributes - -### PaypalExpressTokenInput {#PaypalExpressTokenInput} - -The `PaypalExpressTokenInput` object defines the attributes required to receive a payment token from PayPal. - -Attribute | Data Type | Description ---- | --- | --- -`cart_id` | String! | The unique ID that identifies the customer's cart -`code` | String! | Payment method code -`express_button`: | Boolean | Indicates whether the buyer selected the PayPal Express Checkout button. The default value is `false` -`urls` | [`PaypalExpressUrlsInput`](#PaypalExpressUrlsInput) | Defines a set of URLs to redirect to in response to the token request -`use_paypal_credit` | Boolean | Indicates whether the buyer clicked the Paypal credit button. The default value is `false` - -### PaypalExpressUrlsInput {#PaypalExpressUrlsInput} - -The `PaypalExpressUrlsInput` object contains a set of URLs that PayPal uses to respond to a token request. - -Attribute | Data Type | Description ---- | --- | --- -`cancel_url` | String! | The redirect URL when the buyer cancels the transaction. This should be the page on your website where the buyer initially chose PayPal as the payment type -`pending_url` | String! | The URL to redirect for a pending transactions. Not applicable to most PayPal solutions -`return_url` | String! | The URL of the final review page on your website where the buyer confirms the order and payment -`success_url` | String! | The URL to redirect upon success. Not applicable to most PayPal solutions - -### PaymentMethodAdditionalDataInput {#PaymentMethodAdditionalDataInput} - -The `PaymentMethodAdditionalDataInput` data type attributes are used when setting a PayPal payment method. [setPaymentMethodOnCart mutation]({{ page.baseurl}}/graphql/reference/quote-payment-method.html) provides more context. - -Attribute | Data Type | Description ---- | --- | --- -`payflow_express` | [PayflowExpressInput](#PayflowExpressInput) | Required input for PayPal Payflow Express Checkout payments -`paypal_express` | [PaypalExpressInput](#PaypalExpressInput) | Required input for PayPal Express Checkout payments - -### PaypalExpressInput {#PaypalExpressInput} - -The `PaypalExpressInput` object contains the required input for PayPal Express Checkout payments. - -Attribute | Data Type | Description ---- | --- | --- -`payer_id` | String! | The unique ID of the PayPal customer -`token` | String! | The token returned by the createPaypalExpressToken mutation - -### PayflowExpressInput {#PayflowExpressInput} - -The `PayflowExpressInput` object contains the required input for PayPal Payflow Express Checkout payments - -Attribute | Data Type | Description ---- | --- | --- -`payer_id` | String! | The unique ID of the PayPal user -`token` | String! | The token returned by the createPaypalExpressToken mutation - -## Output attributes - -### PaypalExpressToken {#PaypalExpressToken} - -The `PaypalExpressToken` object contains a token returned by PayPal and a set of URLs that allow the buyer to authorize payment and adjust checkout details. - -Attribute | Data Type | Description ---- | --- | --- -`paypal_urls` | [PaypalExpressUrlList](#PaypalExpressUrlList) | A set of URLs that allow the buyer to authorize payment and adjust checkout details -`token` | String | The token returned by PayPal - -### PaypalExpressUrlList {#PaypalExpressUrlList} - -The `PaypalExpressUrlList` object defines a set of URLs that allow the buyer to authorize payment and adjust checkout details. - -Attribute | Data Type | Description ---- | --- | --- -`edit` | String | The PayPal URL that allows the buyer to edit their checkout details -`start` | String | The URL to the PayPal login page diff --git a/guides/v2.3/graphql/reference/quote-payment-method.md b/guides/v2.3/graphql/reference/quote-payment-method.md index ea493c93f53..66a47c141c8 100644 --- a/guides/v2.3/graphql/reference/quote-payment-method.md +++ b/guides/v2.3/graphql/reference/quote-payment-method.md @@ -12,8 +12,8 @@ Cash on Delivery | `cashondelivery` Check / Money order | `checkmo` Credit Card (Authorize.Net) | `authorizenet_acceptjs` No Payment Information Required | `free` -[PayPal Express Checkout]({{ page.baseurl}}/graphql/reference/paypal.html) | `paypal_express` -[PayPal Express Checkout Payflow Edition]({{ page.baseurl}}/graphql/reference/paypal.html) | `payflow_express` +[PayPal Express Checkout]({{ page.baseurl}}/graphql/payment-methods/paypal-express-checkout.html) | `paypal_express` +[PayPal Express Checkout Payflow Edition]({{ page.baseurl}}/graphql/payment-methods/paypal-express-checkout.html) | `payflow_express` PayPal Payflow Pro | `payflowpro` PayPal Payflow Link | `payflow_link` Purchase Order | `purchaseorder` @@ -86,10 +86,11 @@ The `PaymentMethodInput` object can contain the following attributes: Attribute | Data Type | Description --- | --- | --- -`additional_data` | PaymentMethodAdditionalDataInput | Additional payment data `code` | String! | The internal name for the payment method `purchase_order_number` | String | The purchase order number. Optional for most payment methods +For all online payment methods, the payload must include an object that defines additional information specific to that payment method. + ## Output attributes The `SetPaymentMethodOnCartOutput` object contains the `Cart` object.