Customized Checkout

Setup Customized checkout

Setup Customized checkout

In order to use Elements checkout feature, you need to setup merchant account and connect to all the payment gateway accounts, please refer to Quick Start

Setting up payment method

You need to have a payment method available in order to create a charge, please refer to Payment Method Section to create a payment method.

Creating a charge

Create a charge when your customers are ready to complete the purchase. Create Charge API will be able to provide customized options for you.

curl --location --request POST '' \
--header 'Idempotency-Key: Idempotency-Key-hang33' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer mck_test_PRrYgoLOeXkCjDIVPFKMZCCGXfft83tGb05ztk_sZVRGrolI97iy6ezhw0nyMXicGvE32aBfDXJmr5t4x42r6A' \
--data-raw '{
    "description": "charge demo",
    "capture": true,
    "currency": "USD",
    "payment_method_id": "PM-D48U28RFTDKTFWPPK7cAP1i3",
    "payment_gateway_account_id": "PGA-6FuWsptmWnyJBgQr4SighXF1",
    "order_id": "123458812",
    "external_customer_id": "cus_id_999",
    "metadata": {
        "example_metadata_key": "example_metadata_value"
  amount: 30000,
  currency: "USD",
  payment_method_id: "PM-XXXXXX" 

Specify Payment Gateway Account - You can charge the gateway account you choose to boost the payment success rate (E.g Stripe gateway account and Adyen gateway account have different success rates in different regions, you are able to select the gateway account based on region).

Capture - The capture flag allows you to auth and to capture later when you are ready to complete the payment.

Handle post-payment events

Elements sends charge.succeeded event when the payment completes. Use Merchant Console to configure the events that you want to handle.

event namedescriptionaction
charge.succeededwhen customer successfully completed a paymentsend order confirmation and continue the user flow.
charge.authorizedwhen the payment is authorized from payment gateway account and ready to captureallow user flow to continue the purchase flow since the charge is authorized.
charge.failedWhen the charge is failed due to some reasonRetry the payment method later or try different payment method.
charge.expiredwhen charge is authorized but not captured in a time window(it is configured from payment gateway side)Try to initiate another charge if this is unexpected.
charge.canceledwhen charge is canceled after authorized.send cancel confirmation to customer.

Test the integration

To test payment details use the sandbox environment.
You can use test card works for each payment gateway.