In Twilio Studio Flow, how to use 'Gather widget' for one-off dollar/cents Stripe payment amount for 'Capture Payments' widget

user_10700163 0
Viewed 316

I'm not a developer so I'm largely restricted to TWILIO STUDIO FLOW--with decent success.

Attempting now (unsuccessfully) to add an IVR payment option 'Press X to pay your bill'.

When prompted by a Gather widget the caller (customer) enters the bill amount. This gathered value becomes the input parameter to the Capture Payments widget for payment processing by Stripe.com.

  1. I have confirmed that my Twilio-Stripe account 'Default' connection is correct by successfully processing a hard-coded charge amount (using Twilio's example Twiml code).

  2. Since we need customer/callers to enter variable bill amounts, we're doing this via a Gather Input wizard (since I'm not a programmer). I've tried repeatedly to use the Studio Flow 'Capture Payment' wizard with three recurring problems.

    • Can someone tell me how to convert the digits entered into a dollar-and-cent value (effectively 'nnnn' x .01 = 'nn.nn') OR how to enter a decimal via the telephone touch pad

    • read back the 'xx dollars and xx cents' amount entered confirmation verbiage before continuing to process payment

    • Is there perhaps any obscure something else required to get a successful payment via the Flow Pay wizard (other than dragging the connector and providing valid CC credentials)? No matter what I have tried, it does not appear to recognize the DTMF codes and after three attempt (with a valid credit card), it continues to disconnect.

In the gather_confirm_amount widget input box is this verbiage:

You entered the amount of {{widgets.gather_amount_due.Digits | split: "." | 
first}} dollars and {{widgets.gather_amount_due.Digits | split: "." | last}} 
cents.

If this is correct, press 1.

This value is entered into the 'Charge Card With Amount' field using the following

{{widgets.gather_amount_due.Digits | split: "." | first}} dollars and 
{{widgets.gather_amount_due.Digits | split: "." | last}}'''

When user enters into 100 into '''gather_amount_due''' widget I get 'You entered the amount of 100 dollars and 100 cents.'

Obviously, I am trying to return a response 'You entered ONE DOLLARS and ZERO CENTS'.

Also, the Stripe payment prompt says three times 'Please enter your credit card number' and then disconnects due to 3 max attempts. It does not appear to be acknowledging the DTMF inputs at all.

Thank you.

twilio
2 Answers

I'm trying to figure out the same issue, maybe you can prompt the customer to use * as the decimal point and then replace the character?

Reading it back to the customer I assume you got figured out? I'm using Studio and if you type in the number say $123.45 and use the say-as interpret-as"currency" and add the number with $ or USD it will dictate it (at least using the Polly voices). I basically looked up SSML tags and figured this out.

<say-as interpret-as="currency">$123.45</say-as>

I assume you debugged the DTMF issue but they say there may be some difficulty with DTMF on international or mobile calls. The other way would to be Speech to Text and may also solve the decimal point issue.

user_119374560

I have successfully been able to accept dollars and cents and read it back.

To have the caller enter dollars and cents you can do 1 of 2 ways. Either have the caller press "star" as a decimal point so for a $10.50 payment they would enter 1,0,*,5,0. Or they can just add 2 digits as cents so for $10.50 they would press 1,0,5,0 and for lets say $5 they would press 5,0,0.

Now we take the {{widgets.gather_amount_due.Digits}} and send it a function widget by placing it in a KEY VALUE function parameter and and taking those digits in the function and converting it into a decimal number like so.

In the examples below the KEY is "amount".

For method without star use this.

exports.handler = function(context, event, callback) {

//bring in amount
const amount = event.amount;

//add decimal
const response = (amount / 100).toFixed(2);

  callback(null, response);
};

For method with star key use this.

exports.handler = function(context, event, callback) {

//bring in amount
const amount = event.amount;

//add decimal
const response = amount.replace('*', '.');

  callback(null, response);
};

Then take the return of the function {{widgets.YOUR_FUNCTION_NAME.body}} and place it in the "Amount" field of the pay widget and viola! You can also take that same return and place it in a say widget to read back the amount.

user_137294450
Related