We are currently trying to integrate your React frontend
const intent_id = "int_hkdmxqfgmgb1vkaeror";
const client_secret = "GUESSING API KEY";
const customer_id = "cus_hkdmpnqs7gb1swg8p2g";
const currency = "AUD";
const env = "demo";
const next_triggered_by = "merchant";
Now if I am correct the client_secret is where we put our API key, however we have done that using our demo airwallex account and we get the following error
{
"message": "Access denied, authentication failed",
"code": "unauthorized"
}
Now we are localhost testing, but I would not expect that to be the issue in this case.
We have copied and pasted the sample code from
https://codesandbox.io/s/airwallex-payment-demo-react-2m63j?file=/src/components/SplitCardRecurring.jsx
Update
Seems that client_secret is more than just the API key (which by the way needs to be authenticated before it is used in this plugin)
As now I am getting the following error
{
"code": "validation_error",
"message": "No 'customer_id' in client secret"
}
So steps to reproduce.
Step 1) take your API key and create session
curl --location --request POST 'https://api-demo.airwallex.com/api/v1/authentication/login' \
--header 'Content-Type: application/json' \
--header 'x-api-key: API KEY' \
--header 'x-client-id: CLIENT-KEY'
Step 2)
curl --location --request POST 'https://api-demo.airwallex.com/api/v1/pa/payment_methods/create' \
--header 'Content-Type: application/json' \
--header 'Accept: application/json, text/plain, */*' \
--header 'Accept-Language: en-AU,en;q=0.9' \
--header 'Accept-Encoding: gzip, deflate, br' \
--header 'Origin: https://checkout-demo.airwallex.com' \
--header 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.5 Safari/605.1.15' \
--header 'Referer: https://checkout-demo.airwallex.com/' \
--header 'Content-Length: 197' \
--header 'Connection: keep-alive' \
--header 'Host: pci-api-demo.airwallex.com' \
--header 'client-secret: (AUTH KEY FROM STEP 1)' \
--header 'Priority: u=3, i' \
--header 'x-api-version: 2021-11-25' \
--header 'x-client-ip-source: awx-checkout' \
--header 'Awx-Tracker: 6251a8c0-23cb-47d0-a0da-ce9bc0fcd7fb' \
--data-raw '{"type":"card","card":{"number":"4111111111111111","cvc":"111","expiry_month":"10","expiry_year":"2022"},"customer_id":"cus_hkdmpnqs7gb1swg8p2g","request_id":"3c7541fc-a430-41b7-9a33-fc9b23615d58"}'
However the issue is that because it does not include the customer ID it fails.
How to create client_secret
So we worked out that the react plugin is not a simple include and run system. You still need to do a number of steps before you can use this plugin.
This should be documented clearer on this plugin (note all codes are in postman curl you can convert to node JS easy):
Step 1) Authenticate yourself by running
curl --location --request POST 'https://api-demo.airwallex.com/api/v1/authentication/login' \
--header 'Content-Type: application/json' \
--header 'x-api-key:API KEY' \
--header 'x-client-id: CLIENT KEY'
Step 2) Create the customer if they are not already in your system
curl --location --request POST 'https://api-demo.airwallex.com/api/v1/pa/customers/create' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer KEY FROM RESPONSE FROM STEP 1' \
--data-raw '{
"additional_info": {
"registered_via_social_media": false,
"registration_date": "2022-06-25"
},
"address": {
"city": "ADDRESS",
"country_code": "AU",
"postcode": "POSTCODE",
"state": "Western Australia",
"street": "STREET ADDRESS"
},
"business_name": "INSERT BUSINESS NAME",
"email": "THERE EMAIL ",
"merchant_customer_id": "USER/CUSTOMER ID",
"phone_number": "CUSTOMER PH NUMBER",
"request_id": "RANDOM UUIDV4"
}'
Step 3) Create payment intent
curl --location --request POST 'https://api-demo.airwallex.com/api/v1/pa/payment_intents/create' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer KEY FROM RESPONSE FROM STEP ' \
--data-raw '{
"amount": 200.00,
"currency": "AUD",
"customer_id": "CUSTOMER ID FROM AIRWALLEX",
"descriptor": "DESCRIPTION",
"merchant_order_id": "USER/CUSTOMER ID",
"order": {
"products": [
{
"code": "7719",
"desc": "DESCRIPTION OF PRODUCT",
"name": "NAME OF PRODUCT",
"quantity": 1,
"type": "virtual_goods",
"unit_price": 200.00,
"url": "PRODUCT URL"
}
],
"supplier": {
"address": {
"city": "CITY",
"country_code": "AU",
"postcode": "POSTCODE",
"state": "STATE",
"street": "STREET ADDRESS"
}
},
"type": "virtual_goods"
},
"payment_method_options": {
"card": {
"risk_control": {
"skip_risk_processing": true,
"three_domain_secure_action": "FORCE_3DS",
"three_ds_action": "FORCE_3DS"
},
"three_ds_action": "FORCE_3DS"
}
},
"request_id": "RANDOM UUID",
"return_url": "URL",
"risk_control_options": {
"skip_risk_processing": false
}
}'
Once you have done all those steps you should be able to get the response from that query and use it to create the card payment - However while I was able to accessfully do it via the postman, when I tried to do it by the embedded form I got the following which I don't fully understand.
{
"code": "invalid_status_for_operation",
"message": "The PaymentIntent status SUCCEEDED is invalid for operation confirm."
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent