To execute checkout transactions via PaymentTransactionServices, we must first create a Payment in PaymentTransactionServices. These Payments are most commonly created during the payment stage of your checkout flow.
With the Checkout.com’s Flow UI, we do not expect the frontend to provide any payment details prior to creating a payment. Instead, this interaction is treated as a Hosted Payment Page and the Flow payment session will be created during the first attempted checkout submission. This is done to ensure that the cart’s details are valid/trusted before interacting with the Flow UI, which will execute the payment transaction once submitted.
Provide the success & failure URLs, and the payment_method set to flow in the paymentMethodProperties:
{
...
gatewayType: "CHECKOUT_COM",
type: "CREDIT_CARD",
paymentMethodProperties: {
"enabled": "true", // enable 3DS,
"success_url": "3DS success url",
"failure_url": "3DS failure url",
"payment_method": "flow"
},
isSingleUsePaymentMethod: true,
...
}
|
Note
|
Also see how to add a payment via the Commerce SDK. |
|
Important
|
This is deprecated in favor of Flow UI payments. |
To execute Checkout.com transactions via PaymentTransactionServices, we must first create a Payment in PaymentTransactionServices. These Payments are most commonly created during the payment stage of your checkout flow.
We expect the frontend to provide a token representing the customer’s card details, so that the payment transaction can be executed. To get the token from the Checkout.com, the frontend should use Frames. See Frames Tokenization Integration for more details.
Then use the token from the response in the paymentMethodProperties to create a Payment:
{
...
gatewayType: "CHECKOUT_COM",
type: "CREDIT_CARD",
paymentMethodProperties: {
"token": tokenEvent.token,
"enabled": "true", // enable 3DS,
"success_url": "3DS success url",
"failure_url": "3DS failure url"
},
isSingleUsePaymentMethod: true,
...
}
|
Note
|
Also see how to add a payment via the Commerce SDK. |