PayPal client app

In here we explain how to use the client app and get payment methods to work.

General properties

Each payment component takes a set of props that will be the same for everything. They are as follows:

• createPaymentUrl: string
  POST-Request - we get a CreatePaymentResponse
  It is your responsibility to develop this API
  The url that gets called to the endpoint of the connect app to create a payment in commercetools. Communicates with commercetools backend
  See the examples in our CoFe integration example repository

• getSettingsUrl: string
  POST-Request - we get a GetSettingsResponse
  It is your responsibility to develop this API
  The url that gets called to the endpoint of the connect app to get settings of PayPal in commercetools. Communicates with commercetools backend
  See the examples in our CoFe integration example repository

• createOrderUrl: string
  POST-Request - we get a CreateOrderResponse
  It is your responsibility to develop this API
  The url that gets called to the endpoint of the connect app to create a PayPal order in commercetools. Communicates with commercetools backend
  See the examples in our CoFe integration example repository

• onApproveUrl: string
  POST-Request - we get a OnApproveResponse
  It is your responsibility to develop this API
  The url that gets called to the endpoint of the connect app to capture a PayPal order in commercetools. Communicates with commercetools backend
  See the examples in our CoFe integration example repository

• onApproveRedirectionUrl: string If you want to redirect to a page in onApprove step then set it to this property. It is useful for the buy now process and its review page.

• authorizeOrderUrl: string
  POST-Request - we get a OnApproveResponse
  It is your responsibility to develop this API
  The url that gets called to the endpoint of the connect app to authorize a PayPal order in commercetools. Communicates with commercetools backend
  See the examples in our CoFe integration example repository

• cartInformation: object
  Information about the customers cart to crate payments with. Structure:

  account: {
    email: string;
  };
  billing: {
    firstName: string;
    lastName: string;
    streetName: string;
    streetNumber: string;
    city: string;
    country: string;
    postalCode: string;
  };
  shipping: {
    firstName: string;
    lastName: string;
    streetName: string;
    streetNumber: string;
    city: string;
    country: string;
    postalCode: string;
  };

• purchaseCallback: (result: any) => void
  Function to execute after a successful purchase.

• requestHeader: object Information that you want to send to the server as a header. Structure for CoFe:

  "Frontastic-Session": string;
  "Commercetools-Frontend-Extension-Version": string;

• shippingMethodId: string
  The id of the selected shipping. It will be sent back in the create purchase call to calculate the correct shipping costs.

• options: object options will pass to PayPalScriptProvider component and you can see the structure on PayPal documentation. ReactPayPalScriptOptions.

Vaulting properties

These properties are used when you want to set up vaulting during purchase.

• enableVaulting: boolean
  Set true if you want to enable vaulting in the payment method.

• getUserInfoUrl: string
  POST-Request - we get a GetUserInfoResponse
  It is your responsibility to develop this API
  The URL that gets called to the endpoint of the connect app to get some information related to vaulting for the logged-in user. Communicates with commercetools backend
  See the examples in our CoFe integration example repository

Vaulting for purchase later

In addition to Vaulting properties we have the following properties to vault for purchase later.

• createVaultSetupTokenUrl: string
  POST-Request - we get a CreateVaultSetupTokenResponse
  It is your responsibility to develop this API
  The URL that gets called to the endpoint of the connect app to create a vault setup token for the logged-in user. Communicates with commercetools backend
  See the examples in our CoFe integration example repository

• approveVaultSetupTokenUrl: string
  POST-Request - we get a ApproveVaultSetupTokenResponse
  It is your responsibility to develop this API
  The URL that gets called to the endpoint of the connect app to approve a vault setup token for the logged-in user. Communicates with commercetools backend
  See the examples in our CoFe integration example repository

Payment specific properties

In addition, each payment component comes with its own specific properties.

PayPal

PayPal components props are based on PayPal props and you can see them on PayPal official documentation PayPalButtonsComponentOptions.

• paypalMessages: object Pass this object here if you want to show the PayPal Messages in the PayPal component. In order to see the structure check the parameters of PayPalMessages.

PayPalMessages

PayPal messages props are based on PayPalMessages props and you can see them on PayPal official documentation PayPalMessagesComponentOptions.

ApplePay

• applePayDisplayName: string
  Name of your store.

GooglePay

Have a look at Googles specification for a detailed explanation of the options

• environment: string
  "TEST" or "PRODUCTION";
• allowedCardNetworks: string[] One or more card networks that you support, also supported by the Google Pay API.
• allowedCardAuthMethods: string
  "PAN_ONLY" (cards on file) and "CRYPTOGRAM_3DS" (Android powered device token)
• callbackIntents: string[]
  Specifies intents for PaymentDataCallback
• apiVersion: number
  Major API version
• apiVersionMinor: number
  Minor API version
• totalPriceStatus: string
  "FINAL" or "ESTIMATED"
• buttonColor: string
• buttonType: string
• buttonRadius: number
• buttonSizeMode: string
• verificationMethod: string

CardFields

• authenticateThreeDSOrderUrl: string POST-Request Communicates with commercetools backend to get the 3d Secure validation results and returns an object with the liability_shift, enrollment_status, and authentication_status.
  See the examples in our CoFe integration example repository

HostedFields

HostedFields are deprecated; CardFields is the preferred way to use advanced card payments.

• getClientTokenUrl: string
  POST-Request - we get a ClientTokenResponse
  It is your responsibility to develop this API
  The URL that gets called to the endpoint of the connect app to get the client token to use in PayPalHostedFieldsProvider component in commercetools. Communicates with commercetools backend
  See the examples in our CoFe integration example repository

PaymentTokens

If you want to get a list of vaulted payments you can use this component. It will also give you the avility to remove the vaulted account.

You need to pass properties that are mentioned in the Vaulting properties section and also pass the following specific property.

• removePaymentTokenUrl: string
  POST-Request - we get a GetUserInfoResponse
  It is your responsibility to develop this API
  The URL that gets called to the endpoint of the connect app to remove a Payment Token in the PaymentTokens component in commercetools. Communicates with commercetools backend
  See the examples in our CoFe integration example repository

PayUponInvoice

It is your responsibility to check the eligibility and enable Pay upon Invoice with Ratepay in the PayPal business account.

You need to pass general properties and also pass the following specific properties:

• merchantId: string
  Identifier of the merchant, can be found in PayPal Account Settings > Business Information > PayPal Merchant ID.
• pageId: string Describes the type of the page at which checkout is called, the supported values can be found at Modify the code section of the PayPal Pay Upon Invoice Documentation
• invoiceBenefitsMessage:string
  Optional parameter that allows to set custom message for describing the benefits of payment upon invoice. If you provide the custom value you must inform the buyer that they have 30 days to pay Ratepay via bank transfer.
• customLocale: string
  Optional parameter that allows to set the Pay Upon Invoice interface language. Supported values are 'en' for English and 'de' for German.

Support

If you need support with the integration, please write a mail to [email protected]