Custom Components – Airwallex Hosted Payment Page

Ask us anything How do I?
1

Hi folks,

The opposing forces of my ambitions vs. my lack of coding skills continue.

I am keen to use Airwallex hosted payment page within my application instead of Stripe.

They have made it pretty simple to integrate the payment elements with different web frameworks with the ability to copy and paste the code. I want to keep it super simple and use the hpp.vue component which is just a redirect to an Airwallex checkout page.

Component: airwallex-payment-demo/hpp.vue at master · airwallex/airwallex-payment-demo · GitHub

Docs: airwallex-payment-demo/hpp.md at master · airwallex/airwallex-payment-demo · GitHub

I’m looking at the weweb-assets on Github and to naive me it looks simple to be able to build out the custom component to import into weweb.

The rationale me reminds me I’ve got no experience with that, and I would be hacking my way.

Someone please tell me that it’s a piece of cake and will take no time at all for them to do it. Or, shoot me some advice before I try my own luck?

2

You have 2 options here:

  • load the bundle script in the head and use a javascript action in a click workflow. The script in the head is not loaded in the preview editor but you can test it in staging.
  • have a look at the custom component docs to create an integration with the editor
3

Something is bothering me on the example you linked. Why is the private key in the frontend???

Ok i read the doc, and this key is provided by a previous call apparently.
So this is definitly possible with a custom component. Here are some advice

  • Pass the different parameters through a weweb configuration
  • Use a weweb button inside your component
  • Then the internal logic should be the same as the one you are seeing on the doc, the only difference will be where the parameters are coming from
4

Thanks @aurelie

Yes, the client_secret tripped me up initially but it is a token returned from a previous call which uses the private keys. I have that all set up using the environment variables in Xano.

I’ll see how I go configuring the ww-button inside the Airwallex element.

5

This is what you will need to do

  • Inside ww-config.js, add a property button 
export default {
    editor: {
        label: {
            en: 'Payment',
        },
    },
    properties: {
        button: {
            hidden: true,
            defaultValue: {isWwObject: true, type: 'ww-button' },
        },
    },
};
  • Inside the template of wwElement.vue, add <wwElement v-bind="content.button" />
6

:raised_hands: thank you